怎么查看网站哪个公司做的,个体工商户经营范围网站开发,烟台规划网站,东莞快速做网站React基础学习-Day08
React生命周期#xff08;旧#xff09;#xff08;新#xff09;#xff08;函数组件#xff09;
#xff08;旧#xff09; 在 React 16 版本之前#xff0c;React 使用了一套不同的生命周期方法。这些生命周期方法在 React 16 中仍然可以使用…React基础学习-Day08
React生命周期旧新函数组件
旧 在 React 16 版本之前React 使用了一套不同的生命周期方法。这些生命周期方法在 React 16 中仍然可以使用但被标记为将来可能会被废弃建议尽量使用新的生命周期方法来代替。以下是旧版 React 生命周期方法的主要分类和用法
1. 挂载阶段Mounting Phase
这些生命周期方法在组件实例被创建并插入 DOM 中时被调用。
constructor(props) 构造函数用于初始化组件的状态state和绑定事件处理方法。通常用来进行一些初始化操作。 componentWillMount() 在组件即将被挂载到 DOM 之前调用仅在服务端渲染时才会被调用。不推荐使用可以使用 constructor() 或 componentDidMount() 替代。 render() 必需的方法返回组件的 JSX 表示。描述了组件的 UI 呈现。 componentDidMount() 在组件挂载后插入 DOM 树中后立即调用。通常用于发起网络请求或设置订阅。
2. 更新阶段Updating Phase
这些生命周期方法在组件更新时被调用比如 props 或 state 的改变。
componentWillReceiveProps(nextProps) 在组件接收到新的 props 时被调用。不推荐使用可以使用 static getDerivedStateFromProps() 或 componentDidUpdate() 替代。 shouldComponentUpdate(nextProps, nextState) 允许开发者手动判断是否重新渲染组件。默认返回 true表示总是重新渲染。 componentWillUpdate(nextProps, nextState) 在组件即将更新重新渲染时被调用。不推荐使用可以使用 getSnapshotBeforeUpdate() 或 componentDidUpdate() 替代。 render() 更新 UI。 componentDidUpdate(prevProps, prevState) 在组件更新后立即调用。通常用于处理 DOM 更新之后的操作。
3. 卸载阶段Unmounting Phase
这些生命周期方法在组件从 DOM 中移除时被调用。 componentWillUnmount() 在组件被卸载和销毁之前调用。通常用于清理定时器、取消网络请求或清理订阅。
4. 错误处理阶段Error Handling Phase
这些生命周期方法在组件在渲染过程中、子组件树中的任何地方抛出错误时被调用。 componentDidCatch(error, info) 在后代组件抛出错误后调用。用于记录错误信息等。
新 在 React 16.3 版本及之后引入了一些新的生命周期方法同时对一些旧的生命周期方法进行了调整和标记为过时。这些变化主要是为了解决 React 在异步渲染和性能优化方面的一些挑战。以下是主要的新生命周期方法和使用方式
1. 挂载阶段Mounting Phase
这些生命周期方法在组件实例被创建并插入 DOM 中时被调用。
constructor(props) 构造函数用于初始化组件的状态state和绑定事件处理方法。通常用来进行一些初始化操作。 static getDerivedStateFromProps(props, state) 在组件挂载初始化和更新接收新的 props时都会被调用。用于根据 props 更新 state。必须是静态方法并返回一个对象来更新 state或者返回 null 表示不更新 state。 render() 必需的方法返回组件的 JSX 表示。描述了组件的 UI 呈现。 componentDidMount() 在组件挂载后插入 DOM 树中后立即调用。通常用于发起网络请求或设置订阅。
2. 更新阶段Updating Phase
这些生命周期方法在组件更新时被调用比如 props 或 state 的改变。
static getDerivedStateFromProps(props, state) 在组件挂载后和每次接收新的 props 时都会被调用用于根据 props 更新 state。 shouldComponentUpdate(nextProps, nextState) 允许开发者手动判断是否重新渲染组件。默认返回 true表示总是重新渲染。 render() 更新 UI。 getSnapshotBeforeUpdate(prevProps, prevState) 在组件更新重新渲染之前被调用。它可以捕获当前 DOM 的某些信息返回的值将作为 componentDidUpdate() 的第三个参数传递给它。 componentDidUpdate(prevProps, prevState, snapshot) 在组件更新后立即调用。通常用于处理 DOM 更新之后的操作。
3. 卸载阶段Unmounting Phase
这些生命周期方法在组件从 DOM 中移除时被调用。 componentWillUnmount() 在组件被卸载和销毁之前调用。通常用于清理定时器、取消网络请求或清理订阅。
4. 错误处理阶段Error Handling Phase
这些生命周期方法在组件在渲染过程中、子组件树中的任何地方抛出错误时被调用。
static getDerivedStateFromError(error) 在后代组件抛出错误后被调用用于更新 state 以显示备用 UI。 componentDidCatch(error, info) 在后代组件抛出错误后调用。用于记录错误信息等。
函数式组件中如何模拟生命周期
如果你想使用 useEffect Hook 来分别模拟类组件中的不同生命周期方法可以这样做
模拟 componentDidMount
import React, { useEffect } from react;function MyComponent() {useEffect(() {// 这里的代码将在组件挂载后执行相当于 componentDidMountconsole.log(Component mounted);// 如果需要清理操作可以返回一个函数在组件卸载时执行return () {console.log(Component will unmount);};}, []); // 空数组作为第二个参数表示只在组件挂载时执行一次return (divpComponent content/p/div);
}export default MyComponent;模拟 componentDidUpdate
import React, { useEffect, useState } from react;function MyComponent() {const [count, setCount] useState(0);// useEffect 模拟 componentDidUpdateuseEffect(() {// 这里的代码将在每次组件更新时执行相当于 componentDidUpdateconsole.log(Component updated);// 如果有需要在这里可以执行特定于更新的操作// 注意这里不返回清理函数因为这里的 useEffect 不需要在组件卸载时执行}, [count]); // 指定 count 为依赖项只有 count 更新时才会执行 effectreturn (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div);
}export default MyComponent;模拟 componentWillUnmount
import React, { useEffect } from react;function MyComponent() {useEffect(() {// 这里的代码将在组件挂载后执行相当于 componentDidMountconsole.log(Component mounted);// 返回一个清理函数在组件卸载时执行return () {console.log(Component will unmount);};}, []); // 空数组作为第二个参数表示只在组件挂载时执行一次return (divpComponent content/p/div);
}export default MyComponent;在上面的例子中
第一个 useEffect 模拟了 componentDidMount 生命周期方法它在组件挂载时执行一次并且可以返回一个清理函数。第二个 useEffect 则模拟了 componentDidUpdate 生命周期方法它在组件更新时执行依赖于 count 状态的变化。第三个 useEffect 演示了如何在组件卸载时执行清理操作类似于 componentWillUnmount。
通过使用 useEffect Hook你可以更灵活地管理组件的副作用和生命周期行为而不需要依赖类组件中的生命周期方法。
