我要评论
庸人自扰之的意思,汽车违章查询,昆明到大理汽车时刻表
react应用在初始化和更新的过程中，会经过一系列的逻辑，react在不同的逻辑时期会执行不同的生命周期函数，用来给我们做一些处理。
这几个生命周期函数的用法如下:
对于componentwillmount和componentdidmount来说它们是没有参数的，而且一个组件挂载时只会执行一次。
举个栗子，需求:定义了两个组件:app组件和person组件，app组件引用了person组件并且传入了一个名为no的props,另外在app组件和person组件内都定义了一个button按钮，分别用于修改person组件的props和state变化，另外我们在person组件内分别定义了上面讲解到的4个生命周期函数，代码如下:
<div id="root"></div>
<script type="text/babel">
class person extends react.component{ //定义一个子组件person
constructor(props){
super(props);
this.state = {no:props.no+100}
}
componentwillmount(){
console.log('trigger:componentwillmounted');
}
componentdidmount(){
console.log('trigger:componentdidmount');
}
componentwillupdate(newprops,newstate){
console.log('trigger:componentdidmount newprops=',newprops,' newstate=',newstate)
}
componentdidupdate(newpros,newstate){
console.log('trigger:componentdidupdate');
}
render (){
return <div>
<button onclick={e=>this.setstate({no:this.state.no+1})}>子组件按钮(用于修改state)</button>
<p>props.no:{this.props.no}</p>
<p>state.no:{this.state.no}</p>
</div>
}
}
class app extends react.component{ //定义一个父组件app,它会引用子组件，并且修改子组件的props
constructor(props){
super(props)
}
state = {no:1}
render(){
return <div>
<button onclick={e=>this.setstate({no:this.state.no+1})}>父组件按钮(用于修改props)</button>
<person no={this.state.no} />
</div>
}
}
reactdom.render(<app/>,root)
</script>
最终页面渲染如下:
初始化时控制台打印如下:
表示在person组件加载过程中分别触发了componentwillmount和componentdidmount生命周期函数，因为我们在person组件就打印了这两个信息，然后我们点击第一个按钮，看看输出信息:
writer by:大沙漠 qq:22969969
父组件的按钮对应的事件是每次点击时传递的no递增1，我们可在person组件内的componentwillupdate内打印了newprops,可以看到no发生了变化，每点击一次，componentwillupdate触发一次，并且person组件的props.no递增了1。
同理，我们点击一下第二个按钮，会触发person组件的事件，会修改person组件的state,并触发重新渲染，如下:
同样的，点击后也触发了person组件内的componentwillupdate生命周期函数，将新的props和state打印了出来，我们可以看到state发生了变化。
componentwillupdate的第三个参数是context发生变化时新的context的值，有兴趣的自己写个demo测试一下就好了，我就不贴了。
对于这四个生命周期函数来说，我们只能在事件触发收做一些与主线无关的操作，什么是主线无关呢，比如componentwillupdate是react将要更新的时候触发的，我可不可以返回false,这样react就不会继续更新，而是停止下来了呢，react也提供了这样的生命周期函数，叫做shouldcomponentupdate生命周期函数，当然react还有其它的一些生命周期函数，我们一个个讲解。
转自：https://www.cnblogs.com/greatdesert/p/12851567.html
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论