我对React生命周期一些理解

summer瓜瓜
124 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

前言

最近看了点React面经，今天看到了react的生命周期，这里就简单的总结一下，记录一下我对React生命周期的理解

生命周期

首先看一下React官网给出的一些常用的的生命周期React lifecycle methods diagram (wojtekmaj.pl)

挂载时

constructor()

如果不需要初始化state,或者进行方法的绑定，那么我们其实不需要用到这个

使用这个构造函数，我们只会有这两种情况

  • 需要用this.state赋值对象来初始化内部的state,但是这里面不是使用setState()，在这里面只能使用赋值
  • 绑定事件
constructor(props){
    super(props)//获取父类身上的props
    //初始化state
    this.state = {count:0}
    //绑定事件
   	this.handleClick = this.handleClick.bind(this)
}

我感觉我一直都没怎么用过这个钩子，因为我觉得，初始化state，我可以使用useState(),绑定事件，可以通过useEffet()给组件绑定事件，当组件一渲染，我就触发这个组件的这个事件。

render()

作用：当react被调用时，它会去调用props和state,观察他们是不是变化，如果发生变化，那么他就会执行并且返回这些类型之一

  • React元素

    通常由JSX来创建

    • <div/>:会被变为节点
    • <Mycomponent/>:会被渲染为一个组件

  • 数组或者fragments

    其实我感觉其实就是和React元素差不多，只不过他是嵌套的

    render(){
    return (
    	<React.Fragement>
        	<ChildA></ChildA>
            <ChildB></ChildB>
            <ChildC></ChildC>
        </React.Fragement>
    )
}

    或者你需要渲染state或者props,但是状态是一个数组，这时候你需要使用map，并且需要key

    function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 没有`key`，React 会发出一个关键警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

  • 布尔类型或者null

    这几个我应该没有遇到过感觉，后续遇到补充吧

关于我对render的理解，我觉得其实render其实就是我们函数组件里面的return

componentDidMount()

这个在组建挂载后会立即执行，所以他其实是进行一些网络请求，发布订阅的最好时机，但是如果发布订阅不要忘记在结束的时候，结束订阅componentWillUnmount()

但是目前ReactuseEffect()，其实就是专门来处理这种有副作用的事情的，我感觉其实他将componentDidMount()和componentWillUnmount()结合起来

这里我想好好理解一下useEffect()

useEffect()

useEffect就是专门用来处理一些产生副作用的事件

只要我的组件每渲染一次，那么这个useEffect()函数就会立即执行

useEffect()接受两个参数

  • 函数

    产生副作用的函数

  • 数组

    指定了副作用函数的依赖，一旦依赖发生了变化，那么这个函数才会执行,当然你也可以为一个空的数组，那么这个意思就是，只会执行一次（在组件加载进入DOM时执行一次），其实这样，就类似于componentDidUpdate()

返回一个函数，其实就是在组件卸载时进行执行，用于消除副作用

useEffect(()=>{
    const subscription = props.source.subscribe()
    return ()=>{
        subscription.unsubscription()
    }
},[props.source])

假如你有几个会产生副作用的函数，那么请分开写，而不是放在一个useEffect里面

参考链接：轻松学会 React 钩子：以 useEffect() 为例 - 阮一峰的网络日志 (ruanyifeng.com)

更新时

render()

componentDidUpdate()

定义：在组件进行更新后进行调用

卸载时

componentWillUnmount()

定义：用于组件卸载时，就是清理一些监听事件，订阅事件啥的

只要我们执行了这个函数，那么我们下一次这个组件再想要使用，就是重新创建

感悟

我感觉在react18

  • useEffect()就已经结合了componentDidMount,componentDidUpdate(),componentWillUnmount()
  • return其实执行的就是类似于render()的操作

关于还有一些不太常用的生命周期函数，这里就不介绍了

如果有不对的地方可以在评论区留言

avatar
文章
阅读
粉丝