React 避免重渲染

组件的重新渲染

我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件的状态。当 props 和 state 发生变化时,React 会重新渲染整个组件,组件重新渲染的过程可简化如下图:

译者之前对diff的理解是,对于一个改变 props 的组件,diff能自动计算出组件内部DOM树的不同,然后经过对比,找出真正变化的DOM节点,对变化部分进行渲染。这个是错误的理解,diff算法只是用来计算出改变状态或 props的组件/虚拟节点,而这个组件/虚拟节点,无论多大,它都会重新渲染。
假设有一个渲染完成的组件,如下图:

这里写图片描述

接下来因为状态改变,需要重新渲染下图的绿色的节点,如下图:

这里写图片描述

一般的想法是只需要更新下面的三个绿色节点就能够完成组件的更新

这里写图片描述

然而!只要组件的 props 或 state 发生了变化就会重新渲染整个组件,因此除了上述的三个绿色节点以外,还需要重新渲染所有的黄色的节点

这里写图片描述

除了必要渲染的三个节点外,还渲染了其他不必要渲染的节点,这对性能是一个很大的浪费。如果对于复杂的页面,这将导致页面的整体体验效果非常差。因此要提高组件的性能,就应该想尽一切方法减少不必要的渲染。

shouldComponentUpdate

shouldComponentUpdate这个函数会在组件重新渲染之前调用,函数的返回值确定了组件是否需要重新渲染。函数默认的返回值是 true,意思就是只要组件的 props 或者 state 发生了变化,就会重新构建 virtual DOM,然后使用 diff 算法进行比较,再接着根据比较结果决定是否重新渲染整个组件。函数的返回值为 false 表示不需要重新渲染。
函数默认返回为 true.

PureRenderMixin

React 官方提供了 PureRenderMixin 插件,插件的功能就是在不必要的情况下让函数 shouldComponentUpdate 返回 false, 使用这个插件就能够减少不必要的重新渲染,得到一定程度上的性能提升,其使用方法如下:

    import PureRenderMixin from 'react-addons-pure-render-mixin';
    class FooComponent extends React.Component {
      constructor(props) {
        super(props);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
      }

      render() {
        return <div className={this.props.className}>foo</div>;
      }
    }

我们需要在组件中重写 shouldComponentUpdate,PureRenderMixin源码中对PureRenderMixin.shouldComponentUpdate的定义是这样

    shouldComponentUpdate(nextProps, nextState) {
        return shallowCompare(this, nextProps, nextState);
    }

重写的方法里面根据组件的目前的状态和组件接下来的状态进行浅比较,如果组件的状态发生变化则返回结果为 false,状态没有发生变化则返回结果为 true

    shouldComponentUpdate(nextProps, nextState) {
        return !shallowEqual(this.props, nextProps) ||
                !shallowEqual(this.state, nextState);
    }

在 React 的最新版本里面,提供了 React.PureComponent 的基础类,而不需要使用这个插件。
译者注:所以在一个较大的组件决定重渲染的时候,我们可以在每一个子组件中绑定新的shouldComponentUpdate方法,这样可以减少子组件重新渲染的次数。
我们自己可以重写 shouldComponentUpdate 这个函数,使得其能够对任何事物进行比较,也就是深比较(通过一层一层的递归进行比较),深比较是很耗时的,一般不推荐这么干,因为要保证比较所花的时间少于重新渲染的整个组件所花的时间,同时为了减少比较所花的时间我们应该保证 props 和 state 尽量简单,不要把不必要的属性放入 state,能够由其他属性计算出来的属性也不要放入 state 中。

Immutable.js

对于复杂的数据的比较是非常耗时的,而且可能无法比较,通过使用 Immutable.js 能够很好地解决这个问题,Immutable.js 的基本原则是对于不变的对象返回相同的引用,而对于变化的对象,返回新的引用。因此对于状态的比较只需要使用如下代码即可:

    shouldComponentUpdate() {
        return ref1 !== ref2;
    }

同样需要我们在子组件中将shouldComponentUpdate方法重写。

Pure Component

如果一个组件只和 props 和 state 有关系,给定相同的 props 和 state 就会渲染出相同的结果,那么这个组件就叫做纯组件,换一句话说纯组件只依赖于组件的 props 和 state,下面的代码表示的就是一个纯组件。

     render() {
         return (
             <div style={{width: this.props.width}}>
                      {this.state.rows}
             </div>
         );
    }

如果某个子组件的 props 是固定的不会发生变化,我们叫做无状态组件。在这个组件里面使用 pureRenderMixin 插件,能够保证 shouldComponentUpdate 的返回一直为 false。所以,分清纯组件和无状态组件,在无状态组件中重写shouldComponentUpdate方法是最好的选择。

key

在写动态子组件的时候,如果没有给动态子项添加key prop,则会报一个警告。这个警告指的是,如果每一个子组件是一个数组或者迭代器的话,那么必须有一个唯一的key prop,那么这个key prop是做什么的呢?
我们想象一下,假如需要渲染一个有5000项的成绩排名榜单,而且每隔几秒就会更新一次排名,其中大部分排名只是位置变了,还有少部分是完全更新了,这时候key就发挥作用了,它是用来标识当前的唯一性的props。现在尝试来描述这一场景

   [{
     sid: '10001',
     name: 'sysuzhyupeng'
   }, {
     sid: '10008',
     name: 'zhyupeng'
   }, {
     sid: '120000',
     name: 'yupeng'
   }]

