时间: 2019-11-29阅读: 121标签: 性能性能和渲染（Render）正相关

刚开始写react可能只是写出来完成业务就完了，后期审查代码发现可能很多地方其实都可以优化，之前可能有些地方似是而非，在此小结一下。

React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新。大多数情况下，React 对 DOM 的渲染效率足以我们的业务日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其很重要的一个方向，就是避免不必要的渲染（Render）。

一些概念

渲染（Render）时影响性能的点

Virtual DOM

react引入了一个叫做虚拟DOM的概念，安插在JavaScript逻辑和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。

在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因,React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

React 的处理 render 的基本思维模式是每次一有变动就会去重新渲染整个应用。在 Virtual DOM 没有出现之前，最简单的方法就是直接调用 innerHTML。Virtual DOM 厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚拟 DOM 树与老的进行比较，从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各种比对还是相当耗性能的，特别是在顶层 setState 一个微小的修改，默认会去遍历整棵树。尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能。

render

react的组件渲染分为初始化渲染和更新渲染。

初始化渲染
- 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染
更新渲染
- 当我们要更新某个子组件的时候,我们期待的是只变化需要变化的组件，其他组件保持不变。
- 但是，react的默认做法是调用所有组件的render，再对生成的虚拟DOM进行对比，如不变则不进行更新。这样的render和虚拟DOM的对比明显是在浪费

渲染（Render）何时会被触发组件挂载

Chrome Performance

在开发模式下，在支持的浏览器内使用性能工具可以直观的了解组件何时挂载，更新和卸载

打开Chrome开发工具Performance 标签页点击Record
执行你想要分析的动作。不要记录超过20s，不然Chrome可能会挂起。
停止记录。
React事件将会被归类在 User Timing标签下。

React 组件构建并将 DOM 元素插入页面的过程称为挂载。当组件首次渲染的时候会调用 render，这个过程不可避免。

优化

setState() 方法被调用

bind函数

10bet，绑定this的方式：一般有下面几种方式

constructor中绑定

constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this); //构造函数中绑定
}
//然后可以
<p onClick={this.handleClick}>

使用时绑定

<p onClick={this.handleClick.bind(this)}>

箭头函数

<p onClick={() => { this.handleClick() }}>

哪个好呢
- 答案是第一种方式。
- 因为第一种，构造函数每一次渲染的时候只会执行一遍；
- 而第二种方法，在每次render()的时候都会重新执行一遍函数；
- 第三种方法的话，每一次render()的时候，都会生成一个新的箭头函数
  
  shouldComponentUpdate
  
  shouldComponentUpdate是决定react组件什么时候能够不重新渲染的函数，返回true时更新，false时不更新。默认返回true,即每次重新渲染,因此我们可以重写个函数从而达到"个性化定制更新"的效果。
栗子

class Title extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    console.log('title render')
    return (
      <div>{this.props.title}</div>
    )
  }
}

class PureCom extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: 'pure',
      num: 0
    }
    this.add = this.add.bind(this);
  }
  add() {
    let { num } = this.state;
    num++;
    this.setState({ num })
  }
  render() {
    console.log('pure render')
    return (
      <div>
        <Title title={this.state.title} />
        <p>{this.state.num}</p>
        <button onClick={this.add}>add</button>
      </div>
    )
  }
}

现在每次点击add按钮，父组件state的num都会+1，而title是一直不变的，通过console我们却发现，Title组件也在一直render,这就是因为shouldComponentUpdate默认返回true的，也就是父组件更新之后，子组件也会更新。
然后子组件是没必要更新的，所以我们重写下shouldComponentUpdate方法

class Title extends React.Component {
  constructor(props) {
    super(props)
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.title != this.props.title) {
      return true     //只有title变化时才更新
    } else {
      return false
    }
  }
  render() {
    console.log('title render')
    return (
      <div>{this.props.title}</div>
    )
  }
}

现在就对了，点击父组件的add按钮并没有触发Title组件的更新。

PureComponent

类似上面的情况其实我们经常遇到，因此react提供了PureComponent来解决类似的问题，可以让我们少写许多的shouldComponentUpdate。

class Title extends React.PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    console.log('title render')
    return (
      <div>{this.props.title}</div>
    )
  }
}

用了PureComponent之后作用和之前是相同的。
原理：当组件更新时，如果组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较：

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}

setState 是 React 中最常用的命令，通常情况下，执行 setState 会触发 render。但是这里有个点值得关注，执行 setState 的时候一定会重新渲染吗？答案是不一定。当setState传入null的时候，并不会触发 render ，可以运行下面的 Demo 来佐证：

突变的数据

大多数情况PureComponent都可以解决，但是之前也说过，他是“浅比较”，如果遇到数据结构比较复杂，他是无法识别的。

class PureCom extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      items: [1, 2, 3],
      title: 'pure',
    }
    this.add = this.add.bind(this);
  }
  add() {
    let { items } = this.state;
    items.push(23);
    this.setState({ items })
  }
  render() {
    console.log('pure render')
    return (
      <div>
        <Title title={this.state.title} />
        <ul>
          {this.state.items.map((e, i) => {
            return <li key={i}>{e}</li>
          })}
        </ul>
        <button onClick={this.add}>add</button>
      </div>
    )
  }
}

点击add，你会发现没有任何反应，为什么呢?因为你setState的items其实是和state里面的items指向相同引用。原理和下面一样。

let a={val:1};
let b=a;
b.val=2;
console.log(a)//{val:2}
console.log(b)//{val:2}

