目录
生命周期
函数列表
重要生命周期函数细解
分阶段看钩子的执行顺序(图解)
一、生命周期
二、函数列表
constructor()
-- 初始化 state 等
- static getDerivedStateFromProps()
shouldComponentUpdate()&React.PureComponent
-- 是否进行更新
render()
-- 创建虚拟 DOM
- getSnapshotBeforeUpdate
componentDidMount()
-- 组件已出现在页面
componentDidUpdate()
-- 组件已更新
componentDidWillUnmount()
-- 组件将死
- static getDerivedStateFromError()
- componentDidCatch()
三、重要生命周期函数细解
1、constructor
constructor(props);
- 初始化 props
- 初始化 state,但
此时不能调用setState
- 用来写
bind this
constructor(){
/* 省略不必要的代码 */
this.onclick=this.onclick.bind(this)
}
// 可用以下新语法代替
constructor(){
/* 省略其他不必要的代码 */
}
onclick=()=>{}
- 可不写,但写了就必须写全
2、shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState)
# next就是new => 就是新的数据
- 返回 true 表示让 UI 更新
- 返回 false 表示阻止 UI 更新
将newState的每个属性和this.state作对比,某个不等就更新,否则不更新。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
n: 1,
};
}
shouldComponentUpdate(newProps, newState) {
if (newState.n === this.state.n) {
return false;
} else {
return true;
}
}
}
React.PureComponent:
这个是上面自己判断是否要更新的语法糖,如果继承的是 React.PureComponent 而不是 React.Component。那么它会自己判断是否需要更新(还是通过数据是否变化)
3、render
- 展示视图
return(<div>....</div>)
- 写的 HTML 只要一个根元素
- 如果 HTML 有多个根元素,需要用
<React.Fragment></React.Fragment>
包起来,可以缩写为<></>
- render 里面可以写
if...else语句
- render 里面可以写
?:表达式
- render 里面
不能直接写for循环,要用数组
- render 里面可以写
array.map(循环)
4、componentDidMount
componentDidMount();
- 在元素插入页面后执行代码,这些代码依赖 DOM
此处可以发起加载数据的AJAX请求(官方推荐)
- 首次渲染会执行此钩子
- 你如果想获取 div 的高度,最好在这里写
5、componentDidUpdated
componentDidUpdate(prevProps, prevState, snapshot);
- 在视图更新后执行代码
- 此处也可发起 AJAX 请求,用于
更新数据
- 首次渲染不会执行此钩子
在此处setState可能会引起死循环(除了判断条件后)
- 若 shouldComponentUpdated()返回 false,则不会触发此钩子
6、componentWillUnmount
componentWillUnmount();
- 组件将要
被移除页面然后被销毁
时执行的代码
unmount过的组件不会再次mount
四、分阶段看钩子的执行顺序
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
- 找不到素材资源介绍文章里的示例图片?
- 对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
- 模板不会安装或需要功能定制以及二次开发?
- 请QQ联系我们
发表评论
还没有评论,快来抢沙发吧!