无障碍
其实是通过标准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,也展示。
<div> {props.messages.length && <MessageList messages={props.messages} /> } </div>
性能优化
如何用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