以下内容是我在学习和研究React时，对React的特性、重点和注意事项的提取、精练和总结，可以做为React特性的字典，方便大家查阅；

内容

1. JSX语法

JSX 语法的解析规则是：遇到 XML 标签 <...>，以 XML 规则解析；遇到代码块 {...}，就用 JavaScript 规则解析；
我认为，在JSX中，XML可以理解为是创建虚拟DOM对象的字面量写法；在编译之后呢，XML标签会被转化为 React.createElement() 函数的调用；
下面两种代码的作用是完全相同的：
```
const element = (
    <h1 className="greeting">
    Hello, world!
    </>
 );
```
等效于：
```
const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
 );
```
React.createElement() 这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：
```
 // 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
 const element = {
     type: 'h1',
     props: {
         className: 'greeting',
         children: 'Hello, world'
     }
 };
```
这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。
JSX 允许直接在模板插入 JavaScript 变量；如果这个变量是一个数组，则会展开这个数组的所有成员；
如果 JSX 中的XML带有换行，则推荐，有XML的外面加上一个小括号，这样可以防止分号自动插入的bug；
在JSX中的XML，通过引号定义以字符串为值的标签属性：const element = <div tabIndex="0"></div>;，通过大括号来定义以 JavaScript 表达式为值的标签属性：const element = <img src={user.avatarUrl}></img>;；切注意：如果使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式；
JSX不允许没有闭合的标签；
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 XML 使用 camelCase 小驼峰命名来定义属性的名称，而不是使用 HTML 的属性名称;例如：class 用 className 代替，而 tabindex 用 tabIndex 代替；
React DOM 在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击；

2. 注释

由于JSX的本质是JavaScript，所以在JSX中的注释还是JavaScript的注释；为了JSX的XML中使用注释，所以需要用先用花括号{}产生JavaScript环境，然后在{}内使用JavaScript注释；
所以，关于的注释的规则总结如下：

在标签内部的注释需要花括号{}括住；
在标签外的注释不使用花括号{}；

3. React元素

元素是构成 React 应用的最小单位；元素用来描述你在屏幕上看到的内容，如下：const element = <h1>Hello, world</h1>;；
React元素与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致；
React 元素都是不可变的。当元素被创建之后，是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法；在实际生产开发中, 大多数React应用只会调用一次 ReactDOM.render()；
在更新视图时，React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分；
JSX 的标签名决定了 React 元素的类型；小写开头的 JSX 标签名表示一个原生HTM元素，即内置的组件，如 <div> 或 <span>，在编译时，会将字符串 'div' 或 'span' 传递给 React.createElement 方法；大写开头的 JSX 标签名表示一个 React 组件，如 <Foo />，在编译时，会被编译为同名变量并被引用，如 React.createElement(Foo)，所以如果使用了大家开头的标签，如：<Foo />，则必须在作用域中先声明与该标签名同名的变量，如 Foo 变量；
由于 JSX 编译后会调用 React.createElement 方法，所以在 JSX 代码中必须首先声明或导入 React 变量；
JSX 的标签名可以是打点的属性调用；如： <MyComponents.DatePicker color="blue" />；但不能是表达式，如：<MyComponents["DatePicker"] color="blue" /> 是错误的；

4. 组件

从概念上看组件就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素；
当React遇到的元素是用户自定义的组件时，它会将标签的所有标签属性作为单个对象传递给该组件构造函数,这个对象称之为“props”；
在组件内部，不允许修改props；
可以通过props.children获取组件元素的开关标签之间的内容；
组件可以嵌套；
唯一一种在 React 之外获取 React 组件实例句柄的方式就是保存 React.render 的返回值。在其它组件内，可以使用 refs 得到相同的结果；

定义组件的方式：

用函数定义组件：
定义一个组件最简单的方式是使用JavaScript函数：
```
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
 }
```
该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

通过 ES6 class 来定义组件：

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
     }
 }

组件的渲染

组件通过触发组件实例的render方法渲染自己；
每个组件在渲染时也会触发子组件的render方法渲染子组件；
根组件需要通过ReactDom.render方法把自身添加到指定的Dom元素上，并渲染自己；
组件类的顶层标签只能有一个；
如果 render 返回 null，则不会渲染该组件，但并不会影响该组件生命周期方法的回调；

5. 标签属性

