React的生命周期(16版本的)(上)

简介: React的生命周期(16版本的)

React中,生命周期有4个阶段,每个阶段又由不同的钩子函数组成。

  1. 初始化
  2. 运行中(更新阶段)
  3. 销毁
  4. 错误处理

初始化

在组件初始化阶段就会执行 ,由以下几个钩子函数构成


constructor

static getDerivedStateFromProps()

componentWillMount()/UNSAFE_componentWillMount

render()

componentDidMount()


constructor


在组件挂载之前执行,调用super(props),用来将父组件传来的props绑定到这个类中,使用this.props将会得到。


定义状态:状态初始化也可以有父组件传递过来的属性来进行赋值

    constructor (props) {
        super(props)
        this.state = {
            name : props.name
        }
        console.log('01-constructor')
    }

效果:页面一打开就会在控制台打印01-constructor


static getDerivedStateFromProps()


在组件实例化后,和接受新的props后被调用。他必须返回一个对象来更新状态,或者返回null表示新的props不需要任何state的更新。


  constructor (props) {
        super(props)
        this.state = {
           //name : props.name
        }
        console.log('01-constructor')
   }
  static getDerivedStateFromProps(){   //未来版本的componentWillMount()
        console.log('02-static getDerivedStateFromProps')
        return null   //必须返回一个对象来更新状态,或者返回null表示新的props不需要任何state的更新。
  }

效果:页面打开执行一次,改变state或者props执行一次

推演:

  • 可以将父组件传递过来的props来初始化一个state,再在子组件写方法修改state (不推荐)
    constructor (props) {
        super(props)
        this.state = {
            name : props.name
        }
        console.log('01-constructor')
    }
    changeName=()=>{
        this.setState({
            name : '妈妈'
        })
    }
render () {
    // let { changeName} = this.props
    let { name } = this.state
    return (
        <Fragment>
             <h3>初始化阶段---5个钩子函数</h3>
             <button onClick={ this.changeName }>改个称呼</button>
             <p>称呼ta为---{ name }</p>
        </Fragment>
    )
}

props的数据不会更改,state的数据可以修改,视图可以更新

  • 直接从props里取用数据和方法
    render () {
        let { changeName,name} = this.props
        return (
            <Fragment>
                 <h3>初始化阶段---5个钩子函数</h3>
                 <button onClick={ changeName }>改个称呼</button>
                 <p>称呼ta为---{ name }</p>
            </Fragment>
        )
    }

props更改了,state不会更改,视图可以更新

static getDerivedStateFromProps()还可以接收两个参数

    static getDerivedStateFromProps( nextProps,prevState ){   //未来版本的componentWillMount()
        console.log('nextProps',nextProps)
        console.log('prevState',prevState)
        console.log('02-static getDerivedStateFromProps')
        return null
    }

控制台输出

//页面一打开
nextProps {name: "爸爸", changeName: ƒ}
index.js:19 prevState {}
index.js:20 02-static getDerivedStateFromProps
//单击按钮修改了props
index.js:18 nextProps {name: "妈妈", changeName: ƒ}
index.js:19 prevState {}
index.js:20 02-static getDerivedStateFromProps

componentWillMount() ---组件即将挂载

注意:

static getDerivedStateFromProps vs componentWillMount他们功能是一致的,但是 前一个是未来版本使用, 后一个 未来版本将会被淘汰,但是现低版本用的都是它

作用:数据请求, 将请求来的数据赋值给当前组件的状态

    componentWillMount () {   //在未来版本被淘汰(官方说17版本)
        console.log('03-componentWillMount')
    }

当我们的实例化中有数据请求部分时,我们需要借助setTimeOut()来处理,将实例化仍在setTimeOut里,目的将其仍在异步队列里,让数据请求优先执行完成,在进行实例化,以swiper的例子来讲,我们让轮播的图片通过数据请求获得

componentDidMount(){
       fetch('/data.json')   //不是./
       .then(res=>res.json())
       .then(data=>{
           this.setState({
               data : data
           })
        setTimeout(()=>{//仍在异步队列里,就是在数据请求到后再实例化
            this.Swiper = new Swiper ('.swiper-container', {
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
                // 如果需要前进后退按钮
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                // 如果需要滚动条
                scrollbar: {
                  el: '.swiper-scrollbar',
                },
              }) 
        },0)
       })
   }

render()

当他被调用时,他将计算this.props和this.state,返回一个类型

componentDidMount() ---推荐用来做数据请求

- 组件装载结束,将VDOM 渲染成了真实DOM
- 操作真实DOM( 第三方实例化 )
- 数据请求 ( 阿里用 )
    componentDidMount () {
        console.log('05-componentDidMount')
    }

总结:

static getDerivedStateFromProps 和 render在初始化后还可以根据条件再次出发

static getDerivedStateFromProps vs componentWillMount他们功能是一致的,但是 前一个是未来版本使用, 后一个 未来版本将会被淘汰,但是现低版本用的都是它


相关文章
|
2月前
|
前端开发
react生命周期的一些坑
react生命周期的一些坑
|
2月前
|
前端开发 JavaScript 开发者
【第27期】一文了解React生命周期
【第27期】一文了解React生命周期
44 0
|
4天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建,引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载,对应不同方法,如`componentDidMount`、`shouldComponentUpdate`等,但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用,需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式,以构建高效应用。
|
11天前
|
前端开发 JavaScript
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
16 0
|
21天前
|
前端开发
React生命周期
React生命周期
11 0
|
2月前
|
前端开发 JavaScript 开发者
在React中,如何利用生命周期方法管理组件的状态和行为?
【5月更文挑战第29天】在React中,如何利用生命周期方法管理组件的状态和行为?
28 3
|
2月前
|
前端开发 JavaScript 调度
React的生命周期是什么
【5月更文挑战第29天】React的生命周期是什么
25 1
|
2月前
|
前端开发 JavaScript 开发者
React Hooks 是在 React 16.8 版本中引入的一种新功能
【5月更文挑战第28天】React Hooks 是在 React 16.8 版本中引入的一种新功能
38 1
|
2月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
30 0
|
2月前
|
前端开发 JavaScript
react生命周期函数
react生命周期函数
18 0