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
、forceUpdate()
的操作均会触发该函数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()