React生命周期

南山隐士 2022年06月25日 34 0

constructor

这里主要是初始化state的数据, 以及绑定一些方法

componentWillMount(已废弃)

在组件将要挂载的时候,执行, 现在这个生命周期将会在react17.x的版本中废弃, 官方更加推荐你在 componentDidMount 中进行一些副作用操作, 例如发送异步请求

为什么不使用这个钩子?

在willMount中发送请求是会有隐患的, 它不能根本性地解决你的问题, 例如首页白屏的问题, 因为请求是异步的, 而生命周期是同步的,它并不会等待你数据的到来在执行后面的钩子

如果你在这钩子上创建一些时间,而你又想在组件卸载的时候取消订阅事件, 如果因为某些原因最终无法渲染页面,最终会导致卸载的钩子无法执行, 而如果使用 componentDidMount 就不会存在这个问题, 因为你页面已经渲染了,必定会执行卸载钩子

render

==render这个函数它比较特殊,我们必须去定义它==, 因为它是用来渲染我们dom元素的关键,
切记在render中,我们不能改变state的数据, 这样会触发死循环导致栈溢出

componentDidMount

==在该钩子中, 页面已经渲染完毕==, 并且我们可以在这里通过refs来获取真实的dom, 可以在这里进行副作用的操作

componentWillReceiveProps(已废弃)

==用于在props即将变化之前,props发生变化以及父组件重新渲染时都会触发该生命周期==(即使传递给子组件的props没有变化也会执行,因为父组件重新渲染了)

在这个钩子中, 你可以进行setState来改变数据, 你可以在这里可以获取到父组件传递过来新的props以及通过this.props来读取目前的props, 这个钩子可以根据父组件的某些值, 来决定子组件应该干什么

getDerivedStateFromProps(替代方法)

组件每次渲染都会执行该函数, 可以获取到props的数据,以及上次state的数据, 可以根据这2个数据, 重新改变state的值, ==该方法在render之前调用, 该方法可以说是替代了 componentWillReceiveProps 以及 componentWillUpdate==

shouldComponentUpdate

用来确定是否重新渲染,组件挂载之后,该函数可以获取到下次的props和下次state的数据, 每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true,需要重新render,返回false则不触发渲染。

componentWillUpdate(已废弃)

在render前执行某些, 在这个钩子中, 你不能改变state的数据, 这样会导致重复渲染, 所以这个钩子基本上没什么用, 官方已经废弃

getSnapshotBeforeUpdate

update发生的时候,在render之后,在componentDidUpdate之前

需要返回一个值,作为componentDidUpdate的第三个参数

该函数接受prevProps 和 prevState 作为参数

componentDidUpdate

更新完成后触发,可以获取dom, 该函数可以获取上一个state以及上一个props的数据

componentWillUnmount

我们可以在这边做收尾工作 清除计时器、订阅、监听等等
大多数时候会出现一些this.setState不能对不存在的组件进行修改的警告甚至是报错
那是因为你改变的state的是异步的, 而组件销毁了, 你无法改变不存在的state的
解决是:

this.setState = (state, callback) => { return }
Last Updated: 2022/06/25 19:16:01
React通信 TypeScript基础-数据类型