其中sid是学号,那么我们来实现成绩排名的榜单

   import React from 'react';
   function Rank({ list }){
       return (
          <ul>
             {list.map((entry, index)=>(
                 <li key={index}>{entry.name}</li>
             ))}
          </ul>
       )
   }

我们把key设成了序号,这么做的确不会报警告了,但这样是非常低效的做法,这个key是用来做virtual Dom diff的,上面的做法相当于用了一个随机键,那么不论有没有相同的项,更新都会重新渲染。
正确的做法非常简单,只需要把key的内容换成sid就可以了。
那么还有另一个问题,当key相同的时候,React会怎么渲染呢,答案是只渲染第一个相同key的项,且会报一个警告。

### React 中的重渲染机制及性能优化 React重渲染机制是基于其核心概念——虚拟 DOM(Virtual DOM)。当组件的状态(state)或属性(props)发生变化时,React新渲染组件以更新界面。以下是触发 React 重渲染的主要原因以及如何优化性能、防止不必要的重渲染。 #### 触发重渲染的原因 1. **状态(State)变化** 当组件内部调用 `setState()` 方法时,React 会将新的状态合并到当前状态中,并触发组件的新渲染[^1]。`setState()` 是 React 中最常用的触发重渲染的方式之一。 2. **属性(Props)变化** 如果父组件新渲染,且传递给子组件的 props 发生了变化,则子组件也会新渲染[^2]。这是 React 的默认行为,因为子组件依赖于父组件提供的数据。 3. **上下文(Context)变化** 当 React 中的 Context 值发生变化时,所有订阅该 Context 的组件都会新渲染[^1]。这在全局状态管理中尤为常见。 4. **强制更新(Force Update)** 调用 `forceUpdate()` 方法可以强制组件新渲染,即使 state 或 props 没有发生变化[^1]。然而,这种方法通常不推荐使用,因为它可能破坏 React 的声明式编程模型。 5. **父组件新渲染** 父组件新渲染时,其所有的子组件也会新渲染,除非采取措施阻止这种行为[^2]。 --- #### 如何优化性能,防止不必要的重渲染 1. **使用 `shouldComponentUpdate`** 在类组件中,可以通过写 `shouldComponentUpdate` 生命周期方法来控制组件是否需要新渲染。例如: ```javascript shouldComponentUpdate(nextProps, nextState) { return nextProps.value !== this.props.value; } ``` 这种方式可以避免组件在 props 或 state 没有实际变化时新渲染。 2. **使用纯组件(PureComponent)** 纯组件(`React.PureComponent`)会自动对 props 和 state 进行浅比较,如果它们没有变化,则不会新渲染[^5]。例如: ```javascript class Hello extends React.PureComponent { render() { return <div>纯组件</div>; } } ``` 3. **使用 `React.memo`** 对于函数组件,可以使用 `React.memo` 来避免不必要的渲染。它会对 props 进行浅比较,只有当 props 发生变化时才会新渲染[^4]。例如: ```javascript const ChildComponent = React.memo(function({ prop }) { // 子组件逻辑 }); ``` 4. **使用 Immutable 数据结构** 使用不可变数据结构(如 Immutable.js 或 JavaScript 的扩展运算符)可以更高效地检测对象或数组的变化。例如: ```javascript function updateColorMap(colormap) { return { ...colormap, right: 'blue' }; } ``` 5. **优化父组件渲染** 如果父组件频繁渲染,可能会导致所有子组件也频繁渲染。通过优化父组件的渲染逻辑,可以减少子组件的不必要的渲染。 6. **使用 `useMemo` 和 `useCallback`** 在函数组件中,可以使用 `useMemo` 和 `useCallback` 来缓存计算结果或回调函数,从而避免因依赖项变化而引发的不必要的新渲染。例如: ```javascript const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); ``` 7. **避免直接修改状态或属性** 直接修改状态或属性会导致浅比较失效,从而引发不必要的新渲染。始终确保状态和属性的更新是不可变的[^3]。 --- ### 示例代码 以下是一个结合多种优化策略的示例: ```javascript import React, { useMemo, useCallback } from 'react'; const ChildComponent = React.memo(({ onClick, value }) => { return ( <button onClick={onClick}> {value} </button> ); }); const ParentComponent = () => { const [count, setCount] = React.useState(0); const handleClick = useCallback(() => { setCount(count + 1); }, [count]); const memoizedValue = useMemo(() => { return `Current Count: ${count}`; }, [count]); return ( <ChildComponent onClick={handleClick} value={memoizedValue} /> ); }; ``` --- #### 总结 React重渲染机制是其高效更新用户界面的核心,但过多的重渲染可能导致性能问题。通过合理使用 `shouldComponentUpdate`、`React.PureComponent`、`React.memo`、`useMemo` 和 `useCallback` 等工具,可以显著减少不必要的重渲染,从而提升应用性能[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值