首页 / REACT / React学习（三）----- 组件的生命周期

React学习（三）----- 组件的生命周期

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了React学习（三）----- 组件的生命周期，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13147字，纯文字阅读大概需要19分钟。

内容图文

1、生命周期的引入

1、组件从创建到死亡它会经历一些特定的阶段。

2、React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。

3、我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2、React生命周期（旧）

图解：

技术分享图片

初始化阶段：由ReactDOM.render()触发 ----- 初次渲染（顺序为
constructor（构造器） -----
componentWillMount （组件将要挂载的钩子）-----
render（初次渲染） -----
componentDidMount（组件挂载完毕的钩子：常用的钩子一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息等）
）
更新阶段：由组件内部this.setSate()或父组件重新render触发
- 组件内部的setState正常更新触发（顺序为
  shouldComponentUpdate（控制组件更新的 “阀门” ，这个钩子如果不写默认返回true，如果写了必须有返回值，返回false时无法更新页面）-----
  componentWillUpdate（组件将要更新的钩子）-----
  render（初次渲染） -----
  componentDidUpdate(oldProps,oldState)（组件更新完毕的钩子）
  ）
- forceUpdate强制更新触发（顺序为
  componentWillUpdate（组件将要更新的钩子）-----
  render（初次渲染） -----
  componentDidUpdate(oldProps,oldState)（组件更新完毕的钩子）
  ）
  <button onClick={this.force}>不更改状态中的任何数据强制更新</button>
```
// 强制更新
force = () =>{
    this.forceUpdate()
}
```
- 父组件重新render触发（顺序为
  componentWillReceiveProps（组件将要接收新的props的钩子首次渲染不执行，这是一个坑，所以好多人呼吁应该重新命名为 "componentWillReceiveNewProps"）-----
  shouldComponentUpdate（控制组件更新的 “阀门” ，这个钩子如果不写默认返回true，如果写了必须有返回值，返回false时无法更新页面）-----
  componentWillUpdate（组件将要更新的钩子）-----
  render（初次渲染） -----
  componentDidUpdate(oldProps,oldState)（组件更新完毕的钩子）
  ）
卸载组件：由ReactDOM.unmountComponentAtNode()触发（顺序为
componentWillUnmount（组件将要卸载的钩子：常用的钩子一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息等）
）

父子组件生命周期钩子函数的执行顺序

父组件

class Parent extends React.Component{
          // 构造器          constructor(props){
              super(props)
              console.log(‘Parent-constructor‘)
              this.state = {
                  age:55
              }
          }
          // 组件将要挂载的钩子          componentWillMount(){
              console.log(‘Parent-componentWillMount‘)
          }
          // 组件挂载完毕的钩子          componentDidMount(){
              console.log(‘Parent-componentDidMount‘)
          }
          componentWillReceiveProps(){
            console.log(‘Parent-componentWillReceiveProps‘)
          }
          // 相当于一个 “阀门” ，这个钩子如果不写默认返回true，如果写了          shouldComponentUpdate(){
              console.log(‘Parent-shouldComponentUpdate‘)
              returntrue
          }
          // 组件将要更新的钩子          componentWillUpdate(){
              console.log(‘Parent-componentWillUpdate‘)
          }
          // 组件更新完毕的钩子          componentDidUpdate(){
              console.log(‘Parent-componentDidUpdate‘)
          }
          // 组件将要卸载的钩子          componentWillUnmount(){
              console.log(‘Parent-componentWillUnmount‘)
          }
          // 组件渲染          render(){
            console.log(‘Parent-render‘)
            let {age} = this.state
            return (
              <div>
                <div style={{width:‘300px‘,height:‘200px‘,border:‘1px solid #ccc‘}}>
                  <h2>我是爸爸，我今年{age}岁了！</h2>
                  <button onClick={this.handlerChange}>点我修改年龄</button>  
                </div>
                <Children {...this.state}/>
              </div>
            )
          }
          handlerChange = () => {
            let {age} = this.state;
            this.setState({
              age : age + 1
            })
          }
        }

View Code

