React学习笔记2---生命周期

痛定思痛。 2022-03-07 02:48 209阅读 0赞

#### 生命周期函数指在某一个时刻组件会自动调用执行的函数，React的生命周期函数主要有 ####

*  Initialization(初始化）
 *  Mounting(挂载）
 *  Updation(更新）
 *  Unmounting(卸载）

![clipboard.png][]

#### 父组件 ####

// 在组件即将被挂载到页面的时刻自动执行，挂载完毕不再执行
      componentWillMount() {
        console.log('componentWillMount')
      }
       render() {
        console.log('parent render');
        return //JSX
      }
    // 组件被挂载到页面之后，自动被执行，挂载完毕不再执行
      componentDidMount() {
        console.log('componentDidMount')
      }
    
      // 组件被更新之前，自动被执行
      shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true;
      }
    
      // 组件被更新之前，它会自动执行，但是它在shouldComponentUpdate之后执行
      // 如果shouldComponentUpdate返回true它才执行
      // 返回false，这个函数就不会被执行了
      componentWillUpdate() {
        console.log('componentWillUpdate')
      }
    
      // 组件更新完成之后自动被执行
      componentDidUpdate() {
        console.log('componentDidUpdate')
      }

#### 子组件 ####

// 一个组件从父组件接收了参数
      // 如果这个组件第一次存在于父组件中，不会执行
      // 如果这个组件之前已经存在于父组件中，才会执行
      componentWillReceiveProps() {
        console.log('child componentWillReceiveProps')
      }
    
      // 当这个组件即将被从页面中剔除的时候，会被执行
      componentWillUnmount() {
        console.log('child componentWillUnmount')
      }

[clipboard.png]: /images/20220307/54115db87a9847a19212325079e3f029.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关 REACT_react生命周期

componentWillMount() { console.log('组件将要挂载'); }; componentDidMount()

本是古典何须时尚/ 2023年03月01日 09:37/ 0 赞/ 33 阅读

相关学习笔记——react的生命周期钩子函数

-------------------- > react的生命周期大体分为三个阶段：组件创建，组件更新，组件销毁。并且只有类组件才具有生命周期的钩子函数，函数组件没有。 !

Love The Way You Lie/ 2022年12月19日 01:22/ 0 赞/ 240 阅读

相关 React学习笔记五——组件的生命周期

生命周期的理解组件从创建到死亡会经历一些特定的阶段 React组件中包含了一系列的钩子函数（生命周期回调函数），会在特定的时刻调用我们在定义组件时，

桃扇骨/ 2022年10月09日 12:07/ 0 赞/ 205 阅读

相关 React 生命周期

目录 React 生命周期图一、生命周期路径一，初始化组件过程 1、getDefaultProps 2、getInitialState 3、componentWil

刺骨的言语ヽ痛彻心扉/ 2022年10月02日 06:52/ 0 赞/ 248 阅读

相关 React学习：生命周期、过滤器、event、axios-学习笔记

文章目录 React学习：生命周期、过滤器、event、axios-学习笔记生命周期过滤器

﹏ヽ暗。殇╰゛Y/ 2022年09月02日 00:54/ 0 赞/ 163 阅读

相关 React生命周期

转载：[React数据获取为什么一定要在componentDidMount里面调用？][React_componentDidMount] https://segment

拼搏现实的明天。/ 2022年05月21日 02:30/ 0 赞/ 310 阅读

相关 react生命周期

前言学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始

傷城~/ 2022年05月08日 12:08/ 0 赞/ 329 阅读

相关 React学习笔记2---生命周期

生命周期函数指在某一个时刻组件会自动调用执行的函数，React的生命周期函数主要有 Initialization(初始化） Mounting(挂载） U

痛定思痛。/ 2022年03月07日 02:48/ 0 赞/ 210 阅读

相关 react 学习：react 生命周期

一、图示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZ

曾经终败给现在/ 2022年02月19日 02:21/ 0 赞/ 304 阅读

相关 React生命周期

1、17版之前的生命周期图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

逃离我推掉我的手/ 2021年09月18日 14:32/ 0 赞/ 535 阅读