react 生命周期

react生命周期笔记整理

查看官网

挂载阶段

constructor(props,content)

1. 初始化state、

2. 事件处理函数绑定this

Static getDerivedStateFromProps(props,state)

1、 父组件的值传给子组件state的属性做为值 派生状态
2、 静态方法不能用this,调用是用 类.静态方法名
3、 返回一个对象更新状态或者null表示新的props不需要任何state更新
4、 父组件的props更改所带来的重新渲染也触发此方法
5、 Fiber：新算法(可自行百度查找文献)

render()
##### 被调用时计算this.props和this.state并返回以下类型：
1、 React元素（可以是dom元素也可以是自定义组件）
2、 字符串、数字（以文本节点形式渲染到dom）
3、 Null、布尔值 （不渲染）
4、 不能直接返回对象
5、 不能返回两个标签，只能有一个，当返回两个时以下操作
Import {Fragment} from ’react’

<Fragment>
         <div></div> 
         <div></div>
   </Fragment>

也可以如下(Fragment 空标记 相当于 <></>)

 <><div></div></>  

componentDidMount()
1、 获得真实的dom节点
2、 发送ajax请求
3、 组件调配后立即调用，初始化使dom节点应在这进行
4、 初始化第三方dom库，也是在这进行初始化

更新阶段

Static getDerivedStateFromProps(props,state)
ShouldComponentUpdate(nextprops,nextstate)
1、 返回true 就会render 返回false 不会render
2、可以加条件减少不必要的渲染，增加性能
拓展：
1、PureComponent 进行浅比对，进行性能的优化 （纯组件）
2、对无状态组件用 React.memo(组件)
3、我们把 参数是组件 返回值也是组件 这类组件我们叫 “高阶组件”(HOC)
本质是高阶函数 （map filter forEach …)
Render()
getSnapshotBeforeUpdata(prevprops,prevState)
1、 需要和componentDidUpdata搭配一起使用


2、 必须返回一个值
3、 不能和旧版的钩子函数一起使用
4、 目的是为了返回数据更新前的dom状态

ComponentDidUpdata（prevProps,prevState,snapshot)
1、 作用:监听数据变化
2、 组件里无论哪个变化都会调用此钩子函数
3、 监听路由参数变化
4、 在此钩子函数慎用setState,会死循环
5、 异步获取数据时，更新时返回

卸载阶段

componentWillUnMount()
1、 使定时器无效
2、 取消网络请求
3、 清理在componentDidMount中创建的任何监听
4、 在组件卸载前执行

详细可以点击=>官网，以上仅个人理解，有误请指出！谢谢指点小白~

来源：CSDN

作者：ccccc-

链接：https://blog.csdn.net/weixin_46398902/article/details/104484921