在React中,生命周期有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他们功能是一致的，但是 前一个是未来版本使用， 后一个 未来版本将会被淘汰，但是现低版本用的都是它
