开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情

（旧）生命周期

引出生命周期

生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子

     <script type="text/babel">
         //创建组件
         //生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
         class Life extends React.Component{
 
             state = {opacity:1}
 
             death = ()=>{
                 //卸载组件
                 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
             }
 
             //组件挂完毕
             componentDidMount(){
                 console.log('componentDidMount');
                 this.timer = setInterval(() => {
                     //获取原状态
                     let {opacity} = this.state
                     //减小0.1
                     opacity -= 0.1
                     if(opacity <= 0) opacity = 1
                     //设置新的透明度
                     this.setState({opacity})
                 }, 200);
             }
 
             //组件将要卸载
             componentWillUnmount(){
                 //清除定时器
                 clearInterval(this.timer)
             }
 
             //初始化渲染、状态更新之后
             render(){
                 console.log('render');
                 return(
                     <div>
                         <h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
                         <button onClick={this.death}>不活了</button>
                     </div>
                 )
             }
         }
         //渲染组件
         ReactDOM.render(<Life/>,document.getElementById('test'))
     </script>

生命周期

生命周期（旧）.png

初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() => 常用一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() => 必须使用的一个
4. componentDidUpdate()
卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() => 常用一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

     <script type="text/babel">
         //创建组件
         class Count extends React.Component{
 
             //构造器
             constructor(props){
                 console.log('Count---constructor');
                 super(props)
                 //初始化状态
                 this.state = {count:0}
             }
 
             //加1按钮的回调
             add = ()=>{
                 //获取原状态
                 const {count} = this.state
                 //更新状态
                 this.setState({count:count+1})
             }
 
             //卸载组件按钮的回调
             death = ()=>{
                 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
             }
 
             //强制更新按钮的回调
             force = ()=>{
                 this.forceUpdate()
             }
 
             //组件将要挂载的钩子
             componentWillMount(){
                 console.log('Count---componentWillMount');
             }
 
             //组件挂载完毕的钩子
             componentDidMount(){
                 console.log('Count---componentDidMount');
             }
 
             //组件将要卸载的钩子
             componentWillUnmount(){
                 console.log('Count---componentWillUnmount');
             }
 
             //控制组件更新的“阀门”
             shouldComponentUpdate(){
                 console.log('Count---shouldComponentUpdate');
                 return true
             }
 
             //组件将要更新的钩子
             componentWillUpdate(){
                 console.log('Count---componentWillUpdate');
             }
 
             //组件更新完毕的钩子
             componentDidUpdate(){
                 console.log('Count---componentDidUpdate');
             }
 
             render(){
                 console.log('Count---render');
                 const {count} = this.state
                 return(
                     <div>
                         <h2>当前求和为：{count}</h2>
                         <button onClick={this.add}>点我+1</button>
                         <button onClick={this.death}>卸载组件</button>
                         <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                     </div>
                 )
             }
         }
         
         //父组件A
         class A extends React.Component{
             //初始化状态
             state = {carName:'奔驰'}
 
             changeCar = ()=>{
                 this.setState({carName:'奥拓'})
             }
 
             render(){
                 return(
                     <div>
                         <div>我是A组件</div>
                         <button onClick={this.changeCar}>换车</button>
                         <B carName={this.state.carName}/>
                     </div>
                 )
             }
         }
         
         //子组件B
         class B extends React.Component{
             //组件将要接收新的props的钩子
             componentWillReceiveProps(props){
                 console.log('B---componentWillReceiveProps',props);
             }
 
             //控制组件更新的“阀门”
             shouldComponentUpdate(){
                 console.log('B---shouldComponentUpdate');
                 return true
             }
             //组件将要更新的钩子
             componentWillUpdate(){
                 console.log('B---componentWillUpdate');
             }
 
             //组件更新完毕的钩子
             componentDidUpdate(){
                 console.log('B---componentDidUpdate');
             }
 
             render(){
                 console.log('B---render');
                 return(
                     <div>我是B组件，接收到的车是:{this.props.carName}</div>
                 )
             }
         }
         
         //渲染组件
         ReactDOM.render(<Count/>,document.getElementById('test'))
     </script>

React11-生命周期

（旧）生命周期

引出生命周期

生命周期