React 全家桶之 react 性能优化

最新推荐文章于 2024-11-13 11:47:39 发布

原创最新推荐文章于 2024-11-13 11:47:39 发布

· 133 阅读

0 ·

版权

react 整个生命周期大概分为三个阶段：挂载阶段、更新阶段、销毁阶段，我们在谈 react 优化的时候主要还是针对更新阶段。

render

我们先来回顾一下 render 函数做了什么事情

构建 Virtual DOM 树
diff 出差异化节点
根据 Virtual DOM 树解析出 html 结构
将 html 结构挂载到真是 DOM 树上

shouldComponentUpdate

该函数位于更新阶段，在 render 之前。表示本次更新是否影响到当前组件，默认为 true，会执行后续的 render 函数，即使最后经过 diff 发现没有需要更新的地方。

所以我们可以在组件的 shouldComponentUpdate 钩子里，自己来判断要不要更新，如果不需要就 return false，这样就少了构建 Virtual Dom、diff 这些阶段了，对性能提升有一定的帮助。如

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 99
        };
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextState.count === this.state.count) {
            return false; // 不参与 render 和 diff 过程
        }
        return true;
    }
    render () {
        return (
        <div id="container">{ this.state.count }</div>
        )
    }
}

PureComponent

上面的例子中，我们在 shouldComponentUpdate 中手动判断了当前组件是否需要更新的逻辑。有了 PureComponent，想这种简单的组件我们就不需要自己判断了，直接让组件继承 React.PureComponent 就行了，应该 PureComponent 内部已经帮我们执行了 shouldComponentUpdate，如果发现 props 和 state 都没有变化，那么 return false，不参与更新。

但是注意：PureComponent 中的判断是一种浅比较，也就是说如果你的 data 中的属性全部只有一层（属性值是基本类型），那么没问题。但是如果属性值里面是一个 Object 或者是一个 Array，那么属性值内部的变化，PureComponent 就无法感知了。所以组件的属性值比较复杂的话，建议不要用 PureComponent。

属性传递

在组件上绑定函数一般有以下几种方式

constructor 中绑定 this：this.handleClick = this.handleClick.bind(this)；使用 <button onClick={this.handleClick}></button>
使用时绑定：<button onClick={this.handleClick.bind(this)}
箭头函数：<button onClick={() => {this.handleClick()}}
组件本身方法使用箭头函数：handleClick = () => {}；使用 <button onClick={this.handleClick}></button>

推荐 1 和 4，2 和 3 在组件每次执行 render 时都会生成一个新的函数，在 diff 阶段会经过浅比较判断出属性需要更新