面试 React 框架八股文十问十答第七期

面试 React 框架八股文十问十答第七期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）React 废弃了哪些生命周期？为什么？

在React 16.3版本后，React废弃了一些生命周期方法，这是为了简化API、提高可维护性以及引入更好的异步渲染机制。以下是被废弃的生命周期方法：

• componentWillMount： 该方法在组件即将被挂载到DOM之前调用。由于异步渲染的引入，React团队建议在 componentDidMount 中执行相应的操作，因为此时可以确保组件已经被挂载。
• componentWillUpdate： 该方法在组件即将重新渲染时调用。React 16.3之后，建议使用 componentDidUpdate 替代，因为这样可以避免在同一生命周期中执行可能导致副作用的操作。
• componentWillReceiveProps： 该方法在组件即将接收新的props时调用。React团队认为这个生命周期容易出错且难以理解，因此推荐使用 static getDerivedStateFromProps 或 componentDidUpdate 来替代。

这些变更的目标是为了更好地支持异步渲染，并提供更一致的生命周期方法。

2）React 16.X 中 props 改变后在哪个生命周期中处理

在React 16.X中，当组件接收到新的props时，props的改变会在 componentDidUpdate 生命周期中被处理。在这个生命周期方法中，你可以比较前后的props，执行相应的操作，例如根据新的props更新组件的内部状态。

componentDidUpdate(prevProps) {
  // 检查props是否发生变化
  if (this.props.someProp !== prevProps.someProp) {
    // 执行相应的操作
    // 例如，更新组件的状态
    this.setState({/* updated state */});
  }
}

3）React 性能优化在哪个生命周期？它优化的原理是什么？

性能优化通常在 shouldComponentUpdate 生命周期中进行。在这个生命周期方法中，你可以控制组件是否需要重新渲染。默认情况下，React会在每次 setState 调用时重新渲染组件，但通过在 shouldComponentUpdate 中进行适当的比较，你可以避免不必要的渲染，提高性能。

shouldComponentUpdate 接收两个参数：nextProps 和 nextState。你可以比较这些新的props和state与当前的props和state，如果它们相等或符合某些条件，返回 false 阻止重新渲染，否则返回 true 允许重新渲染。

这一优化原理是避免不必要的渲染，减少了虚拟DOM的比较和实际DOM的更新操作，从而提升了性能。

4）state 和 props 触发更新的生命周期分别有什么区别？

• props 触发更新：
  • 当组件的props发生变化时，会触发组件的更新。
  • 与props相关的生命周期方法包括 componentWillReceiveProps（已废弃）和 componentDidUpdate。
  • 在 componentDidUpdate 中可以比较新旧props，执行相应的操作。
• state 触发更新：
  • 当组件的state发生变化时，也会触发组件的更新。
  • 与state相关的生命周期方法包括 shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。
  • 可以在 shouldComponentUpdate 中进行状态变化的判断，决定是否进行更新，从而进行性能优化。

5）React中发起网络请求应该在哪个生命周期中进行？为什么？

发起网络请求通常应该在组件的 componentDidMount 生命周期中进行。这是因为 componentDidMount 在组件挂载到DOM后调用，这样可以确保组件已经渲染到页面上，用户能够看到，并且此时可以执行异步操作，如网络请求。

在 componentDidMount 中发起网络请求有以下好处：

• 避免了阻塞渲染：在 componentDidMount 中进行网络请求，不会阻塞组件的渲染过程，用户能够快速看到页面内容。
• 避免重复请求：由于 componentDidMount 只会在组件挂载时被调用一次，因此可以避免重复发起相同的网络请求。

在请求返回后，可以使用 setState 更新组件的状态，触发重新渲染以展示从服务器获取的数据。

6）React 16中新生命周期有哪些

在React 16中引入了新的生命周期方法，主要是为了支持异步渲染和更好地处理副作用。以下是React 16中引入的新生命周期方法：

• static getDerivedStateFromProps(props, state): 这个静态方法在组件每次渲染前被调用，它接收新的props和当前的state作为参数，用于计算并返回新的state。与 componentWillReceiveProps 的替代关系最密切。
• getSnapshotBeforeUpdate(prevProps, prevState): 在更新之前被调用，它的返回值将作为第三个参数传递给 componentDidUpdate。主要用于获取更新前的一些DOM信息，通常和 componentDidUpdate 一起使用。

7） 父子组件的通信方式？

父子组件之间通信的方式有多种，其中常见的包括：

• props传递： 父组件通过props向子组件传递数据。

// 父组件
<ChildComponent data={someData} />

// 子组件
const ChildComponent = (props) => {
  // 使用 props.data
};

• 回调函数： 父组件通过回调函数将函数传递给子组件，子组件可以调用这个函数与父组件通信。

// 父组件
<ChildComponent onAction={handleAction} />

// 子组件
const ChildComponent = ({ onAction }) => {
  // 调用父组件传递的回调函数
  onAction(data);
};

• React Context： 使用React Context可以在组件树中共享数据，父组件提供Context，子组件通过Context订阅数据。
• Redux或其他状态管理库： 对于大型应用，可以使用状态管理库进行状态的集中管理，实现组件之间的通信。

8）跨级组件的通信方式？

当组件层级较深，需要进行跨级通信时，可以使用以下方式：

• React Context： 创建一个Context，然后在组件树中提供和消费这个Context，实现跨级组件之间的数据传递。
• Redux或其他状态管理库： 在全局状态管理库中存储和获取数据，实现跨级组件的通信。

9）非嵌套关系组件的通信方式？

对于非嵌套关系的组件，可以使用中介者模式或全局状态管理库等方式进行通信。

• 中介者模式： 可以创建一个中介者组件，负责管理和传递信息，其他组件通过中介者进行通信。
• 全局状态管理库： 使用像Redux这样的全局状态管理库，将需要共享的数据存储在全局状态中，各个组件可以通过订阅和派发动作来进行通信。

10）如何解决 props 层级过深的问题

深层次的props传递可能导致代码难以维护和理解。为了解决这个问题，可以考虑以下几种方法：

• 使用React Context： 将需要共享的数据使用React Context提供在组件树的上层，避免通过多层嵌套传递。
• 使用状态管理库： 将共享的状态存储在全局状态管理库（如Redux）中，各组件通过连接器（Connector）或Hooks来获取和更新状态。
• 组件组合： 将多个小组件组合成一个复合组件，内部进行props传递，外部只需与复合组件交互。
• 提取组件： 当遇到深层次的props传递时，考虑是否有必要将一些相关的props提取到一个新的组件中，以减少每个组件的props数量。

通过这些方式，可以更好地管理和组织组件之间的数据传递，使代码更清晰和可维护。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