子组件

 class Children extends React.Component{
          // 构造器          constructor(props){
              super(props)
              console.log(‘Children-constructor‘)
              this.state = {
                
              }
          }
          // 组件将要挂载的钩子          componentWillMount(){
              console.log(‘Children-componentWillMount‘)
          }
          // 组件挂载完毕的钩子          componentDidMount(){
              console.log(‘Children-componentDidMount‘)
          }
          // 组件将要接收新的props的钩子 首次渲染不执行          componentWillReceiveProps(props){
            console.log(‘Children-componentWillReceiveProps‘,props)
          }
          // 相当于一个 “阀门” ，这个钩子如果不写默认返回true，如果写了          shouldComponentUpdate(){
              console.log(‘Children-shouldComponentUpdate‘)
              returntrue
          }
          // 组件将要更新的钩子          componentWillUpdate(){
              console.log(‘Children-componentWillUpdate‘)
          }
          // 组件更新完毕的钩子          componentDidUpdate(){
              console.log(‘Children-componentDidUpdate‘)
          }
          // 组件将要卸载的钩子          componentWillUnmount(){
              console.log(‘Children-componentWillUnmount‘)
          }
          // 组件渲染          render(){
            console.log(‘Children-render‘)
            let {age} = this.props
            return (
              <div style={{width:‘300px‘,height:‘200px‘,border:‘1px solid #ccc‘,marginTop:‘10px‘}}>
                <h2>我是女儿~~~我的爸爸今年{age}了~~~</h2>
              </div>
            )
          }
        }

View Code

渲染

// 2、将组件渲染到页面上
ReactDOM.render(<Parent />,document.getElementById(‘box‘))

加载渲染的时候

Parent-constructor -----> Parent-componentWillMount -----> Parent-render -----> Children-constructor ----->  Children-componentWillMount -----> Children-render -----> Children-componentDidMount -----> Parent-componentDidMount

父组件更改传递给子组件的props时

Parent-shouldComponentUpdate -----> Parent-componentWillUpdate -----> Parent-render -----> Children-componentWillReceiveProps  -----> Children-shouldComponentUpdate -----> Children-componentWillUpdate -----> Children-render -----> Children-componentDidUpdate -----> Parent-componentDidUpdate

子组件更新state的时候

Children-shouldComponentUpdate -----> Children-componentWillUpdate -----> Children-render -----> Children-componentDidUpdate

生命周期钩子函数的执行次数

1）react生命周期函数中有哪些生命周期函数只会执行一次？？？
    constructor -----> componentWillMount -----> componentDidMount -----> componentWillUnMount
2)react生命周期函数中有哪些生命周期函数会执行多次？
    componentWillRecevieProps -----> shouldComponentUpdate -----> componentWillUpdate -----> render -----> componentDidUpdate
3)key值变化时执行的生命周期函数
    componentWillUnmount -----> componentWillMount -----> render -----> componentDidMount

3、React生命周期（新）

新旧生命周期钩子函数的对比

引入的js文件版本为：17.0.2

https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.development.js
https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js

有三个钩子函数即将废弃，会出现警告，解决方法是

1）UNSAFE_componentWillMount
2）UNSAFE_componentWillUpdate
3）UNSAFE_componentWillReceiveProps

技术分享图片

新增了两个钩子函数

getDerivedStateFromProps（获取一种派生状态 ----- 即让state的值在任何时候都取决于props）没啥意义

// 若state的值在任何时候都取决于props，那么可以使用，而且不可以被修改了static getDerivedStateFromProps(props,state){
    console.log(‘MyComponent-getDerivedStateFromProps‘,props,state)
    return props
}

getSnapshotBeforeUpdate（在更新之前获取“快照”）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .list{
      width: 200px;
      height: 150px;
      background-color: aquamarine;
      overflow: auto;
    }
    .news{
      height: 30px;
    }
  </style>
