react学习总结系列-react(一)

发表于 | 分类于 ，

这里开始总结一下React。最好了解跟学习react的方法当然是去看react的官方文档，所以这里主要写的是各个知识点需要注意的点。

JSX语法

JSX语法就是在JS中直接写类似HTML标签，但实际上写的不是HTML代码，这中写法其实是React.creatElement(component, props, ...children)的语法糖。这种语法糖的书写相较于后者的书写更为方便易懂。

代码1 react文档中的例子

1
2
3
4
5
6
7
8
9
10
11
// JSX语法
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

// 编译为:
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

react文档有非常详细的介绍，这里主要提一些需要留意的点：

1.字母大小写。标签名(组件名)都是驼峰命名法(大驼峰命名法)，后面也会说到的style-component插件也是用这样的写法。

2.className。因为JSX语法其实是JS封装的，所以class还是js的关键词。所以在标签中如果要使用class类的话，需要写成className而不是class。写成class也不会影响代码的运行，但是会报一个提示。其他的html标签中使用的属性在JSX中都是小驼峰命名法的写法。

3.标签之间的值。如果标签之间没有值，则可以直接一个标签闭合。在html中，有一些标签是单一标签，不用写/闭合也是可以的，但是在JSX中所有标签都需要用/来闭合，所以像input，img都需要写成<input />、<img />的闭合形式。如果是标签之间有值，那么支持像html一样直接把字符串写在标签之间，也可以直接写变量，如果遇到数组，可以用map函数枚举数组所有项，但是需要注意的是，标签之间不支持多个语句，最多只支持一个语句。上面用到的map也是一个语句下完成的。不支持if-else判断语句，但是支持三元判断。

4.获取dom。react中支持用ref来获取dom对象，但实际上是react封装的一个React对象。如果要获取原生dom对象，可以使用innerRef。(PS: 这一部分其实涉及起来可以有很多内容，不过先知道这些就好，而且一般也建议少用ref)

代码2 获取div的React对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// v16之前写法
class MyComponent extends React.Component {
  render() {
    return <div ref={(myRef) => {this.myRef = myRef}} />;
  }
}

// v16的写法
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

5.标签中支持写入带html代码的字符串，但是如果直接填入这样的字符串并不会被渲染成相应的内容，因为react也有这方面的安全防御。如果一定要填入这样的字符串，则需要通过dangerouslySetInnerHTML这个属性来传入。`dangerouslySetInnerHTML={{__html: }}`

代码3 在Content组件中传入带HTML代码的字符串this.props.content

1
<Content dangerouslySetInnerHTML={{__html: this.props.content}} />

6.JSX语法可以在函数中使用。一般指函数最后返回的值是直接放在标签中的。其实这些JSX语句在函数中还是以字符串的形式专递的，直到进入render()的return中才会被编译。

7.属性。标签中的属性都是小驼峰命名法。属性支持的值可以是各种类型的（包括Function），也可以是一个执行语句，但是一样不支持多语句，判断语句中只支持三元判断。

组件

组件是react中一个很重要的概念。首先，从一个用户来说，整个页面可以分为多个信息块，不同的信息块可以获得不同的信息，而从开发者来说，整个页面可以分为多个开发模块，每个模块都是相对独立，互不干扰，而且有些模块可能在整个网站多个页面都会出现。组件其实就是这些开发模块，它拥有属于自己的数据(信息)，根据自己的样式被渲染到页面上。

react中组件的写法很简单，上一篇已经提到了JSX语法，针对的就是react的组件。组件中可以直接书写字符串，非引用类型变量，执行一条语句等，也可以什么都不写，自我闭合。

组件中还可以嵌套子组件，但是前提是子组件必须已经定义或者引入。下面来说一些关于组件开发中的一些需要注意的点：

1.组件的返回值只能有一个根元素。组件的返回值如果不只有一个根元素，则编译的时候回出现报错，无法渲染到页面。一般在实现一个组件时，会在最外层用一个html标签包住内容。

2.Fragment组件。有时候因为一些样式的原因，组件最外层的标签会影响页面显示的效果。这个时候可以考虑使用react提供的方案，Fragment。先把Fragment从react中引入，然后把组件最外层的标签替换成<Fragment>。在编译之后，DOM中将不会出现Fragment组件，组件内部直接渲染出来。这样既减少不必要的div标签，还可以保证一些样式的效果。

3.React DOM更新。大家都知道，React是通过虚拟DOM来提高页面性能的。React对DOM的操作其实都是对虚拟DOM的操作。当虚拟DOM的修改完成之后，React在把虚拟DOM跟DOM做比对，把需要更新的部分进行更新。注意，这里是只更新需要更新的部分，其他没变动的部分不会更新。

4.props跟state 。props跟state其实区别还挺明显的，不过这个还是用得越多也清楚这个区别。props可以理解为传入的参数的集合，因为这个集合内的变量都是传入进来的，所以是不可以修改的。state可以 理解问组件自身的属性值集合，这些属性都是会根据不同状态页面的表现而改变，所以是可以修改的，但是需要调用setState()进行修改，不能随意修改。所有的props在组件外传入，包括父组件，url等等，而state是需要在组件的constructor()中先声明后才可以赋值使用。

5.super(props); 。在写constructor()，必须要先写一个语句super(props);。我看网上的解释是因为我们写的组件都是继承父类React.component，而我们在组件中写的constructor()会覆盖掉父类的constructor()，导致你父类构造函数没执行，所以手动执行下。

其他的注意点想到或遇到后更新上来，现在就先写这么多。下一篇会介绍React的父子组件数据传递跟生命周期。