16.React学习笔记.React更新机制

一. 发生更新的时机以及顺序##

image.png

props/state改变
render函数重新执行
产生新的VDOM树
新旧DOM树进行diff
计算出差异进行更新
更新到真实的DOM

二. React更新流程##

React将最好的O(n^3)的tree比较算法优化为O(n)。

同层节点之间相互比较，不跨节点。
不同类型的节点，产生不同的树结构：如果该节点不同，会将旧tree中该节点的子树全部删掉。直接生成新的子树，挂载到DOM中。
开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定。

三. 不同情况##

情况一：对比不同类型的元素

当节点为不同的元素，React会拆卸原有的树，并且建立起新的树。

当一个元素改变，会触发一个完整的重建流程。
当卸载一棵树时，对应的DOM节点也会被销毁，组件实例将执行componentWillUnmount()方法。
当建立一棵新树时，对应得DOM节点会被创建以及插入到DOM中，组件实例将执行componentWillMount()方法，紧接着componentDidMount()方法。

子树销毁，元素不会复用。####

情况二：对比同一类型的元素

当对比两个相同类型的React元素时，React会保留DOM节点，仅比对及更新有改变的属性，比如下面例子：

image.png

React知道只需要修改DOM元素上的className属性。

image.png

-当 更新style属性 时，React仅更新有所改变的属性，没有变化的属性不会变。

如果是同类型的组件元素：组件会保持不变，React会更新该组件的props，并且调用componentWillReceiveProps()和componentWillUpdate()方法；
下一步，调用render()方法，diff算法将在之前的结果以及新的结果中进行递归。

情况三：对子节点进行递归

image.png

默认条件下，当递归DOM节点的子元素时，React会同时遍历两个子元素的列表；当产生差异时，生成一个mutation。
如上图，前两个比较相同，不会有mutation。
最后一个比较，产生一个mutation，将其插入到新的DOM树中即可。
当然这是理想情况

image.png

如果我们在中间插入一条数据：

React会对每一个子元素产生一个mutation，而不是保持其不变。
这种方式会有一定的性能问题。

所以这时需要key来优化###

四. key优化##

在尾部添加数据

有无key意义并不大。

在前面插入数据

这种情况，在没有key的情况下，所有li都需要进行修改。

当子元素拥有key时，React使用key来匹配原有树上的子元素以及最新树上的子元素：这种情况下：原有的元素只是发生了位移。

render() {
  return (
    <div>
      <h2>电影列表</h2>
      <ul>
        {
          this.state.movies.map((item,index) => {
            return <li key={item}>{item}</li>
          })
        }
      </ul>
      <button onClick={e => this.insertMovie()}>添加电影</button>
    </div>
  )
}

key的注意事项：

key应该是唯一的。
key不要使用随机数（随机数在下一次render时，会重新生成一个数字）。
使用index作为key，对性能是没有优化的，id比较合适。

五. 组件嵌套的render调用##

import React, { Component } from 'react'


// Header
function Header() {
  console.log("Header被调用");
  return <h2>我是Header组件</h2>
}

// Banner
class Banner extends Component {
  render() {
    console.log('Banner的render函数被调用');
    return <h3>我是bannner组件</h3>
  }
}

function ProductList() {
  console.log("ProductList被调用");
  return (
    <ul>
      <li>商品列表1</li>
      <li>商品列表2</li>
      <li>商品列表3</li>
      <li>商品列表4</li>
      <li>商品列表5</li>
    </ul>
  )
}
// Main
class Main extends Component {
  render() {
    console.log('Main render函数被调用');
    return (
      <div>
        <Banner />
        <ProductList />
      </div >
    )
  }
}
// Footer
function Footer() {
  console.log("Footer被调用");

  return <h2>我是Footer组件</h2>
}


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    }
  }
  render() {
    console.log('App render函数被调用');
    return (
      <div>
        <h2>当前计数:{this.state.counter}</h2>
        <button onClick={e=>this.increment()}>+1</button>
        <Header />
        <Main />
        <Footer />
      </div>
    )
  }
  increment(){
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

调用一个无关的函数，界面改变时，按理来说不应该让别的没有改变的东西重新render。
这个例子中我们在前面插入了一个<h2>和<button>标签，现在点击按钮时全局都会重新渲染。
现在对其进行优化

六. 组件嵌套的render调用的优化##

调用完setState后，不想render时阻断其渲染。
使用shouldComponentUpdate() {}这个生命函数，默认情况下其返回true，也就是重新渲染；手动设置为false后，将不会重新渲染，但不影响初始化的渲染。

我们的目的是：想要阻断时阻断（事件发生后与界面没有依赖），不想阻断时渲染，如下代码。

shouldComponentUpdate(nextProps, nextState){
  if(this.state.counter !== nextState.counter){
    return true;
  }
  return false;
}

以上为简单情况，当组件变多后，情况将很复杂，函数/类组件都需要考虑到###

每个类都设置该生命周期函数太麻烦。
我们通过继承PureComponent而不是Component来进行简化，其会对state和props进行比较来决定是否重新render。
shouldComponentUpdate在源码中进行更新时，决定是否需要render。
回溯到源码ReactFiberClassComponent中时，有如下方法：

function checkShouldComponentUpdate(
workInProgress,
ctor,
oldProps,
newProps,
oldState,
newState,
nextContext,
) {
const instance = workInProgress.stateNode;
// 判断有无该生命周期函数
if (typeof instance.shouldComponentUpdate === 'function') {
startPhaseTimer(workInProgress, 'shouldComponentUpdate');
// -----------------
// 核心代码
const shouldUpdate = instance.shouldComponentUpdate(
newProps,
newState,
nextContext,
);
stopPhaseTimer();
return shouldUpdate;
}
// -----------------
if (ctor.prototype && ctor.prototype.isPureReactComponent) {
return (
!shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
);
}
```
return true;
```
}
该方法最终返回true/false。
这个对应React中PureComponent的特点

image.png
其中isPureReactComponent属性对应上面放出来源代码中对原型中isPureReactComponent属性的判断。
如果有isPureReactComponent属性，则对oldProps，oldState和newProps，newState进行一个浅层比较。
通过浅层比较来判断是否发生了改变。

追溯到shallowEqual方法源码中

import is from './objectIs';

const hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * Performs equality by iterating through keys on an object and returning false
 * when any key has values which are not strictly equal between the arguments.
 * Returns true when the values of all keys are strictly equal.
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }

  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

export default shallowEqual;

先判断两个对象，相同则true，返回后取反，表示不需要更新。
接着分别判断两个对象，不是对象或者为null时返回false，强制刷新
然后将两个对象中的keys取出来，若长度不想等则返回false，若相等，则对其中属性进行比较，不相等则返回false进行刷新。

这就回到我们案例中，只有App，Header，Footer的render被调用。

PureComponent对props和state进行shallowEqual 。
Main，Banner，ProductList没有依赖任何props/state，所以没有重新渲染。
开发中只需要shallowEqual ，深层比较非常浪费性能。
PureComponent可以解决类组件的render调用，但解决不了函数式组件

七. memo的使用，优化函数式组件##

memo为高阶组件。

const MemoHeader = memo(function Header() {
  console.log("Header被调用");
  return <h2>我是Header组件</h2>
})

image.png

我们将原来的函数组件传入memo函数中，生成一个新的组件类型。
将Footer也进行转换，这样只有App重新渲染了，
但我们没有更改ProductList，其也没有重新渲染，原因是在Main中，重新渲染已经被阻止了。
为了以防万一，也可以用memo优化。

喜欢的朋友记得点赞、收藏、关注哦！！！