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比较这个过程还是会损耗性能