在 JSX 中有如下几种不同的方式来指定标签属性：

使用 JavaScript 表达式
可以传递任何 {} 包裹的 JavaScript 表达式作为一个标签属性值，如： <MyComponent foo={1 + 2 + 3 + 4} />，表达式的值最终会被赋给相应的标签属性。if 语句和 for 循环在 JavaScript 中不是表达式，因此它们不能直接用在标签属性中；
字符串常量
可以将字符串常量作为标签属性值传递。当你传递一个字符串常量时，它不会对其进行 HTML 转义，所以下面几个 JSX 表达式是等价的：
```
<MyComponent message="<3" />
<MyComponent message="<3" />
<MyComponent message={'<3'} />
```
默认为 True
如果没有给标签属性传值，则它默认为 true。因此下面两个 JSX 是等价的：
```
<MyTextBox autocomplete />
<MyTextBox autocomplete={true} />
```

扩展属性
在 JSX中，你可以使用 ... 作为扩展操作符来传递整个属性对象。
下面两个组件是等效的：

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

6. 元素的子代

在 JSX 中，开始标签和结束标签之间的子代内容会作为props.children传递；开始标签和结束标签之间可以是任何类型的东西，只要该组件在 React 渲染前能将其转换成 React 能够理解的东西即可；

例如，可以传递如下类型的子代：

字符串常量：如果在开始和结束标签之间放入一个字符串，则 props.children 就是那个字符串；因为 HTML 未被转义，所以可以像写 HTML 一样写 JSX；JSX 会移除行空行和开始和结尾处的空格。标签邻近的新行也会被移除，字符串常量内部的换行会被压缩成一个空格；
JSX：可以开始和结束标签之间嵌入更多的 JSX 元素；
JavsScript 表达式：可以将任何 {} 包裹的 JavaScript 表达式作为子代传递；
函数：可以将用 {} 包裹的函数作为子代传递；
布尔值、Null 和 Undefined 被忽略：
false、null、undefined 和 true 都是有效的子代，但它们不会直接被渲染；而当子代是React 提供的一些 "falsy" 值（即：除了false 外，0，“”，null，undefined 和 NaN）时，则会被渲染；
下面的表达式是等价的：
```
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
```

7. 状态state

构造函数是唯一能够初始化 this.state 的地方；
直接更新状态不会重新渲染组件，如：this.state.comment = 'Hello';；应当使用 setState()设置状态，如：this.setState({comment: 'Hello'});；
状态更新可能是异步的；React 可以将多个setState() 调用合并成一个调用来提高性能。因为 this.props 和 this.state 可能是异步更新的，所以不应该依靠它们的值来计算下一个状态，如：
```
//错误的示范
this.setState({
    counter: this.state.counter + this.props.increment,
 });
```
应该给 setState() 传一个函数而不是一个对象。该函数将接收先前的状态作为第一个参数，如：
```
//正确的示范
this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
 }));
```
上方代码使用了箭头函数，但它也适用于常规函数；
当你调用 setState(参数对象) 时，参数对象中的属性会完全替换掉this.state中相应的属性；

8. Props和State

Props是组件实例的标签属性的集合；它可以接收组件外传进来的值，在组件内部是不可修改Props的属性的，在组件外部可以通过标签属性给它赋值，所以可以用来从组件外部给组件内部传值；
State是组件实例的内部数据的集合；在组件内部是可以更改State的属性的值，且每次更改后，都会触发render方法渲染组件；
组件的标签属性在使用前不用先定义；而组件的内部数据State的属性在使用前需要先通过getInitialState方法定义；

9. 事件处理

React事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法，则需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)；处理函数接收一个事件对象，这个事件对象是 React 根据 W3C spec 来合成的事件对象，所以不需要担心跨浏览器的兼容性问题；
不能使用返回 false 的方式阻止默认行为，必须明确的使用 preventDefault 来阻止默认行为；

示例：

function ActionLink() {

  function handleClick(e) {
    e.preventDefault();
    console.log('已被点击！');
  }

  return (
    <a href="#" onClick={handleClick}>
      点击我
    </a>
  );
}

10. key

key必须在其兄弟节点中是唯一的，而非全局唯一；
key会作为给React的提示，但不会传递给你的组件，即不会成为props中的属性；

11. 表单

