React 文档学习笔记——高级指引

无障碍

其实是通过标准html技术实现的。

代码分割

懒加载，动态导入：React.lazy，该方法暂时不支持SSR。

Context

使用场景：
不通过props，在组件树之间共享全局数据。
其他需要考虑的：

• 只是想避免层层传递props，组件组合（component composition）是更好的方案。
• 组件组合的不足是：将逻辑提升到更高层次来处理，使高层组件变得更复杂。
• 子组件在渲染前和父组件需要交流，可以使用render props。

Context.Provider的value变化时，内部的消费者组件都会重新渲染，不受制于shouldComponentUpdate。

错误边界

捕获并打印发生在其子组件树任何位置的JavaScript错误，并渲染出备用ui。
无法捕获以下错误：

• 事件处理
• 异步代码
• SSR
• 它自身抛出的错误

定义了以下任一方法，可成为错误边界：

• static getDerivedStateFromError()，用于渲染备用UI。
• componentDidCatch()，打印错误信息。

React 16起，任何未被错误边界捕获的错误会使整个组件树卸载。
组件名称在组件栈中的显示依赖于Funcition.name属性。

Ref转发（16.3+）

将ref自动地通过组件传递到子组件的技巧。

Fragment

允许将子列表分组，无需添加额外的节点。短语法:<>。

HOC

参数为组件，返回值为新组件的函数。不是API，是基于React组合特性而形成的设计模式。
注意事项：

• 不要改变被包装组件，使用组合。
• 将不相关的props透传给子组件。
• 包装displayName可以方便调试。
• 不要在render方法内创建并使用HOC。
• 按需复制源组件的静态方法。
• refs不会传递，直接添加到HOC返回的组件中，ref会指向容器组件，而不是包装组件，需要使用上面说的Ref转发。

深入JSX

JSX只是React.createElement的语法糖，所以React必须在作用域内
用户自定义的组件必须以大写字母开头。
当需要运行时选择类型时，不能直接使用表达式，可以先把表达式赋值给一个大写字母开头的变量。
可以使用拓展运算符进行属性展开。
React组件可以返回数组，JavaScript表达式可以被包括在{}中作为子元素。
布尔值、null、undefined不会被渲染，需要渲染时可转为字符串。但有的falsy值仍然会被渲染，如下面如果length是0，也展示。

 {props.messages.length &&  } 

性能优化

如何用brucn、rollup、browserify、webpack等工具构建生产版本。
使用chrome performance、开发者工具分析器分析性能。
虚拟化长列表。
PureComponent和shouldComponentUpdate。
immutable。

不使用ES6

可以使用create-react-class上，但是create-react-class有如下特点

• 需要定义getInitialState初始化state。
• 需要定义getDefaultProps定义默认props。
• 自动绑定this。

待阅读：mixin会有什么横切关注点问题？

协调

即使在最前沿的算法中，将一棵树转换成另一棵树的的复杂度为o(n3)。
React基于如下假设提出了一套o(n)的算法：

• 两个不同类型的元素会产生不同的树。
• 开发者可以通过key prop来暗示哪些子元素在不同的渲染下能保持稳定。

同类元素比较时，key使用下标，在有重新排序时，可能会有问题。

Refs和DOM

Refs允许我们访问DOM节点或在render方法中创建的React元素。
使用Refs的场景：

• 管理焦点、文本选择或媒体播放。
• 触发强制动画。
• 继承第三方DOM库。

ref值根据节点类型不同：

• html元素。ref.current为该DOM元素。
• 自定义class组件。ref.current为组件挂载的实例。
• 函数组件没有ref。因为没有实例。

Render props

具有render props的组件接受一个函数，该函数返回一个React元素，组件调用它而不是实现自己的渲染逻辑。
这是一个模式，而非API，核心在于使用prop而非render，也就是说prop可以是别的名字。
与PureComponent一起使用的时候，每一个render对于render prop将会生成一个新的值，浅比较的时候总是false，并且这种情况下会导致PureComponent的优势就没有了。解决方法是静态定义这个prop。

严格模式

React.StrictMode标签可以对包裹的标签进行严格模式检查：

• 识别不安全的生命周期。
• 使用过时的字符串refs警告。
• 使用废弃的findDOMNode方法的警告。
• 检测意外的副作用。
• 检测过时的context api警告。

延伸学习：Web Component