中国企业网财经,网站推广优化方法,河南省建设科技会网站,建筑设计和室内设计的区别概述
React组件的生命周期可以分为三个主要阶段#xff1a; 挂载阶段#xff08;Mounting#xff09;#xff1a;组件被创建#xff0c;插入到DOM 树的过程#xff1b; 更新阶段#xff08;Updating#xff09;#xff1a;是组件中 props 以及state 发生变化时#…概述
React组件的生命周期可以分为三个主要阶段 挂载阶段Mounting组件被创建插入到DOM 树的过程 更新阶段Updating是组件中 props 以及state 发生变化时重新render渲染视图过程 卸载阶段Unmounting是DOM被从虚拟DOM树移除的过程 每个阶段都伴随着一系列的生命周期方法这些方法为开发者提供了在类式组件不同阶段执行操作不同代码的机会使开发人员能够更好的处理业务交互。
1、类式组件中的生命周期
React 16.3 之前的钩子
React 16.3 之后的生命周期钩子
2、React 16.3 版本之前的 生命周期
这个版本的 React 有非常明确的生命周期能够清晰的知道各个阶段的钩子函数跟VUE2.0的非常相似 主要钩子函数有如下
2.1、挂载阶段
constructor(props)
类的构造方法在组件中被创建时候调用用于初始化 state 和 绑定事件处理函数但是这个时候不能调用 this.setState() 因为此时组件还没有挂载到 DOM上
componentWillMount()
将要插入回调DOM结构生成前要执行的操作
render()
用于插入虚拟DOM 回调将虚拟DOM 渲染到视图上的过程
componentDidMount()
虚拟 DOM插入回调已经完成即视图已经渲染完成页面真实DOM已经加载完此阶段可以进行 数据请求、订阅或手动更改DOM
2.2、更新阶段
每次在进行 this.setState() 操作或者 子组件得到的 props 更新时候都会执行此阶段的钩子函数还有就是执行 forceUpdate() 时候 同样也会执行此阶段函数
componentsWillUpdate()
视图将要更新前的回调操作用于数据格式化等操作
render()
根据传入的 新state 或者 新 props 进行重新渲染视图
componentDidUpdate()
视图重新更新渲染已经完成 可以在这里执行依赖于DOM的操作如重新获取DOM尺寸或执行网络请求
2.3、卸载阶段
componentWillUnmount()
组件被移除回调这个阶段可以处理一些定时任务事件卸载、取消网络请求等操作
3、React 16.3 版本之后的生命周期
3.1、挂载阶段
constructors(props)
类的构造方法在组件被创建时调用。用于初始化state和绑定事件处理函数,创建 ref。注意constructor中不能调用this.setState()因为此时组件还未挂载到DOM上。
constructor(props) {console.log(constructor)// 获取上级传入 propssuper(props)// 声明 state 属性 countthis.state {count: 0}}static getDerivedStateFromProps(props, state)
React 16.3引入的静态方法在组件创建时和每次更新前调用。用于根据props更新state。如果不希望更新state则返回null。 如 static getDerivedStateFromProps(props, state) {// 根据props更新stateconsole.log(props)console.log(state, state)// 表示给 count 设置初始值最终会渲染为 99return {count: 99}}static 静态方法中是获取不到当前组件的实例的不能进行 this.XX 操作 调用 如this.fetch()
render()
渲染方法根据组件的props和state返回React元素。render方法必须是一个纯函数不能修改组件的状态或执行副作用。
componentDidMount()
组件挂载到DOM后调用。是执行副作用如数据获取、订阅或手动更改DOM。
3.2、更新阶段
在组件的props或state发生变化时React会重新渲染组件
static getDerivedStateFromProps(props, state)
同挂载阶段用于在更新前根据props更新state。 同上 返回 null 时候不会更是视图
shouldComponentUpdate(nextProps, nextState)
返回一个布尔值决定组件是否应该更新。默认情况下返回true但可以通过此方法优化性能避免不必要的渲染通过对比新旧数据判断是否需要执行更新视图操作。
render()
同挂载阶段根据更新后的props和state重新渲染组件。
getSnapshotBeforeUpdate(prevProps, prevState)
在最近一次渲染输出提交到DOM之前调用可以捕获一些信息如滚动位置这些信息将作为参数传递给componentDidUpdate。
componentDidUpdate(prevProps, prevState, snapshot)
组件更新后被调用。可以在这里执行依赖于DOM的操作如重新获取DOM尺寸或执行网络请求
3.3 卸载阶段
componentWillUnmount()
在组件卸载及销毁之前调用。是执行清理操作如取消网络请求、清除定时器的理想位置。
类式组件生命周期钩子函数变化 4、在函数式组件中如何模拟生命周期
生命周期主要分为 三个阶段在函数式组件中是无法模拟出上面类式组件的各个生命钩子函数的但是可以通过 useEffect() Hook模拟组件的 挂载、更新、销毁三个阶段
4.1 模拟挂载阶段
与类组件中的 componentDidMount() 钩子函数相似
useEffect(() {// 这里执行挂载时候操作console.log(componentDidMount)}, []) // 第二参数为空 数组时候表示 挂载、卸载时候执行4.2 模拟更新阶段
与类式组件中的 shouldComponentUpdate 类似 useEffect(() {// 这里执行挂载时候操作console.log(componentDidMount)console.log(我更新了)}, [count]) // 第二参数为空 数组时候表示 挂载、卸载时候执行;若第二个参数 传入了依赖属性则该属性变化时候会执行第一个参数的回调函数4.3 模拟卸载阶段
与类式组件中的 componentWillUnmount() 类似 useEffect(() {// 这里执行挂载时候操作console.log(componentDidMount, count)return () {// 这里执行卸载后的操作console.log(组件卸载了)}}, [count]) // 第二参数为空 数组时候表示 挂载、卸载时候执行,注意官网现在推荐开发时候使用函数式组件相对类式组件更加灵活方便但是在编写通用性处理复杂的逻辑及状态时候还是建议使用类式组件类式组件有很好的继承扩展性通过生命周期钩子能够更好的
