React 基础面试题, 为什么 React 中的 props 被认为是只读的?
React 基础面试题, 为什么 React 中的 props 被认为是只读的?
QA
Step 1
Q:: 为什么 React 中的 props 被认为是只读的？
A:: 在 React 中，props 是用来向组件传递数据的，并且这些数据是由父组件传递给子组件的。React 的设计理念是单向数据流，这意味着数据从父组件流向子组件。为了保证组件的纯净和可预测性，React 要求子组件不能直接修改 props，因为这可能会导致父组件和子组件之间的数据不同步，进而引发难以调试的问题。因此，props 被设计为只读的，子组件如果需要修改这些数据，应该通过父组件传递一个回调函数来实现数据的更新。
Step 2
Q:: React 中 state 和 props 的区别是什么？
A:: state 和 props 都是 React 中用于管理组件数据的工具，但它们有着不同的作用和使用方式。props 是由父组件传递给子组件的数据，是只读的，子组件不能修改 props。state 是组件内部的状态数据，组件可以通过调用 setState 方法来更新自己的 state，从而触发组件的重新渲染。通常情况下，props 用于从父组件向子组件传递数据，而 state 用于管理组件内部的动态数据。
Step 3
Q:: 在 React 中如何避免不必要的组件重新渲染？
A:: 在 React 中，可以通过以下几种方法避免不必要的组件重新渲染：1）使用 shouldComponentUpdate 或者 PureComponent：在类组件中，可以通过实现 shouldComponentUpdate 方法或使用 PureComponent 来控制组件是否应该重新渲染；2）React.memo：对于函数组件，可以使用 React.memo 包装组件，使其只在 props 发生变化时才重新渲染；3）优化状态管理：尽量减少组件 state 的变化范围，避免无关的状态变化触发重新渲染。
Step 4
Q:: 如何在 React 中实现组件的状态提升（Lifting State Up）？
A:: 在 React 中，组件的状态提升是指将多个子组件共享的状态提升到它们的最近公共父组件中进行管理。通过状态提升，可以避免多个子组件各自管理同一个状态，进而导致状态不一致的问题。实现状态提升的步骤包括：1）确定需要共享状态的子组件；2）将状态提升到它们的最近公共父组件中；3）通过 props 将状态和状态更新函数传递给子组件。
Step 5
Q:: React 中的单向数据流是什么？为什么重要？
A:: React 中的单向数据流指的是数据只能从父组件向子组件传递，而不能反向传递。单向数据流确保了应用的数据流动是可预测的，并且使得调试和追踪数据变更更加容易。在实际应用中，单向数据流有助于避免复杂的状态管理问题，确保应用行为的一致性。