</head>
<body>
   <!-- 容器 -->
    <div id="box"></div>

    <!-- 引入React的核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入React的扩展库，用来渲染虚拟DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 将jsx转换为浏览器可以识别的js文件 并且自动开启严格模式-->
    <script src="../js/babel.min.js"></script>
    <!-- 引入propTypes 对组件标签属性的类型、必要性、默认值进行控制 -->
    <script src="../js/prop-types.js"></script>

    <script type="text/babel">
        // 1、创建组件        class NewsList extends React.Component{
            // 定义在类MyComponent上
            static propTypes = {

            }
            static defaultProps = {

            }
            // 构造器            constructor(props){
                console.log(‘MyComponent-constructor‘)
                super(props)
                this.state = {
                  newsList :[]
                }
            }
            componentDidMount(){
              this.timer = setInterval(()=>{
                // 获取原列表
                let {newsList} = this.state;
                // 模拟一条新闻
                const news = ‘新闻‘ + (newsList.length + 1)
                // 更新状态this.setState({
                  newsList : [news,...newsList]
                })
              },500)
            }
            getSnapshotBeforeUpdate(){
              console.log(‘getSnapshotBeforeUpdate‘)
              const {list} = this.refs;
              return list.scrollHeight
            }
            componentDidUpdate(oldProps,oldState,snapshotValue){
              console.log(‘componentDidUpdate‘,oldProps,oldState,snapshotValue)
              this.refs.list.scrollTop += this.refs.list.scrollHeight - snapshotValue
            }
            render(){
              let {newsList} = this.state
              return (
                <div className="list" ref="list">
                  {
                    newsList.map((el,index)=>{
                      return <div className="news" key={index}>{el}</div>
                    })
                  }
                </div>
              )
            }
        }
        // 2、将组件渲染到页面上
        ReactDOM.render(<NewsList />,document.getElementById("box"))
    </script>
</body>
</html>

View Code

初始化阶段：由ReactDOM.render()触发 ----- 初次渲染（顺序为：
constructor -----
getDerivedStateFromProps -----
render -----
componentDidMount（组件挂载完毕的钩子：常用的钩子一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息等）
）
更新阶段
- 组件内部的setState正常更新触发（顺序为
  getDerivedStateFromProps -----
  shouldComponentUpdate（控制组件更新的 “阀门” ，这个钩子如果不写默认返回true，如果写了必须有返回值，返回false时无法更新页面）-----
  render（初次渲染） -----
  getSnapshotBeforeUpdate -----
  componentDidUpdate(oldProps,oldState,snapshotValue)（组件更新完毕的钩子）
  ）
- forceUpdate强制更新触发（顺序为
  render（初次渲染） -----
  getSnapshotBeforeUpdate -----
  componentDidUpdate(oldProps,oldState,snapshotValue)（组件更新完毕的钩子）
  ）
- 父组件重新render触发（顺序为
  getDerivedStateFromProps -----
  shouldComponentUpdate（控制组件更新的 “阀门” ，这个钩子如果不写默认返回true，如果写了必须有返回值，返回false时无法更新页面）-----
  render（初次渲染） -----
  getSnapshotBeforeUpdate -----
  componentDidUpdate(oldProps,oldState,snapshotValue)（组件更新完毕的钩子）
  ）
销毁阶段：由ReactDOM.unmountComponentAtNode()触发（顺序为
componentWillUnmount（组件将要卸载的钩子：常用的钩子一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息等）
）

图解

技术分享图片

4、补充知识（DOM的Diff算法）

index作为key可能产生的问题

若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ===> 界面效果没问题，但效率低

示例