对于 textarea 元素，在HTML当中，是通过子节点（开关标签之间的内容）来定义它的文本内容的，而在React中，是通过标签属性value来设置它的文本内容的；
对于 select 标签，在HTML中，是通过在设置它的选项option元素的标签属性selected来设置被选中的选项的；而在React中，是通过设置 select 元素的标签属性 value 来设置被选中的值的；
通过给表单元素设置标签属性 defaultValue 可以为其指定初始值；

12. props的类型检查

要给组件的props限制类型，则需要设置组件类的propTypes属性；
示例代码：

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string,
  children: PropTypes.element.isRequired
};

可以通过设置propTypes的children属性 propTypes.children 来限传入的子代内容；

13. props的默认值

要给组件的props设置默认值，则需要设置组件类的defaultProps属性；
defaultProps 用来确保 this.props.name 在父组件没有特别指定的情况下，有一个初始值。类型检查发生在 defaultProps 赋值之后，所以类型检查也会应用在 defaultProps 上面；
示例代码：

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// 为属性指定默认值:
Greeting.defaultProps = {
  name: 'Stranger'
};

// 渲染 "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

14. 元素的引用

元素的标签属性 ref 接受一个回调函数，它在元素被加载或卸载时执行；该回调函数接收一个参数element，
在元素被加载时：
如果该元素是原生的HTML元素，则参数element是该元素的DOM节点实例；
如果该元素是React组件，则参数element是该元素的Reac实例；
在元素被卸载时：参数element是null；

注意：

对函数式组件（用函数定义的组件）设置ref无效；
如果 ref 回调以内联函数的方式定义，在更新期间它会被调用两次，第一次参数是 null ，之后参数是元素的实例。这是因为在每次渲染中都会创建一个新的函数实例。因此，React 需要清理旧的 ref 并且设置新的；

15. 不使用ES6

以上是用ES6的语法创建的React组件的，当然也可以仅用ES5及以下的语法特性来创建，如下：

用 create-react-class 模块创建组件类，代替ES6的用class创建组件类：

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

ES6 中 class 相关的接口与 createReactClass 方法十分相似，但有以下几个区别：

声明默认属性：
- 如果使用 class 关键字创建组件，可以直接把自定义属性对象写到类的 defaultProps 属性中；
- 如果使用 createReactClass 方法创建组件，那就需要在配置对象中定义 getDefaultProps 方法，并且在这个方法中返回包含自定义属性的对象；
设置初始状态：
- 如果使用 class 关键字创建组件，你可以通过在 constructor 中给 this.state 赋值的方式来定义组件的初始状态；
- 如果使用 createReactClass 方法创建组件，你就需要多写一个 getInitialState 方法，并让这个方法返回你要定义的初始属性；
自动绑定：
- 对于使用 class 关键字创建的 React 组件，组件中的方法是不会自动绑定 this 的。类似地，通过 ES6 class 生成的实例，实例上的方法也不会绑定 this。因此，你需要在 constructor 中为方法手动添加 .bind(this)；
- 如果使用 createReactClass 方法创建组件，组件中的方法会自动绑定至实例，不需要加 .bind(this)；

16. React的特性

JSX使用大、小写的约定来区分标签是定义的组件类还是原生的HTML标签；
由于JSX就是JavaScript，所以一些标识符（如：class和for）不能作为XML标签的属性名。在JSX中，使用className替代XML标签的class属性，htmlFor替代XML的for属性；
在JSX中的XML中的花括号{}表达式中不能使用if else语句，可以使用条件表达式(三元运算条件?值1: 值2)代替；
组件类的顶层标签只能有一个；
每次调用this.setState方法修改状态值，都会触发this.render方法渲染组件；

17. 性能优化

虽然 props 由React本身设置以及 state 用于存储状态，但如果需要存储不用于视觉输出的东西，则建议通过手动向类或实例中添加相应属性来存储，而不应用 state 和 props 来存储；
如果在组件的钩子方法shouldComponentUpdate中返回false，则React不会对该组件及其子组件进行变化检查和渲染，所以，应在组件不需要更新的情况下，让钩子方法shouldComponentUpdate内返回false；
因为 React.PureComponent 类型的组件在做变化检查时是用浅比较来判断是否有变化的，所以性能较快，所以：对于没有必须进行深比较的组件，优先使用 React.PureComponent 而不是 React.Componen；
合理的使用key；

React特性精华

目录

内容