React面试题：哪些方法会触发React重新渲染？重新渲染render会做什么？

哪些方法会触发重新渲染回答思路：state改变–>父组件重渲染

state改变：

setState（）方法被调用

执行setState（）来改变状态时会触发render，但是不是执行setState（）一定会触发render，当setState（）传入null时，并不会触发render
例如：

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有没有发生变化，子组件都会重新渲染，从而触发render

重新渲染会做什么回答思路：简单讲一下diff算法

1.对比新旧虚拟节点（VNode）、虚拟DOM
2.对新旧DOM树进行深度优先遍历，每遍历旧DOM树到一个节点的时候都会和新DOM树进行比较，把有差异的节点放到一个对象里面
3.遍历差异对象，根据差异的类型，根据对应规则更行VNode

扩展：

在没有虚拟DOM之前都是用innerHTML来重渲染页面，其实使用虚拟DOM并不比innerHTML直接插入快，所以进行Diff比较这个过程还是会损耗性能