React全家桶+共享单车实战开发—— 2-3 React生命周期介绍

一、React生命周期介绍

React生命周期包含哪些方法

• getDefaultProps    通过这个方法初始化Props属性,props为父组件或其他组件传递过来的值
• getInitialState     初始化当前组件的状态，这个状态会贯穿到整个项目当中，因为每次的UI 变化，元素变化，界面调整，都取决于setState完成
• componentWillMount    组件在加载初始化之前会调用这个方法
• render  react     项目最频繁使用的方法，元素之所以会出现，但是render的前提是，通过initialState来setState，从而去render UI
• componentDidMout     这个是组件DOM插入完以后会调用的方法
• componentWillReceiveProps     父组件属性的传递会调用的方法
• shouldComponentUpdate     只要调用setState放大就会调用这个Update方法
• componentWillUpdate      组件更新前
• componentDidUpdate       组件更新后
• componentWillUnmount    组件销毁

左边：单个组件   

首页通过 constructor() 初始化一个组件的实例， componentWillMount() 为组件渲染之间调用的方法，最终调用render:

调用render之后呢，通过componnetDidMount()再去更新，最后销毁组件，生命周期结束。

右边：多个组件

通过componentWillReceiveProps 拦截来自父组件的属性和方法，只要调用this.setStaate()就会调用shouldComponentUpdate()，。。。。。其余同上

二、通过项目演示生命周期

      以后项目开发使用Yarn,   启动项目也用Yarn，在package.json，dependencies为我们的依赖库，但是其实有很多，只是架手架把它隐藏掉了。scripts是它的命令行，start就是启动一个项目，项目开发完后用这个build进行打包，从而部署到我们的服务器上去。eject则是暴露我们的配置文件。

    首先我们启动一下上节课的项目， yarn start ,  结果如下图，

     在src下，我们建一个叫pages的文件夹，因为我们在做项目的过程中我们会有多个页面的，单页面应用程序中其实是有很多页面的，每个页面都是一个组件，我们先按实战规范建立严格目录。我们新建一个demo的文件件，接着，建一个Life.js文件，在里面，

     

1.  接下来，我们为按钮绑定事件

可参考：https://blog.csdn.net/wgf5845201314/article/details/89021597

index.js  内容为：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Life from './pages/demo/Life';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Life />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Life.js 内容为：

import React from 'react';

export default class Life extends React.Component{
    
    constructor(props){
        super(props);
        this.state ={
            count: 0
        };
    }

    handleAdd = ()=>{
       this.setState({
           count: this.state.count +1 
       })
    }

    handleClick (){
        this.setState({
            count: this.state.count +1
        })
    }
    
    render(){

       let style={
           padding:50
       }

        return <div style={style}>
            <p>React生命周期介绍</p>
            <button onClick={this.handleAdd}>点击一下</button>
            <button onClick={this.handleClick.bind(this)}>点击一下</button>
            <p>{this.state.count}</p>
        </div>
    }
}

注意上面两种事件绑定方法，推荐箭头函数，不小心会出现 this 指向错误的问题

2. 生命周期

建立子组件，如下：

  Child.js 子 组件内容为： 

import React from 'react'

export default class Child extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            count: 0
        };
    }

    //打印生命周期
    componentWillMount(){
        console.log('will mount')
    }

    componentDidMount(){
        console.log('Did mount')
    }

    componentWillReceiveProps(newProps){
        console.log('will props'+ newProps.name)
    }

    shouldComponentUpdate(){
        console.log('should update')
        return true;
        //一旦 return false 后面的生命周期方法就不会走了
    }

    componentWillUpdate(){
        console.log('will update')
    }

    componentDidUpdate(){
        console.log('did update')
    }
    render(){
        return <div>
            <p>这里是子组件，测试子组件的生命周期</p>
            <p>{this.props.name}</p>
        </div>
    }

}

Life.js 内容为：

import React from 'react';
import Child from './Child'
export default class Life extends React.Component{
    
    constructor(props){
        super(props);
        this.state ={
            count: 0
        };
    }

    handleAdd = ()=>{
       this.setState({
           count: this.state.count +1 
       })
    }

    handleClick (){
        this.setState({
            count: this.state.count +1
        })
    }
    
    render(){

       let style={
           padding:50
       }

        return <div style={style}>
            <p>这里是父组件</p>
            <p>React生命周期介绍</p>
            <button onClick={this.handleAdd}>点击一下</button>
            <button onClick={this.handleClick.bind(this)}>点击一下</button>
            <p>{this.state.count}</p>

            <Child name={this.state.count}></Child>
        </div>
    }
}

点击按钮可观察，生命周期变化