1.render
render是React生命周期函数中必须调用的方法,render主要负责页面的渲染,页面初始加载就会先调用render()一次。
当render被调用时,它会检查this.props和this.state的变化并且返回以下类型:
- React元素。通过jsx创建,比如说<div />会被渲染为react节点,<MyComponent />会被渲染成自定义组件。无论是<div />还是<MyComponent />都时react元素
- 数组或是Fregrament
- Protals。可以将子元素渲染到任何DOM树中,一般默认将子元素渲染到DOM节点中最近的父节点。
- 文本节点,字符串或是数值类型
- 布尔型或者是Null。什么都不渲染
当shouldComponentUpdate 返回值为false时,默认页面不更新,便也不会调用render方法
2. constructor
constructor是react中的构造函数,一般如果没有数据初始化就不用单独调用,在其他语句之间必须写,super(props),props可以理解为形式参数。
props在react官方文档中的定义:“当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”。”
在react中,构造函数仅处理以下两种情况
- this.state()初始化
- 为事件处理函数进行实时绑定,一般也不怎么用,将函数定义写为箭头函数,一般不存在this指向绑定的问题
3.componentDidMount
componentDidMout()当组件挂载完毕(插入到DOM)后,会被立即调用。常常将依赖于Dom节点初始化的事件写在这里,比如网络请求获取数据,写在这里很合适。这里也比较适合添加订阅模式,但是在componentWillUnMount要记得取消订阅。
4.componentDidUpdate
componentDidUpdate()会在更新完成后被立即调用,首次渲染不会执行此方法。
当组件完成更新后,可以在此处进行DOM操作。如果对更新前后进行了props的比较,可以在此处进行网络请求(当props没有发生变化就不会执行网络请求)
componentDidUpdate(prevProps){
if(this.props.ID != prevProps){
this.fetchDate(this.props.ID)
}
}
注意:如果在componentDidUpdate()中使用this.setState()必须包裹在条件语句中,避免进入死循环。
5.componentWillUnmount
componentWillUnmount()会在组件销毁之前被调用。在此方法中主要进行清理工作,比如清除timer、取消订阅者模式(如果在componentDidMount()发布了订阅模式)或是取消网络请求
不常用的生命周期函数
1.getDrivedStateFromprops
2.getSnapshotBeforeUpdate
3.shouldComponentUpdate常用于性能优化
在面试中经常会被问到,该函数主要用于优化性能。防止render进行多次渲染,消耗性能。