<!--
 * @Descripttion: 
 * @version: 
 * @Author: 北栀女孩儿
 * @Date: 2021-08-30 09:28:15
 * @LastEditTime: 2021-09-01 09:26:30
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 容器 -->
    <div id="box"></div>

    <!-- 引入React的核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入React的扩展库，用来渲染虚拟DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用来将jsx转换为浏览器可以识别的文件 -->
    <script src="./js/babel.min.js"></script>
    <!-- 引入propTypes，对标签属性的类型、必要性以及默认值进行控制 -->
    <script src="./js/prop-types.js"></script>

    <script type="text/babel">
    /*
        经典面试题：
          1) vue/react中的key有什么作用？？？(key 的内部原理是什么？？？)
          2) 为什么遍历列表时，key最好不要用index
        1.虚拟 DOM 中key的作用
          1) 简单的说：key是虚拟 DOM 对象的标识，在更新显示时key起着极其重要的作用；
          2) 复杂的说：当状态中的数据发生变化时，React会根据【新数据】生成【新的虚拟 DOM 】
                      随后React进行【新虚拟 DOM 】与【旧虚拟 DOM 】的diff比较，比较规则如下：
                      
                    a) 旧虚拟 DOM 中找到了与新虚拟 DOM 相同的key：
                      (1)若虚拟 DOM 中内容没变，直接使用之前的真实DOM; 
                      (2)若虚拟 DOM 中内容变了，则生成新的真实DOM ,随后替换掉页面中之前的真实DOM
                    b) 旧虚拟 DOM 中未找到与新虚拟 DOM 相同的key：根据数据创建新的真实DOM ，随后渲染到页面上
        

        2、用index作为key可能引发的问题？？？
            1) 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ===> 界面效果没问题，但效率低
            2) 如果结构中还包含输入类的DOM ：会产生错误DOM更新 ===> 界面有问题
            3) 注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的


        3、开发中如何选择key？？？
            1) 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
            2) 如果确定只是简单的展示数据，用index也是可以的
    */// 1、创建组件        class Person extends React.Component{
            // 对标签属性的类型、必要性进行控制
            static propTypes = {

            }
            // 对标签属性的默认值进行控制
            static defaultProps = {

            }
            // 初始化数据
            state = {
               persons : [
                 {
                   id:‘1‘,
                   name:‘jerry‘,
                   age:‘18‘
                 },
                 {
                   id:‘2‘,
                   name:‘tom‘,
                   age:‘22‘
                 }
               ]
            }
            componentDidMount(){
              
            }
            render(){
                let {persons} = this.state
                {/*
                   慢动作回放：使用index索引值作为key
                      初始数据：
                          {id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
                      初始的虚拟DOM：
                          <li key=0>名字：jerry ----- 年龄：18</li>
                          <li key=1>名字：tom----- 年龄：22</li>
                      更新后的数据：
                          {id:‘3‘,name:‘wxh‘,age:‘25‘},{id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
                      新的虚拟DOM：
                          <li key=0>名字：wxh ----- 年龄：25</li>
                          <li key=1>名字：jerry ----- 年龄：18</li>
                          <li key=2>名字：tom----- 年龄：22</li>
                      
                
                */}
                return(
                    <div>
                      <h1>使用index作为key</h1>
                      <h2>展示人员信息</h2>
                      <button onClick={this.handlerClick}>添加一个人：wxh</button>
                      <ul>
                        {
                          persons.map((el,index)=>{
                            return <li key={index}>名字：{el.name} ----- 年龄：{el.age}</li>
                          })
                        }
                      </ul>
                      <hr />
                      <h1>使用id作为key</h1>
                      <h2>展示人员信息</h2>
                      <button onClick={this.handlerClick}>添加一个人：wxh</button>
                      <ul>
                        {
                          persons.map((el,index)=>{
                            return <li key={el.id}>名字：{el.name} ----- 年龄：{el.age}</li>
                          })
                        }
                      </ul>
                    </div>
                )
            }
            handlerClick = () => {
              let person = {
                id:‘3‘,
                name:‘wxh‘,
                age:‘25‘
              }
              this.setState({
                persons : [person,...this.state.persons]
              })
              console.log(this.state.persons)
            }
        }
        // 2、将组件渲染到页面上
        ReactDOM.render(<Person />,document.getElementById("box"))
    </script>
</body>
</html>

View Code

慢动作回放

