React 基础面试题, React 的 render 函数在什么情况下会被触发?
React 基础面试题, React 的 render 函数在什么情况下会被触发?
QA
Step 1
Q:: React 的 render 函数在什么情况下会被触发？
A:: React 的 render 函数会在以下几种情况下被触发：1. 当组件的 state 或 props 发生变化时，React 会调用 render 函数以重新渲染组件。2. 父组件重新渲染时，即使子组件的 props 没有变化，子组件的 render 函数也可能会被调用。3. 组件挂载时，render 函数也会被调用。4. 如果 shouldComponentUpdate 返回 true（或默认返回值），组件也会在更新时调用 render 函数。
Step 2
Q:: React 中如何避免不必要的 render？
A:: 避免不必要的 render 通常可以通过以下几种方式：1. 使用 shouldComponentUpdate 生命周期方法或 React.PureComponent 类，以阻止组件在不需要更新时重新渲染。2. 在函数组件中，可以使用 React.memo 高阶组件对函数组件进行优化。3. 通过精细化的 props 传递，避免将不必要的数据传递给子组件，减少其 render 次数。
Step 3
Q:: React 的虚拟 DOM 是什么，它如何工作？
A:: 虚拟 DOM 是 React 中的一种轻量级的表示法，它是一个以 JavaScript 对象的形式存在的 DOM 树的抽象表示。每当组件的状态或属性发生变化时，React 会生成新的虚拟 DOM，然后通过 Diff 算法将新的虚拟 DOM 与旧的虚拟 DOM 进行对比，找出最小的变更集，再将这些变更应用到真实的 DOM 上，从而提高性能。
Step 4
Q:: 什么是 React 中的 keys，它们的作用是什么？
A:: keys 是用于 React 中唯一标识列表中每个元素的特殊字符串属性。它们帮助 React 识别哪些项目发生了变化、添加或移除，从而高效地更新用户界面。没有合适的 keys 会导致 React 在列表中处理元素时，可能会做出不必要的更新操作，影响性能。