面试 React 框架八股文十问十答第七期
作者：程序员小白条，个人博客
相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！
⭐点赞⭐收藏⭐不迷路！⭐文章来源地址https://www.toymoban.com/news/detail-800133.html
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！文章来源：https://www.toymoban.com/news/detail-800133.html
⭐点赞⭐收藏⭐不迷路！⭐
到了这里，关于面试 React 框架八股文十问十答第七期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
