大连网站建设找哪家,网站设计的资质叫什么,网页设计技巧,网站建设相关知识博客React生命周期#xff0c;就是指组件从被创建出来#xff0c;到被使用#xff0c;最后被销毁的这么一个过程。而在这个过程中#xff0c;React提供了我们会自动执行的不同的钩子函数#xff0c;我们称之为生命周期函数。
一、类式组件
React的生命周期可以分为三个阶段就是指组件从被创建出来到被使用最后被销毁的这么一个过程。而在这个过程中React提供了我们会自动执行的不同的钩子函数我们称之为生命周期函数。
一、类式组件
React的生命周期可以分为三个阶段挂载、渲染、卸载。
1. Mounting挂载阶段------ 创建构造函数并初始化让我们在页面加载完成前后做一些事情。
constructor构造函数在类组件中比较常见getDerivedStateFromPropsrenderrender函数只能访问this.props和this.state不允许修改状态和DOM输出componentDidMount组件挂载------ 一般在这个钩子中做一些初始化的工作比如开启定时器发送网络请求订阅消息 2. Updating更新阶段——状态更新引起的变化更新页面UI显示或数据更改。
getDerivedStateFromPropsshouldComponentUpdaterenderrender函数------ 渲染组件的UIgetSnapshotBeforeUpdatecomponentDidUpdate组件更新------ 可以修改DOM
3. Unmounting卸载阶段------ 销毁一个组件销毁前暴露出一个事件让我们可以在组件销毁前做一些逻辑的处理。
componentWillUnmount组件销毁 ------ 一般在这个钩子中做一些收尾的工作比如关闭定时器取消订阅消息
代码示例
import React from react;
import ReactDOM from react-dom;class App extends React.Component {// constructor用来初始化组件属性this.state定义数据super()为了接收到父类的this指针// 创建构造函数constructor(props) {super(props);this.state {data: Old State}console.log(初始化数据, constructor);}// 组件将要加载,整个组件还没有加载出来js逻辑已经可以执行, 异步方法可以放在这里执行componentWillMount() {console.log(componentWillMount);}// 组件加载完成componentDidMount() {console.log(componentDidMount);}// 接收父组件传递过来的参数props时触发componentWillReceiveProps() {console.log(componentWillReceiveProps);}// 判断组件是否需要更新,它需要一个返回值默认为trueshouldComponentUpdate() {console.log(shouldComponentUpdate);return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,}// 组件将要更新, 如果shouldComponentUpdate的返回值为true那这个函数就要为组件更新做准备了// 如果shouldComponentUpdate返回值为false则组件不会更新componentWillUpdate,componentDidUpdate都不会执行componentWillUpdate() {console.log(componentWillUpdate);}// 组件更新完成componentDidUpdate() {console.log(componentDidUpdate);}// 处理点击事件handleClick() {console.log(更新数据);this.setState({data: New State})}// 把组件渲染到页面上render() {console.log(render);return (divh1Props:{this.state.data}/h1button onClick{() this.handleClick()}更新数据/button/div)}
}ReactDOM.render(divApp //div,document.getElementById(app)
)
父子组件初始化 父子组件第一次进行渲染加载时控制台的打印顺序为
Parent 组件 constructor() Parent 组件 getDerivedStateFromProps() Parent 组件 render() Child 组件 constructor() Child 组件 getDerivedStateFromProps() Child 组件 render() Child 组件 componentDidMount() Parent 组件 componentDidMount()
父子组件生命周期执行顺序总结 当子组件自身状态改变时不会对父组件产生副作用的情况下父组件不会进行更新即不会触发父组件的生命周期
当父组件中状态发生变化包括子组件的挂载以及卸载时会触发自身对应的生命周期以及子组件的更新
render 以及 render 之前的生命周期则 父组件先执行 render 以及 render之后的声明周期则子组件先执行并且是与父组件交替执行 当子组件进行卸载时只会执行自身的 componentWillUnmount 生命周期不会再触发别的生命周期
即将废弃的钩子
componentWillMountcomponentWillReceivePropscomponentWillUpdate
现在使用会出现警告下一个大版本需要加上UNSAFE_前缀才能使用以后可能会被彻底废弃不建议使用。
componentWillMount: 被 UNSAFE_componentWillMount 取代。componentWillReceiveProps: 被 UNSAFE_componentWillReceiveProps 取代。componentWillUpdate: 被 UNSAFE_componentWillUpdate 取代。
这些带有 UNSAFE_ 前缀的函数是 React 在新版本中标记为不安全的生命周期函数提醒开发者在新代码中避免使用它们。React 团队计划在未来版本中完全移除这些不安全的生命周期函数。
二、函数式组件 在 React 之前的版本中函数式组件确实没有类组件那样的生命周期方法。这是因为函数式组件最初被设计为纯粹的“无状态”组件用于简单的 UI 呈现。在这种情况下组件不需要进行复杂的生命周期管理因此没有提供生命周期方法。
在 React 中函数式组件在 React 16.8 版本引入的 Hooks 之后可以使用 Hooks 来模拟类组件中的生命周期功能。主要用到的是 useEffect 这个 Hook。以下是函数式组件生命周期相关的一些常见钩子
useEffect
useEffect 可以在函数式组件中执行副作用操作类似于类组件中的 componentDidMount、componentDidUpdate、componentWillUnmount 三个生命周期函数的组合。
import React, { useEffect } from react;function MyFunctionalComponent() {useEffect(() {// 在组件挂载后执行相当于 componentDidMountconsole.log(组件挂载了)// 在组件更新后执行相当于 componentDidUpdateconsole.log(组件更新了)return () {console.log(组件即将卸载)// 在组件卸载前执行相当于 componentWillUnmount};}, [/* dependencies */]); // 可选的依赖数组当数组中的依赖发生变化时effect 就会重新执行
}
useLayoutEffect
useLayoutEffect 与 useEffect 类似但在所有 DOM 变更后同步触发可以用于获取 DOM 元素的布局信息
import React, { useLayoutEffect } from react;function MyFunctionalComponent() {useLayoutEffect(() {// 在所有 DOM 变更后同步执行}, [/* dependencies */]);
}
useMemo 和 useCallback
useMemo 和 useCallback 可以用于性能优化避免在每次渲染时都重新计算某个值或创建某个函数。
import React, { useMemo, useCallback } from react;function MyFunctionalComponent({ data }) {const memoizedValue useMemo(() computeExpensiveValue(data), [data]);const memoizedCallback useCallback(() {doSomethingWith(memoizedValue);}, [memoizedValue]);// 其他组件逻辑
} 三、什么是React副作用
在 React 中副作用指的是与组件渲染结果无关的任何操作例如
发送网络请求修改 DOM 元素访问本地存储订阅或取消订阅事件改变组件状态外的变量等
这些操作会影响组件的行为和状态但是并不会直接影响渲染结果。在 React 中应该将副作用分离出来以便更好地控制组件的行为和状态。
通常React 使用钩子函数如 useEffect来处理副作用。在 useEffect 中可以执行一些副作用操作例如发送网络请求或订阅事件以及在组件卸载时清除这些操作。这可以保持组件的一致性和可维护性。
