React生命周期
react生命周期分为三个阶段—初始化阶段、运行中阶段、销毁阶段
react旧生命周期流程图如下：
初始化阶段
- componentWillMount: 组件将要挂载，初始化数据的作用，只调用一次 ， render之前最后一次修改状态的机会（不安全）
- render:挂载组件，只能访问this.props和this.state，不允许修改状态和DOM输出
- componentDidMount: 组件挂载完成，成功render并渲染完成真实DOM之后触发，可以修改DOM可以用于数据请求axios，订阅函数调用，给予创建的dom进行初始化，开启定时器
UNSAFE_componentWillMount(){ console.log("第一次将要挂载",this.state.name,document.getElementById('myname').innerHTML); // 第一次上树前的最后一次修改状态机会 this.setState({ name:'Kerwin' }) //初始化数据的作用 } componentDidMount(){ console.log('第一次已经挂载',document.getElementById('myname').innerHTML); // 数据请求axios // 订阅函数调用 // setInternal //基于创建的dom进行 初始化...BetterScoll }
运行中阶段
- componentWillUpdate: 更新前的数据状态（不安全），不能修改属性和状态
- componentDidUpdate：可以修改Dom，每次更新都会执行一次 含有两个属性：prevProps：旧的属性，prevState：旧的状态
- render：组件更新 shouldComponentUpdate： 决定是否进行更新：return true：应该更新，return false：阻止更新 含有两个参数：nextProps：新属性，nextState：新状态
- componentWillReceiveProps： 最先获得父组件传来的属性，父组件一修改便会触发（非首次）
componentWillUpdate和componentDidUpdate使用
// 不安全 UNSAFE_componentWillUpdate(){ console.log("componentWillUpdate",document.getElementById('myname').innerHTML); } // 每次更新都会执行一次 componentDidUpdate(prevProps,prevState){ //prevProps:老的属性 console.log("componentDidUpdate",document.getElementById('myname').innerHTML); // 更新后，想要获取dom节点，更新 new BScroll('#wrapper') console.log(prevProps,prevState); //进行判断，只调用一次 if(prevState.list.length === 0){ new BScroll("#wrapper") } }
shouldComponentUpdate的使用：
shouldComponentUpdate(nextProps,nextState){ // return true; //应该更新 // return false; //组织更新 // 老状态：this.state；新状态：nextState；新属性：nextProps // 通过状态的字符串是否一样来判断 if(JSON.stringify(this.state) !== JSON.stringify(nextState)){ return true; } else{ return false; } }
componentWillReceiveProps的使用：
UNSAFE_componentWillReceiveProps(nextProps){ console.log("componentWillReceiveProps", this.props.text,nextProps); // 最先获得父组件传来的属性，可以利用属性进行Ajax或逻辑处理 // 将属性转化为孩子自己的状态 this.setState({ title:nextProps.text }) }
销毁阶段
componentWillUnmount: 再删除组件之前进行清理作用，如清除挂载的定时器和事件监听器
componentDidMount(){ window.onresize=()=>{ console.log("resize"); } this.timer = setInterval(()=>{ console.log(1); },1000) } //进行销毁 componentWillUnmount(){ console.log("componentWillUNMount"); //取消监听事件 window.onresize=null //清除定时器 clearInterval(this.timer) }
老生命周期的问题
- componentWillMount 在ssr(服务器渲染)中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃。
- componentWillReceiveProps外部组件多次频繁更新传入多次不同的props，会导致不必要的异步请求
- componetwilupdate,更新前记录DOM状态，可能会做一些处理，与componentDidUpdate相隔时间如果过长，会导致状态不太信
新生命周期代替
新生命周期流程图：
static getDerivedStateFromProps ：从props得到一个派生状态，第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子)，返回一个对象作为新的state，返回null则说明不需要在这里更新state
// 适用于初始化和后续更新 static getDerivedStateFromProps(nextProps,nextState){ console.log('getDerivedStateFromProps',nextState); return { myname:nextState.myname } }
getSnapshotBeforeUpdate：在组件更新之前获取快照，即记录更新前的数据和状态，返回的值作为componentDidUpdate的第三个参数
componentDidUpdate = (prevProps, prevState,value) => { console.log("componentDidUpdate",value); //value:100 } getSnapshotBeforeUpdate(){ console.log('getSnapshotBeforeUpdate'); return 100 }
性能优化的方案
shouldComponentUpdate
控制组件自身或者子组件是否需要更新，尤其在子组件非常多的情况下，需要进行优化
PureComponent
PureComponent会帮你比较新props跟旧的props，新的state和老的state(值相等,或者对象含有相同的属性、且属性值相等），决定shouldcomponentUpdate返回true或者false，从而决定要不要呼叫render function。
import React, { PureComponent } from 'react' export default class App extends PureComponent { }
注意: 如果你的state或 props『永远都会变』，那 PureComponent并不会比较快，因为shallowEqual 也需要花时间。
重要的勾子
- render:初始化渲染或更新渲染调用
- componentDidMount：开启监听，发送axios请求
- componentWillUnmount：做一些收尾工作，如清理定时器和事件监听器
即将废弃的勾子
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
注：使用时会出现警告，需要加上UNSAFE_前缀才能使用，以后可能被弃用
希望能够对学习react的小伙伴们有所帮助，期待你们的支持哦✨✨✨
