减少组件的渲染次数,能提升 React App 的运行时性能。通过写法的优化,可以减少不必要的组件渲染次数。
组件 Render 会导致的其子组件 Render,即使子组件的 state, props 没变。
子组件用 PureComponent 和 React.memo 可以避免这种情况下的 Render。类组件用 PureComponent,函数组件用React.memo。示例:
函数组件中的函数,每运行一次,都会生成一个新的函数。如果这个函数是某个子组件的属性,函数 Render 一次,都会导致子组件的 Render。
用 useCallback 包裹函数,可以避免这种情况下不必要的 Render。
如果子组件的属性值是个箭头函数,父组件每次 Render,箭头函数都是新的,会导致子组件的 Render。
属性值用实例方法,就能避免这种情况。例如:
Render Props 也出现这样的问题。如:
解决方案也是将其改成实例方法:
Prop drilling 指将外层组件的 state
通过 props
一层层传下去,传递到层级很深的子组件的过程。外层组件的 state
发生变化,中间组件都会 Render。
层级很深的子组件可以直接取到值,不需要中间属性的传递,就能避免中间属性的 Render。用 Context API 或 Redux,MobX 等状态管理工具可以让子组件直接取到值。用 Context API 的示例: