网站建设需要注意什么 知乎,常州建设公司网站,建设银行天津分行网站,怎样推广网站平台#x1f9c1;个人主页#xff1a;个人主页
✌支持我 #xff1a;点赞#x1f44d;收藏#x1f33c;关注#x1f9e1; 文章目录⛳React生命周期#x1f30b;初始化阶段#x1f463;运行中阶段#x1f3d3;销毁阶段#x1f3eb;新生命周期的替代#x1f69a;react中性…个人主页个人主页
✌支持我 点赞收藏关注
文章目录⛳React生命周期初始化阶段运行中阶段销毁阶段新生命周期的替代react中性能优化方案⛳React生命周期 初始化阶段
由 ReactDOM.render()触发 —— 初次渲染
componentWillMount() ⚡1. 组件将要被挂载第一次上树前render之前最后一次修改状态的机会 ⚡2. 初始化数据的作用 ⚡3. 清除计时器取消订阅 注意出现黄色警告可以写成
UNSAFE_componentWillMount(){}
//因为其旧版本componentWillMount优先级较低可以会被打断会再次执行不够安全render() 1. 正在渲染 2. 只能访问this.props和this.state,不允许修改状态和Dom输出 componentDidMount() 1. 组件挂载完毕成功render并渲染完成真实Dom之后触发可以修改Dom 2. 常用于: 数据请求、订阅函数调用、设置计时器、基于创建完的dom进行初始化 BetterSroll 3.语法componentDidMount() 运行中阶段
由组件内部 this.setState() 或 父组件重新render触发
componentWillReceiveProps() 1. 父组件修改属性触发最先获得父组件传来的属性可以利用属性进行ajax或者逻辑处理 2. 只能在子组件中使用 3. 可以将属性转化成孩子自己的状态 state{titlezhangsan
}
.......................
componentWillReceiveProps(nextProps){//this.props.text 老的属性//nextProps 新的属性this.setState({title:nextProps.text//可以将属性转化成孩子自己的状态})}shouldComponentUpdate() 1. 是否要进行修改数据 2. shouComponentUpdate(nextProps,nextState)两个参数第一个为新的属性第二个为新的状态 3. 返回true或false来控制组件是否更新 shouldComponentUpdate(nextProps,nextState){//this.state 老的状态nextState 新的状态/*if( 老的状态! 新的状态){return true;}*///如果state中既有对象又有数组需要比较较麻烦时可以将其转为字符串在进行比较if(JSON.stringify(this.state))! JSON.stringify(nextState){return true}return false;}注意给返回true时加上适合的条件会提高性能
componentWillUpdate() 将要改变数据 UNSAFE_componentWillUpdate(){}componentDidUpdate()
首次渲染不会执行该方法会在更新后被立即调用 1. 改变数据 2. 更新多次 3. 修改dom节点等一系列操作 componentDidUpdate(prevProps,prevState){//可以通过参数获得老的属性和状态console.log(prevProps,prevState.list);//更新后获取dom节点进行一系列操作if(prevState.list.length 0){new BetterScroll(#warpper)} console.log(componentDidUpdate,document.getElementById(myname).innerHTML);}注意这个时候已经二次render完了不存在nextPropsthis.props中已经是最新的数据了所以想得到最新的属性值直接通过this.props拿
销毁阶段
componentWillUnmount() 在删除组件之前进行清理操作比如计时器和事件监听器 新生命周期的替代 getDerivedStateFromProps 1. 静态方法第一次的初始化组件以及后续的更新过程中包括自身状态以及父传子返回一个对象作为新的state,返回null则说明不需要在这里更新state 2. 适用于 第一次 和 后续更新 都 重复的逻辑 state{myname:zhangsan}//componentWillMount 初始化static getDerivedStateFromProps(nextProps,nextState){return{//此处此myname将覆盖其他地方的mynamemyname:nextState.myname}}render() {return (divbutton onClick{(){this.setState({myname:lisi})}}click/button{this.state.myname}/div)}
}注意此方法中的属性 会覆盖 其他地方相同的属性即使再次进行render执行或this.setState修改
getSnapshotBeforeUpdate
取代了componentWillUpdate,触发时间为update发生的时候在render之后dom渲染之前 返回一个值作为componentDidUpdate的第三个参数
getSnapshotBeforeUpdate(prevProps,prevState){//组件能在发生更新之前从 DOM 中捕获一些信息例如滚动位置return aaa//snapshotValue
}
..............................
componentDidUpdate(preProps,preState,snapshotValue){console.log(snapshotValue)//aaa
}react中性能优化方案
shouldComponentUpdate 控制组件自身或者子组件是否需要更新尤其在子组件非常多的情况下需要进行优化 PureComponent PureComponent会帮你比较新props跟旧的props,新的state和老的state(值相等或者对象含有相同的属性、且属性值相等)决定shouldcomponentUpdate 返回true或者false,从而决定要不要呼叫render function import React, { PureComponent } from reactexport default class App extends PureComponent {}注意如果 state或props 永远都会变比如倒计时,但PureComponent并不会比较快因为shallowEqual也需要花时间
如有错误请评论指出thankyou~ ✨✨✨创作不易如对您有帮助欢迎给博主点赞收藏给予鼓励哟
