React 高级指南小记

接上篇，仍是笔记，仍是干货。

深刻 JSX

若是使用 JSX 表达式 <Foo />，Foo 必须在范围内，由于这些标签被编译为对指定变量的直接引用。

因为 JSX 编译为对 React.createElement() 的调用，所以 React 库必须始终在 JSX 代码的做用域中。

可使用 JSX 中的点表示法来引用 React 组件。若是有一个模块导出不少 React 组件，这很方便。

用户定义的组件必须以大写开头。

当构建通用容器时，扩展属性可能颇有用。然而，扩展属性很容易将大量不相关的属性传递给不关心它们的组件。建议谨慎使用扩展属性。

在包含开始标记和结束标记的 JSX 表达式中，这些标记之间的内容做为特殊的属性 this.props.children 传递。

React 组件不能返回多个 React 元素，可是一个 JSX 表达式能够有多个子元素。所以，若是想要一个组件呈现多个元素，能够将它包装在 div 中。

传递给自定义组件的子项能够是任何东西，只要该组件将它们转换为 React 在渲染以前能够理解的东西便可。

一些“假”值，仍然会被 React 渲染。

使用 PropTypes 进行类型检查

出于性能缘由，仅在开发模式下检查 propTypes。

Refs 和 DOM

ref 属性接受一个回调函数，回调将在组件被挂载或卸载后当即执行。

当组件装载时，React 将使用 DOM 元素调用 ref 回调，并在卸载时用 null 调用它。

当在自定义组件上使用 ref 属性时，ref 回调接收组件的已装入实例作为其参数。

不受控制的组件

在大多数状况下，建议使用受控组件来实现表单。在受控组件中，表单数据由 React 组件处理。不受控组件的表单数据则是由 DOM 自己处理。

要编写不受控制的组件，而不是为每一个状态更新编写事件处理程序，可使用 ref 从 DOM 获取表单值。

因为不受控制的组件在 DOM 中保持真实源，所以，当使用不受控制的组件时，有时更容易集成 React 和非 React 代码。

优化性能

在某些状况下，能够经过重写生命周期函数 shouldComponentUpdate() 来提高性能，这是在从新呈现过程开始以前触发的。若是在某些状况下组件不须要更新，能够从 shouldComponentUpdate() 返回 false，以跳过整个渲染过程。

大多数时候，能够继承 React.PureComponent 而不是编写本身的 shouldComponentUpdate() 来进行浅比较。

若是仅仅是修改属性或状态内的实例的变量，而不是经过建立一个新的实例去覆盖它，那么 shouldComponentUpdate() 将不能正常工做。

Reconstruction

当根元素类型不一样时，React 将拆除旧树并从头开始构建新树。

当 DOM 元素类型相同时，React 会查看二者的属性，保留相同的底层 DOM 节点，并仅更新更改的属性。当更新样式时，React 也知道只更新已更改的样式属性。处理 DOM 节点后，React 而后对子节点进行递归。

当组件元素类型相同时，实例保持不变，所以，在渲染之间维护状态。React 更新底层组件实例的属性以匹配新元素，并在底层实例上调用 componentWillReceiveProps() 和 componentWillUpdate()。接下来调用 render() 函数，而后对子节点进行递归。

当对 DOM 节点的子节点进行递归时，React 只是同时迭代两个子节点列表，并在有差别时产生变化。当子节点有 key 时，React 使用键将旧树中的节点和新树中的节点进行匹配。

Context

经过组件树传递数据，没必要在每一个级别手动传递属性，能够在 React 中使用强大的 context API 来作到这一点。

绝大多数状况下不须要使用 context。

context 是一个实验性的 API，可能会在将来的版本中取消。

一般建议使用诸如 Redux 之类的状态管理库，而不是使用 context。

最后

源码：https://github.com/chnhyg/react-demo