前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第 006 期 React 运行时性能优化之减少渲染组件的次数

第 006 期 React 运行时性能优化之减少渲染组件的次数

作者头像
前端GoGoGo
发布2021-04-09 15:40:55
1.8K0
发布2021-04-09 15:40:55
举报
文章被收录于专栏:九彩拼盘的叨叨叨

减少组件的渲染次数,能提升 React App 的运行时性能。通过写法的优化,可以减少不必要的组件渲染次数。

优化写法

1. 组件 Render 时,避免 state, props 没变的子组件 Render

组件 Render 会导致的其子组件 Render,即使子组件的 state, props 没变。

子组件用 PureComponent 和 React.memo 可以避免这种情况下的 Render。类组件用 PureComponent,函数组件用React.memo。示例:

代码语言:javascript
复制
// 类组件
class class ClassComp extends React.PureComponent{}

// 函数组件
function FnComp () {}
React.memo(FnComp)

2. 函数组件 Render 时,避免变化的函数属性值,导致子组件 Render

函数组件中的函数,每运行一次,都会生成一个新的函数。如果这个函数是某个子组件的属性,函数 Render 一次,都会导致子组件的 Render。

用 useCallback 包裹函数,可以避免这种情况下不必要的 Render。

代码语言:javascript
复制
const handleClick = useCallback(() => ..., [])
return (
  <ChildComp onClick={handleClick}>
)

3. 组件 Render 时,属性值避免用箭头函数值,导致子组件 Render

如果子组件的属性值是个箭头函数,父组件每次 Render,箭头函数都是新的,会导致子组件的 Render。

属性值用实例方法,就能避免这种情况。例如:

代码语言:javascript
复制
handleClick = () => {...},
render() {
  return (
    <ChildComp onClick={handleClick}>
  )
}

Render Props 也出现这样的问题。如:

代码语言:javascript
复制
<Mouse>
  {mouse => (
    <ChildComp pos={mouse}>
  )}
</Mouse>

解决方案也是将其改成实例方法:

代码语言:javascript
复制
<Mouse>
  {this.renderChild}
</Mouse>

4. 避免 Prop Drilling 导致的中间组件的 Render

Prop drilling 指将外层组件的 state 通过 props 一层层传下去,传递到层级很深的子组件的过程。外层组件的 state 发生变化,中间组件都会 Render。

层级很深的子组件可以直接取到值,不需要中间属性的传递,就能避免中间属性的 Render。用 Context API 或 Redux,MobX 等状态管理工具可以让子组件直接取到值。用 Context API 的示例:

代码语言:javascript
复制
// 父组件提供数据
<ThemeContext.Provider value={{ theme: this.state.theme }}>
  <Comp1>
    <Comp2>
      <Comp3>
        <ThemeContext.Consumer>
          {({theme}) => {
            // 子组件拿值
          }}
        </ThemeContext.Consumer>
      </Comp3>
    </Comp2>
  </Comp1>
</ThemeContext.Provider>

参考文档

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 优化写法
    • 1. 组件 Render 时,避免 state, props 没变的子组件 Render
      • 2. 函数组件 Render 时,避免变化的函数属性值,导致子组件 Render
        • 3. 组件 Render 时,属性值避免用箭头函数值,导致子组件 Render
          • 4. 避免 Prop Drilling 导致的中间组件的 Render
          • 参考文档
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档