什么是反应生命周期

小编这次要给大家分享的是什么是反应生命周期,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

<强>组件挂载:

componentWillMount(组件将要挂载到页面)→渲染(组件挂载中)→componentDidMount(组件挂载完成后)

<强>组件更新:

1, shouldComponentUpdate(使之前执行,参数为真时执行呈现,为假时不执行渲染)

componentWillUpdate (shouldComponentUpdate之后执行)

componentDidUpdate(使之后执行)

顺序:shouldComponentUpdate——》componentWillUpdate -》呈现》componentDidUpdate

进口反应,{组件,片段}& # 39;反应# 39;;
　　从& # 39;进口清单。/List.js& # 39;;
　　
　　类测试扩展组件{
　　构造函数(道具){
　　超级(道具);
　　this.state={
　　inputValue: & # 39; aaa # 39;
　　列表:[& # 39;睡觉& # 39;,& # 39;打游戏& # 39;],
　　}//this.add=this.add.bind(这个);
　　}
　　
　　addList () {
　　this.setState ({
　　列表:[…this.state.list, this.state.inputValue],
　　inputValue: & # 39; & # 39;
　　}）
　　}
　　
　　改变(e) {
　　this.setState ({//inputValue: e.target.value
　　inputValue: this.input.value
　　})
　　}
　　
　　删除(我){//console.log(我);
　　常量列表=this.state.list;
　　list.splice(我,1);
　　this.setState ({
　　列表:
　　}）
　　}//组件将要挂载到页面时
　　componentWillMount () {
　　console.log (& # 39; componentWillMount& # 39;);
　　}//组件完成挂载后
　　componentDidMount () {
　　console.log (& # 39; componentDidMount& # 39;);
　　}//组件被修改之前,参数为真时执行呈现,为假时不往后执行
　　shouldComponentUpdate () {
　　console.log (& # 39; 1-shouldComponentUpdate& # 39;);
　　返回true;
　　}//shouldComponentUpdate之后
　　componentWillUpdate () {
　　console.log (& # 39; 2-componentWillUpdate& # 39;);
　　}//渲染执行之后
　　componentDidUpdate () {
　　console.log (& # 39; 4-componentDidUpdate& # 39;);
　　}//组件挂载中
　　呈现(){
　　console.log (& # 39; 3-render& # 39;);
　　回报(
　　& lt; Fragment>
　　& lt; div>
　　& lt;输入ref={(输入)=祝辞{。输入==https://www.yisu.com/zixun/{this.state.inputValue}}}值>进口反应,{组件}& # 39;反应# 39;;
　　从& # 39;进口proptype prop-types& # 39;;
　　
　　类列表扩展组件{
　　构造函数(道具){
　　超级(道具);
　　this.delete=this.delete.bind(这个);
　　}//组件第一次存在于虚拟dom中,函数不会被执行//如果已经存在于dom中,函数才会执行
　　componentWillReceiveProps () {
　　console.log (& # 39; componentWillReceiveProps& # 39;);
　　}//子组件被删除时执行
　　componentWillUnmount () {
　　console.log (& # 39; componentWillUnmount& # 39;);
　　}
　　
　　呈现(){
　　回报(
　　李& lt;>进口反应,{组件}& # 39;反应# 39;;
　　从& # 39;进口proptype prop-types& # 39;;
　　
　　类列表扩展组件{
　　构造函数(道具){
　　超级(道具);
　　this.delete=this.delete.bind(这个);
　　}//组件第一次存在于虚拟dom中,函数不会被执行//如果已经存在于dom中,函数才会执行
　　componentWillReceiveProps () {
　　console.log (& # 39; componentWillReceiveProps& # 39;);
　　}//子组件被删除时执行
　　componentWillUnmount () {
　　console.log (& # 39; componentWillUnmount& # 39;);
　　}
　　
　　shouldComponentUpdate (nextProps nextState) {
　　如果(nextProps。内容!==this.props.content) {
　　返回true;
　　其他}{
　　返回错误;
　　}
　　}
　　
　　呈现(){
　　回报(
　　李& lt;>看完这篇关于什么是反应生命周期的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。
什么是反应生命周期