3.React生命周期方法
- componentWillUpdate()
当组件再次渲染时（非初始化），在render()方法前调用（在组建的props或者state发生改变时会触发该方法）。
- componentDidUpdate()
在render()函数执行完毕，且更新的组件已被同步到DOM后立即调用。（初始化不会触发）
- componentWillMount()
在新节点插入DOM结构之前触发。
- componentIDidMount()
在新节点插入DOM结构之后触发。
- componentWillUnmount()
【3.React生命周期方法】在组件从DOM中移除时立刻触发。
var textAreaCounter = React.createClass({
propType: {
text: React.PropTypes.string.isRequired,
},
shouldComponentUpdate(newProps,newState){
console.log("shouldComponentUpdate（触发）")
return true
},
componentWillUpdate(){
console.log("componentWillUpdate",arguments)
},
componentDidUpdate(){
console.log("componentDidUpdate",arguments)
},
componentWillMount(){
console.log("componentWillMount",arguments)
},
getDefaultProps: function () {
return {
text: 'nima'
}
},
getInitialState:function(){
return {
text:this.props.text,
}
},
_textChange:function(ev){
this.setState({
text:ev.target.value
})
},
render: function () {
console.log("render触发")
return React.DOM.div(null,
React.DOM.textarea(
{
//defaultValue:'默认值',//设置默认值，且数据不受控制
value:this.state.text, //和defaultValue只能选择其一
onChange:this._textChange,
}
),
React.DOM.h3(null, this.state.text.length)
)
},
});
var myTextAreaCounter =ReactDOM.render(
React.createElement(textAreaCounter, {
text: 'Bob'
}),
document.getElementById('app'),
function () {
console.log("组件装载完毕")
}
)
- shouldComponentUpdate(newProps,newState)
这个方法在componentWillUpdate()之前触发，给你一个机会返回false以取消更新组件。
//该组件将不会再更新视图
shouldComponentUpdate(newProps,newState){
console.log(newProps,newState)
return false
}
当你输入时：
文章图片
推荐阅读
- 活着就是生命的全部意义
- 生命过客——第10章|生命过客——第10章 初为人母
- 生命的活力！2019-05-04好事
- 生命中最迷人的部分轻拿轻放
- 日更82/365珍视生命中的每一刻
- 克里希那穆提《生命书》新译（8月15日）（心与念的二元分裂）
- 投资最重要的事之七——关注周期
- 积极探索|积极探索 绽放生命 ???——心心相印计划:青少年心理工作研讨小组全国大型公益行动第二次活动包头市青山区分校圆满成功
- 感恩生命中的所有遇见
- 努力让自己变得更具生命力