React使用 - 常用生命周期函数、受控组件与非受控组件

React生命周期
生命周期: 就是指某个事物从开始到结束的各个阶段。

React生命周期：在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数。

作用：通过这些函数，我们可以更加精确的对组件进行控制。前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数

注意：React生命周期的新旧方法之间，不可以同时存在。否则报错

生命周期函数详解
常用生命周期函数
1、挂载阶段
constructor(props)
类的构造函数，也是组件初始化函数，一般会在这个阶段做一些初始化的工作
(1) 初始化 state
(2) 处理事件绑定函数的 this

export default class Person extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
    name: 'tom', age: 18 }
        this.clickFn = this.clickFn.bind(this);
    }
    clickFn() {
   
        console.log(this);
        this.setState({
    nickname: '哈皮' });
    }
    render() {
   
        let {
    name, nickname } = this.state;
        return (
            <div>
                <p>{
   name}</p>
                <p>{
   nickname}</p>
                <button onClick={
   
                    this.clickFn
                }>
                    点击按钮
         </button>
            </div>
        );
    }
}

render()
render 方法是 Class 组件必须实现的方法

 export default class Test extends Component {
   
     render() {
   
         return (<div>hello,good morning</div>);
     }
 }

2、更新阶段
static getDerivedStateFromProps(props, state)
该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，
它的存在只有一个目的：让组件在 props 变化时更新 state

export default class App extends Component {
   
    state = {
   
        address: '中国',
        city: '北京'
    }
    static getDerivedStateFromProps(nextProps, prevState) {
   
        //console.log(nextProps);
        //console.log(prevState);
        if (nextProps.city !== prevState.city) {
   
            return {
   
                city: nextProps.city
            }
        }
        return null;
    }
    updateAddress = () => {
   
        this.setState({
   
            city: '天津'
        })
    }
    render() {
   
        let {
    city } = this.state;
        return (
            <div>
                amazing
                <p>{
   city}<</