react基础知识集锦2 --- 函数组件和类组件（部分）

虞鸢仙

已于 2023-10-06 10:51:00 修改

阅读量59

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-10-06 10:47:57 首次发布

本文链接：https://blog.csdn.net/m1864787/article/details/133606424

版权

一、简单介绍一下React组件的生命周期吧！

Mounting（挂载阶段）：
- constructor()：组件实例化时调用，用于初始化状态和绑定方法。
- static getDerivedStateFromProps(nextProps, prevState)：在渲染之前调用，用于根据新的属性值更新状态。
- render()：渲染组件的内容。
- componentDidMount()：组件挂载到 DOM 后调用，可以进行 DOM 操作和发送网络请求等副作用操作。
Updating（更新阶段）：
- static getDerivedStateFromProps(nextProps, prevState)：在接收到新属性或状态之前调用，用于根据新的属性值更新状态。
- shouldComponentUpdate(nextProps, nextState)：在重新渲染之前调用，用于控制是否需要重新渲染组件。
- render()：重新渲染组件的内容。
- getSnapshotBeforeUpdate(prevProps, prevState)：在更新 DOM 之前调用，返回一个值供 componentDidUpdate() 使用，通常用于保存滚动位置等信息。
- componentDidUpdate(prevProps, prevState, snapshot)：组件更新后调用，可以进行 DOM 操作和处理更新后的数据。
Unmounting（卸载阶段）：
- componentWillUnmount()：组件被从 DOM 中移除之前调用，可以进行清理操作，如取消定时器、取消订阅等。

此外，还有两个特殊的生命周期方法用于处理错误：

static getDerivedStateFromError(error)：在子组件抛出错误后调用，返回一个新的状态来渲染 UI。
componentDidCatch(error, info)：用于捕获并处理子组件抛出的错误。

需要注意的是，在函数式组件中，没有类组件中的生命周期方法。但可以使用 React 提供的 useEffect() 钩子来代替。useEffect() 钩子可以在组件挂载、更新和卸载时执行副作用操作。

二、React发起ajax应该在哪个阶段？

在React中发起ajax请求，一般应该放在组件的生命周期函数中。具体来说，可以在componentDidMount()这个生命周期函数中发起ajax请求，因为此时组件已经挂载完毕并且可以访问到DOM节点，可以保证能够正确获取数据并展示在页面上。而在render()函数中发起ajax请求是不合适的，因为每次组件状态变更都会重新调用render()函数，会频繁地发起重复的ajax请求，影响性能。另外，在componentWillUnmount()生命周期函数中需要手动清除未完成的ajax请求，以防止内存泄漏。

三、shouldComponentUpdata的用途

shouldComponentUpdate方法是React组件生命周期中的一个方法，用于控制组件是否需要重新渲染（其用途是用于性能优化）。当组件的props或state发生变化时，React会调用shouldComponentUpdate方法来确定是否需要重新渲染组件。在某些情况下，组件的重新渲染可能是不必要的，这样会造成性能浪费。在这种情况下，可以使用shouldComponentUpdate来控制组件是否重新渲染。

shouldComponentUpdate接收两个参数：nextProps和nextState，它们代表组件即将更新的属性和状态。在该函数中，可以根据当前的属性和状态与即将更新的属性和状态进行对比，决定是否重新渲染组件。

通过在shouldComponentUpdate方法中比较新旧的props和state，我们可以决定是否返回true来触发重新渲染。如果shouldComponentUpdate返回false，React将不会重新渲染组件，这可以有效地提高性能，避免不必要的重新渲染。

shouldComponentUpdate方法的主要用途是在需要性能优化时，根据业务需求对组件的渲染进行控制。我们可以根据具体的需求和场景，在shouldComponentUpdate方法中编写逻辑来判断是否需要进行重新渲染。