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

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

image.png

1. props/state改变
2. render函数重新执行
3. 产生新的VDOM树
4. 新旧DOM树进行diff
5. 计算出差异进行更新
6. 更新到真实的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优化##

1. 在尾部添加数据

• 有无key意义并不大。

2. 在前面插入数据

• 这种情况，在没有key的情况下，所有li都需要进行修改。
• 当子元素拥有key时，React使用key来匹配原有树上的子元素以及最新树上的子元素：这种情况下：原有的元素只是发生了位移。

  render() {
    return (
      

        
电影列表
        

          {
            this.state.movies.map((item,index) => {
              return 
{item}
            })
          }
        
         this.insertMovie()}>添加电影
      
    )
  }

3. key的注意事项：

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

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

import React, { Component } from 'react'


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

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

function ProductList() {
  console.log("ProductList被调用");
  return (
    

      
商品列表1
      
商品列表2
      
商品列表3
      
商品列表4
      
商品列表5
    
  )
}
// Main
class Main extends Component {
  render() {
    console.log('Main render函数被调用');
    return (
      

        
        
      
    )
  }
}
// Footer
function Footer() {
  console.log("Footer被调用");

  return 
我是Footer组件
}


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    }
  }
  render() {
    console.log('App render函数被调用');
    return (
      

        
当前计数:{this.state.counter}
        this.increment()}>+1
        

        

        

      
    )
  }
  increment(){
    this.setState({
      counter: this.state.counter + 1
    })
  }
}

• 调用一个无关的函数，界面改变时，按理来说不应该让别的没有改变的东西重新render。
• 这个例子中我们在前面插入了一个

  和标签，现在点击按钮时全局都会重新渲染。

• 现在对其进行优化

六. 组件嵌套的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 
我是Header组件
})

image.png

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

理论上：建议所有类组件都用PureComponent，所有函数组件都包裹memo