面试题：深入剖析React Props与State在渲染机制中的底层原理

Question

从React的渲染机制角度出发，详细说明Props变化和State变化是如何触发组件重新渲染的，以及在这个过程中React内部做了哪些工作，例如虚拟DOM的更新流程与Props、State变化的关系。

Answer 1

Props变化触发组件重新渲染

1. 父组件传递新Props：当父组件重新渲染时，它可能会给子组件传递不同的Props。React会将新Props与旧Props进行浅比较。如果比较结果发现Props发生了变化，那么子组件就会触发重新渲染。
2. React内部工作：
   • 构建新的虚拟DOM：根据新的Props，React会为该子组件构建一个新的虚拟DOM树节点。这涉及到根据新Props重新调用组件函数（对于函数组件）或执行render方法（对于类组件）来生成新的虚拟DOM。
   • 对比虚拟DOM：React使用Diff算法将新生成的虚拟DOM与之前的虚拟DOM进行比较，找出差异。
   • 更新真实DOM：根据Diff算法找到的差异，React会将这些变化应用到真实DOM上，从而更新页面。

State变化触发组件重新渲染

1. 调用setState（类组件）或useState（函数组件）：在类组件中调用setState方法，或者在函数组件中调用useState返回的setState函数，会导致组件的State发生变化。
2. React内部工作：
   • 构建新的虚拟DOM：一旦State变化，React会重新调用组件函数（函数组件）或render方法（类组件），基于新的State生成新的虚拟DOM树节点。
   • 对比虚拟DOM：同样使用Diff算法将新的虚拟DOM与旧的虚拟DOM进行比较，确定需要更新的部分。
   • 更新真实DOM：最后React将差异应用到真实DOM，完成页面的更新。

虚拟DOM更新流程与Props、State变化的关系

1. Props和State是虚拟DOM生成的依据：Props和State的变化是触发重新渲染的源头，新的Props和State会作为输入，生成新的虚拟DOM。
2. Diff算法基于虚拟DOM比较：无论Props还是State变化，React都是通过对比前后两个虚拟DOM树，利用Diff算法高效地找出变化的部分，而不是重新渲染整个页面。这样可以最大限度地减少真实DOM操作，提高渲染性能。