解决办法
- 1.深拷贝
```
add() {
let items =JSON.parse(JSON.stringify(this.state.items));//黑科技
//或者let items=deepCopy(this.state.items);
items.push(23);
this.setState({ items })
}
```
- 2.数组使用concat,对象使用Object.assign()
```
add() {
let { items } = this.state;
items=items.concat(23)  //此时的items是一个新数组
this.setState({ items })
}
```
- 3.使用不可变数据Immutable.js
```
add() {
let { items } = this.state;
items = update(items, { $push: [23] });
this.setState({ items })
}
```
- 其中深拷贝如果数据比较复杂消耗会比较大
- concat,Object.assign用起来很快捷
- 如果你数据比较复杂，可能Immutable会是最好的选择。官方推荐：：seamless-immutable 和immutability-helper。
  
  redux
  
  个人感觉redux的渲染机制也是和PureComponent类似的，都是浅比较，因此上面的3种解决办法也适用于redux.
  
  16.3+ new API
  
  一些生命周期会被删除，将在17.0：删除componentWillMount，componentWillReceiveProps和componentWillUpdate。
一些变化
- componentWillMount => componentDidMount
- componentWillReceiveProps => getDerivedStateFromProps
- componentWillUpdate => getSnapshotBeforeUpdate
static getDerivedStateFromProps

//代替componentWillReceiveProps，因为是静态方法，不能访问到 this，避免了一些可能有副作用的逻辑，比如访问 DOM 等等
//会在第一次挂载和重绘的时候都会调用到，因此你基本不用在constructor里根据传入的props来setState
static getDerivedStateFromProps(nextProps, prevState) {
  console.log(nextProps, prevState)
  if (prevState.music !== nextProps.music) {
    return {
      music: nextProps.music,
      music_file: music_file,
      index:prevState.index+1
    };
   //document.getElementById('PLAYER').load();                   //这里不对，应该放在getSnapshotBeforeUpdate 和 componentDidUpdate
  }
  return null;
}


getSnapshotBeforeUpdate(prevProps, prevState) {
    if (this.state.music != prevState.music) {                   //进行aduio的重载
        return true
    }
    return null;
}

componentDidUpdate(prevProps, prevState, snapshot) {       
    if (snapshot !== null) {
        document.getElementById('PLAYER').load();             //重载
    }
}

getSnapshotBeforeUpdate

//新的getSnapshotBeforeUpdate生命周期在更新之前被调用（例如，在DOM被更新之前）。此生命周期的返回值将作为第三个参数传递给componentDidUpdate。 （这个生命周期不是经常需要的，但可以用于在恢复期间手动保存滚动位置的情况。）

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {              //snapshot
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

使用componentDidMount 代替 componentWillMount

//有一个常见的错误观念认为，在componentWillMount中提取可以避免第一个空的渲染。在实践中，这从来都不是真的，因为React总是在componentWillMount之后立即执行渲染。如果数据在componentWillMount触发的时间内不可用，则无论你在哪里提取数据，第一个渲染仍将显示加载状态。
// After
class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentDidMount() {
    this._asyncRequest = asyncLoadData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({ externalData });
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

class App extends React.Component { state = { a: 1 }; render() { console.log("render"); return ( React.Fragement p{this.state.a}/p button onClick={() = { this.setState({ a: 1 }); // 这里并没有改变 a 的值 }}  Click me /button button onClick={() = this.setState(null)}setState null/button Child / /React.Fragement ); }}

其他

props尽量只传需要的数据，避免多余的更新
组件尽量解耦，比如一个input+list组建，可以将list分成一个PureComponent，只在list数据变化是更新
如果组件有复用，key值非常重要。因此key的优化，如果有唯一id，尽量不使用循环得到的index
暂时这些

父组件重新渲染

最后

大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：www.yangyuetao.cn
小程序：TaoLand

只要父组件重新渲染了，即使传入子组件的props未发生变化，那么子组件也会重新渲染，进而触发render。

我们对上面的 demo 进行稍微的修改，可以看出当点击按钮的时候，Child组件的props并没有发生变化，但是也触发了render方法：

const Child = () = { console.log("child render"); return divchild/div;};class App extends React.Component { state = { a: 1 }; render() { console.log("render"); return ( React.Fragement p{this.state.a}/p button onClick={() = { this.setState({ a: 1 }); }}  Click me /button button onClick={() = this.setState(null)}setState null/button Child / /React.Fragement ); }}

优化 Render 我们能做什么？

上文描述的 React 组件渲染机制其实是一种较好的做法，很好地避免了在每一次状态更新之后，需要去手动执行重新渲染的相关操作。鱼和熊掌不可兼得，带来方便的同时也会存在一些问题，当子组件过多或者组件的层级嵌套过深时，因为反反复复重新渲染状态没有改变的组件，可能会增加渲染时间又会影响用户体验，此时就需要对 React 的 render 进行优化。

上面说了不必要的 render 会带来性能问题，因此我们的主要优化思路就是减少不必要的 render。

shouldComponentUpdate 和 PureComponent

在 React 类组件中，可以利用shouldComponentUpdate或者PureComponent来减少因父组件更新而触发子组件的 render，从而达到目的。shouldComponentUpdate 来决定是否组件是否重新渲染，如果不希望组件重新渲染，返回 false 即可。

在 React 中 PureComponet 的源码为

if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);}

看函数名就能够理解，PureComponet 通过对 props 和 state的浅比较结果来实现 shouldComponentUpdate，当对象包含复杂的数据结构时，可能就不灵了，对象深层的数据已改变却没有触发 render。

本文由10bet发布于Web前端,转载请注明出处：react性能优化

关键词：

10bet > Web前端 >

react性能优化

一些概念

Virtual DOM

render

Chrome Performance

优化

bind函数

shouldComponentUpdate

PureComponent

突变的数据

redux

16.3+ new API

其他

最后

频道精选

最火资讯