react 组件的生命周期 --- --- 挂载阶段

react 生命周期

挂载介绍

官方文档

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

• constructor() 构造器
  • 通过给 this.state 赋值对象来初始化内部 state。
  • 为事件处理函数绑定实例
• static getDerivedStateFromProps()
  • 在初始挂载及后续更新时都会被调用
  • 它应返回一个对象来更新 state
• render()
  • 方法是 class 组件中唯一必须实现的方法
• componentDidMount()
  • 会在组件挂载后（插入 DOM 树中）立即调用
  • 如需通过网络请求获取数据，此处是实例化请求的好地方

效果展示

constructor()

constructor(props) {
  super(props);
  // 不要在这里调用 this.setState()
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

• （）里面是可以接收父组件传递过来的 props数据
• 可以在这里改变函数的this指向
• 里面不要写 this.setState({... ...})
• 如果你的这个组件是子组件的话一定要有 super()
• 在页面刚运行的时候它就开始运行(子组件是当调用到它的时候立即执行)

static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state){
	return {
		ziNum:props.fuNum
	}
}

• 一般写在子组件里面，使用 父组件的数据对他进行控制，不让子组件本身进行控制
• 一定要写 static return
• return 里面是state 的键，是的，直接写就行
• props.num 是根据父组件传递过来的消息进行赋值
• constructor、props、setState、force­Update() 的操作均会触发该函数
• props 是父组件传递过来的值
• state 是该子组件定义的state
• 在子组件中调用 setState() 来更改数据的值依然会调用该函数，而且调用后返回的依然是 return 里面的值，所以使用 setState并没有任何效果（这也是该函数的主要功能）
• 当数据发生改变的时候会 同时触发 getDerivedStateFromProps() 与render()

render()

    render() {
        console.log("render")
        return (
            <div>
                <li>{this.state.num}</li>
            </div>
        )
    }

• 学习 react 框架第一个看到的就是它，并不陌生
• 用于渲染页面

componentDidMount()

    componentDidMount(){
        axios.get("http://www.xxx.com?name=zhangsan&age=18").then(res=>{console.log(res)})
    }

• 会在组件挂载后（插入 DOM 树中）立即调用。
• 依赖于 DOM 节点的初始化应该放在这里。
• 如需通过网络请求获取数据，此处是实例化请求的好地方
• 可以在 componentDidMount() 里直接调用 setState()