我的react之路 -2 关于生命周期

关于在挂载阶段的生命周期

钩子函数是只有在类组件里面才拥有钩子函数
在react中具有三个周期阶段 分别为挂载，更新和卸载
其中在挂载阶段会执行四次函数 分别是: 1、 constructor 2、 getDerivedStateFromProps 3、render 4、componentDidMount 这也是他们的执行顺序

第一个更新阶段钩子函数 constructor

这个钩子函数是最先执行的钩子函数 ，如果需要初始化state,则在里面进行state的初始化 ，因为是类组件所以需要利用super来继承类组件的props，即方法 ， 同时可以在这里进行下列方法名的绑定也可以利用es6的箭头函数来规避部分this的只想问题
具体代码如下

constructor(props) {
  super(props);
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}
handleClick (){
console.log(this.props)
}
//或者
handleClick= ()=>{
console.log(this.props)
}

其二 getDerivedStateFromProps

会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
这个方法一般很少使用

其三 render

渲染函数
render() 方法是 class 组件中唯一必须实现的方法。

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

React 元素。通常通过 JSX 创建。
它们在 DOM 中会被渲染为文本节点
布尔类型或 null。什么都不渲染。如：

render(){
return <div><h1>你好哇</h1></div>
}

其四 componentDidMount

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。因为是异步的所以是发起网络请求获取数据的好地方。

componentDidMount(){
getDate(){
axios.get(网址){res =>console.log(res)}
}
}

疫情期间在家逆战重温学习只为不断探索
欢迎多多评论探讨 指教