赞
踩
react生命周期仅限于类组件使用(函数组件没有生命周期,引入的是hooks钩子),常见声明周期主要分为初始化、更新和销毁
在组件创建好dom元素,挂载进页面时调用 componentDidMount
比如案例:
- componentDidMount() { //组件初始化完成挂在到页面时执行的钩子
- fetch ("https://jsonplaceholder.typicode.com/users") //获取api假数据 此时获取到的数据是promise格式,需转化成json格式
- .then (response => response.json()) //将promise格式转换成json格式
- .then ((data) => this.setState( {robotGallery: data} )) //将data值赋值给robotGallery
- }
componentWillMount()
时机:组件被挂载到浏览器前,这时DOM树(html模板)已经创建完成(但没有渲染,这是DOM树中只有{}占位符)
作用:此时可以访问this.state和方法,当DOM树创建完毕后,会触发这个函数
对创建好的DOM树进行渲染,将数据或方法渲染上去compontDidMount()
时机:组件被挂载到浏览器后,这是DOM树已经创建完成
作用:此时可以访问this.state和方法(那么以下的钩子函数都可以访问this.state和方法),当DOM树渲染完毕后,会触发这个函数
将DOM树挂载到浏览器上componentWillReceiveProps()
时机:组件接收props数据前
作用:在接收到props数据更新后触发shouldComponentUpdate()
时机:组件接收到新的state或props,判断是否更新
作用:在新的state或props改变后,会触发这个函数,此时已经在内存中新建了一个虚拟DOM树,但访问的还是浏览器上的旧DOM树,只有return true才会将新建一个新的DOM树
根据返回值判断是否将新的DOM树进行渲染componentWillUpdate()
时机:新的组件更新到浏览器前
作用:在新的DOM树渲染完毕后,会触发这个函数
对新的DOM树进行渲染componentDidUpdate()
时机:新的组件更新到浏览器后
作用:新的DOM树已经挂载到浏览器上后,会触发这个函数,将新的DOM树挂载到浏览器上,这里可能用到diff算法
将新的DOM树挂载到浏览器上componentWillUnmount()
时机:组件销毁前
作用:在组件被销毁前会触发这个函数,
做好被销毁的准备
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。