减少组件的渲染次数，能提升 React App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。
优化写法
1. 组件 Render 时，避免 state， props 没变的子组件 Render
组件 Render 会导致的其子组件 Render，即使子组件的 state， props 没变。
子组件用 PureComponent 和 React.memo 可以避免这种情况下的 Render。类组件用 PureComponent，函数组件用React.memo。示例:
// 类组件
class class ClassComp extends React.PureComponent{}
// 函数组件
function FnComp () {}
React.memo(FnComp)
2. 函数组件 Render 时，避免变化的函数属性值，导致子组件 Render
函数组件中的函数，每运行一次，都会生成一个新的函数。如果这个函数是某个子组件的属性，函数 Render 一次，都会导致子组件的 Render。
用 useCallback 包裹函数，可以避免这种情况下不必要的 Render。
const handleClick = useCallback(() => ..., [])
return (
<ChildComp onClick={handleClick}>
)
3. 组件 Render 时，属性值避免用箭头函数值，导致子组件 Render
如果子组件的属性值是个箭头函数，父组件每次 Render，箭头函数都是新的，会导致子组件的 Render。
属性值用实例方法，就能避免这种情况。例如:
handleClick = () => {...},
render() {
return (
<ChildComp onClick={handleClick}>
)
}
Render Props 也出现这样的问题。如:
<Mouse>
{mouse => (
<ChildComp pos={mouse}>
)}
</Mouse>
解决方案也是将其改成实例方法：
<Mouse>
{this.renderChild}
</Mouse>
4. 避免 Prop Drilling 导致的中间组件的 Render
Prop drilling 指将外层组件的 state 通过 props 一层层传下去，传递到层级很深的子组件的过程。外层组件的 state 发生变化，中间组件都会 Render。
层级很深的子组件可以直接取到值，不需要中间属性的传递，就能避免中间属性的 Render。用 Context API 或 Redux，MobX 等状态管理工具可以让子组件直接取到值。用 Context API 的示例:
// 父组件提供数据
<ThemeContext.Provider value={{ theme: this.state.theme }}>
<Comp1>
<Comp2>
<Comp3>
<ThemeContext.Consumer>
{({theme}) => {
// 子组件拿值
}}
</ThemeContext.Consumer>
</Comp3>
</Comp2>
</Comp1>
</ThemeContext.Provider>