慢动作回放：使用index索引值作为key
      初始数据：
          {id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
      初始的虚拟DOM：
          <li key=0>名字：jerry ----- 年龄：18</li><li key=1>名字：tom----- 年龄：22</li>
      更新后的数据：
          {id:‘3‘,name:‘wxh‘,age:‘25‘},{id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
      新的虚拟DOM：
          <li key=0>名字：wxh ----- 年龄：25</li><li key=1>名字：jerry ----- 年龄：18</li><li key=2>名字：tom----- 年龄：22</li>

如果结构中还包含输入类的DOM ：会产生错误DOM更新 ===> 界面有问题
- 示例
  View Code
  将前面显示的数据填入input之后，页面效果为：

技术分享图片

点击按钮加一个人，页面效果为：

技术分享图片

慢动作回放

慢动作回放：使用index索引值作为key
      初始数据：
          {id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
      初始的虚拟DOM：
          <li key=0>名字：jerry ----- 年龄：18<input type="text" /></li>
          <li key=1>名字：tom----- 年龄：22<input type="text" /></li>
      更新后的数据：
          {id:‘3‘,name:‘wxh‘,age:‘25‘},{id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
      新的虚拟DOM：
          <li key=0>名字：wxh ----- 年龄：25<input type="text" /></li>
          <li key=1>名字：jerry ----- 年龄：18<input type="text" /></li>
          <li key=2>名字：tom----- 年龄：22<input type="text" /></li>

id作为key

慢动作回放

慢动作回放：使用index索引值作为key
      初始数据：
          {id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
      初始的虚拟DOM：
          <li key=1>名字：jerry ----- 年龄：18</li>
          <li key=2>名字：tom----- 年龄：22</li>
      更新后的数据：
          {id:‘3‘,name:‘wxh‘,age:‘25‘},{id:‘1‘,name:‘jerry‘,age:‘18‘},{id:‘2‘,name:‘tom‘,age:‘22‘}
      新的虚拟DOM：
          <li key=3>名字：wxh ----- 年龄：25</li>
          <li key=1>名字：jerry ----- 年龄：18</li>
          <li key=2>名字：tom----- 年龄：22</li>

原文：https://www.cnblogs.com/wxh0929/p/15206567.html

内容总结

以上是互联网集市为您收集整理的React学习（三）----- 组件的生命周期全部内容，希望文章能够帮你解决React学习（三）----- 组件的生命周期所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1184202.html

来源：【匿名】

【上一篇】react router路由传参【下一篇】Reactv16.3.0:NewlifecyclesandcontextAPI

更多 ►

【React学习（三）----- 组件的生命周期】教程文章相关的互联网学习教程文章

react-生命周期【代码】【图】

组件的生命周期概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期；组件生命周期分为三部分：组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM render：第一次开始渲染真正的虚拟DOM，当ren...

reactjs组件的生命周期【图】

这里的组件指的是有状态组件，只有有状态组件才有this.state和生命周期函数React组件生命周期分为三部分： - **组件创建阶段**：特点：一辈子只执行一次 >constructor： > componentWillMount: > render： > componentDidMount: 页面加载发送ajax 或者进行dom操作 - **组件运行阶段**：按需，根据 props 属性或 state 状态的改变，有选择性的执行 0 到多次 > componentWillReceiveProps: > shouldComponentUpdate: ...

React学习（三）----- 组件的生命周期【代码】

1、生命周期的引入1、组件从创建到死亡它会经历一些特定的阶段。2、React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。3、我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。2、React生命周期（旧）图解：初始化阶段：由ReactDOM.render()触发 ----- 初次渲染（顺序为constructor（构造器） ----- componentWillMount （组件将要挂载的钩子）----- render（初次渲染） ----- componentDi...

react学习---生命周期学习和refs【代码】

写react组件的时候，我们写的都是jsx文件，那jsx到页面渲染成功这个过程发生了什么呢？首先通过react和babel编译将jsx转化为javascript对象，react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。生命周期挂载阶段的生命周期：componentWillMount 组件挂载开始之前，也就是render之前调用这个生命周期钩子componentDidMount 组件挂载完成以后，也就是 DOM 元素已经插入页面后调...

react生命周期总结【图】

当通过createClass创建了组件之后，该React组件就有了生命周期。通常一个React组件的生命周期可分为三个阶段：Mounting：挂载组件，也就是组件实例化ReciveProps：存在期，在这个时期组件的props和state会变化，重新渲染组件Unmounting：卸载组件，也就是组件被销毁 React在生命周期中提供了10种API： 1.getDefaultProps()：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。 2.getI...

【react】---17新增的生命周期【代码】

一、废除的生命周期　　官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本　　由于未来采用异步渲染机制，所以即将在17版本中去掉的生命周期钩子函数　　componentWillMount　　componentWillRecieveProps　　componentWIllUpdate 二、新增的生命周期　 static getDerivedStateFromProps(nextProps, prevState) {} 　　　　　　[d?‘ra?vd] 　　用于替换componentWillReceiveProp...

React Native 中组件的生命周期（转）【代码】

概述就像 Android 开发中的 View 一样，React Native（RN）中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶...

React ~ 生命周期【图】

react 生命周期　　React 的生命周期分为三个阶段：初始化、更新、销毁。初始化1、getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props3、componentWillMount()组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。4、 render()react...

react 生命周期【代码】

生命周期：一个组件在不同的时期会调用不同时期的函数接口（也就是对应的生命周期函数）react组件的生命周期总共提供了10个API。装载：依次执行以下函数：constructor -- 组件被加载前最先调用，只调用一次　　1、getDefaultProps --作用于组件类，只调用一次，设置默认的 props，对于引用值，会在组件中共享　　2、getIntialState -- 在ES6语法中废弃了这种写法，作用于组件实例，在组件被实例化的时候被调用一次，用于初始化每个...

react生命周期详解【图】

React的生命周期一共分为初始化阶段，更新以及销毁阶段。初始化表示组件在DOM树进行第一次渲染，更新表示组件重新渲染的过程；销毁表示组件从DOM中删除的过程React是一个用于构建用户界面的JavaScript库，它主要用于构建UI，它具有较高的性能而且代码逻辑非常简单。今天将要介绍的是React的生命周期，具有一定的参考作用，希望对大家有所帮助。【推荐课程：react教程】react生命周期分为三个阶段分别是：初始化阶段，更新阶段，销毁...

vue和react生命周期之间有何区别？（对比）【图】

本篇文章给大家带来的内容是关于vue和react生命周期之间有何区别？（对比），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 vue的生命周期如下图所示(很清晰)初始化、编译、更新、销毁二 vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>vue生命周期</title><script src="../js/vue.js"></script><meta name="viewpor...

Reactjs的生命周期是什么？reactjs生命周期的详细介绍【图】

本篇文章主要的讲述了关于reactjs的生命周期的介绍，还有关于react的setState机制介绍，下面就让我们看文章的正文内容吧生命体的周期是单一不可逆的，软件开发的生命周期会根据方法不同，在完成前重新开始生命周期一、初探生命周期React组件的生命周期根据广义定义描述，可以分为挂载、渲染和卸载。生命周期分两类：1）当组件在挂载或者卸载时2）当组件接受新数据时，即组件更新一）挂载或卸载1、组件挂载最基本过程：组件状态初始...

浅析React组件的生命周期（代码解析）【图】

本篇文章给大家带来的内容是关于浅析React组件的生命周期（代码解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。整个 React 生命周期有3个阶段：创建、更新、卸载，每个阶段有对应的工作和方法，我们可以看下面这个经典的图研究一下：第一阶段这是虚拟 DOM 创建的阶段，会依次执行 5 个方法，这 5 个方法中除了 render 方法，其余四个方法在整个生命周期中只调用 1 次，而且一定会调用 1 次：getDefaultPr...

从0到1实现React系列：生命周期和diff的实现【图】

本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/...)从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM从 0 到 1 实现 React 系列 —— 组件和 state|props生命周期先来回顾 React 的生命周期，用流程图表示如下：该流程图比较清晰地呈现了 react 的生命周期。其分为 3 个阶段 —— 生成期，存在期，销毁期。因为生命周期钩子函数存在于自定义组件中，将之前 _render 函数作...

React中生命周期使用详解

这次给大家带来React中生命周期使用详解，React中生命周期使用的注意事项有哪些，下面就是实战案例，一起来看一下。生命周期React 是一个由虚拟 DOM 渲染成真实 DOM 的过程，这个过程称为组件的生命周期。React 把这个周期划分为三个阶段，每个阶段都提供了 will 和 did 两种处理方式，will 是指发生前，did 是指发生后。Mounting：组件渲染过程componentWillMount()componentDidMount()Updating：组件更新过程componentWillReceiv...

REACT - 技术教程分类

React 教程 React 安装 React 元素渲染 React JSX React 组件 React State(状态) React Props React 事件处理 React 条件渲染 React 列表 & Keys React 组件生命周期 React AJAX React Refs react 全部

REACT - 最热教程

React如何从后端获取数据并渲染到前端？python基础教程：详解Python的Twisted框...详解各版本React路由的跳转的方法 react.js的批量添加与删除功能 Reactive-MongoDB 异步 Java Driver 解...javascript – React Native Router Fl...java – Spring 5的真实控制器示例：We...javascript – React Js – Flux中的状...java – Reactive Streams：Spring Web...javascript – 如何在ReactJS中重新加载...

首页 / REACT / React学习（三）----- 组件的生命周期

React学习（三）----- 组件的生命周期

内容导读

内容图文

内容总结

内容备注

内容手机端

【React学习（三）----- 组件的生命周期】教程文章相关的互联网学习教程文章

REACT - 技术教程分类

REACT - 最新教程

REACT - 最热教程