锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / React / React销毁期和React反模式
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

销毁期


componentWillUnmount

每当 React 使用完一个组件,这个组件必须从 DOM 中卸载后被销毁,此时 componentWillUnmout 会被执行,完成所有的清理和销毁工作,在 conponentDidMount 中添加的任务都需要再该方法中撤销,如创建的定时器或事件监听器。

当再次装载组件时,以下方法会被依次调用:

  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

当组件要被挂载时这个函数被调用。这意味着我们可以在此运行组件功能必须的代码。为由于 render 在组件生命周期里被多次调用,我们一般会把只需要执行一次的代码放在这里,比如 XHR 请求。

var ExampleComponent = React.createClass({
componentWillMount: function () {
// xhr request here to get data
},
render: function () {
// this gets called many times in a components life
return (
<div> 
Hello World!
</div>
);
}
});

反模式


在 getInitialState 方法中,尝试通过 this.props 来创建 state 的做法是一种反模式。

//反模式getDefaultProps: function(){    
return {          
data: new Date()      
}  
},  
getInitialState: function(){    
return {          
day: this.props.date - new Date()      
}  
},  
render: function(){    
return <div>Day:{this.state.day}</div>}

经过计算后的值不应该赋给 state,正确的模式应该是在渲染时计算这些值。这样保证了计算后的值永远不会与派生出它的 props 值不同步。

//正确模式getDefaultProps: function(){    
return {          
data: new Date()      
}  
},  
render: function(){    
var day = this.props.date - new Date();    
return <div>Day:{day}</div>}

如果只是简单的初始化 state,那么应用反模式是没有问题的。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内