React组件的生命周期函数是什么-tutorial js-php.cn

React组件的生命周期函数是什么

一个新手

Lepaskan： 2017-09-29 09:26:28

asal

1844 orang telah melayarinya

每一个组件都有一些生命周期函数。

当组件实例被创建并且会插入到DOM中，下面这些函数会被调用

constructor
componentWillMount
render
componentDidMount

Salin selepas log masuk

改变组件的state或props会导致更新，当重新渲染组件时会调用下面这些方法

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

Salin selepas log masuk

当组件从DOM中移除，会调用下面的方法

componentWillUnmount

Salin selepas log masuk

一.render()

render方法是必须的，render的返回值是下面的类型：
(1)react元素：要么是自定义的组件要么是原生的DOM组件
(2)字符串或者数字:会被渲染成DOM中的文本节点
(3)Portals:通过ReactDOM.createPortal创建
(4)null:什么都不会渲染
(5)Boolean:什么都不渲染
(6)包含多个元素的数组

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

Salin selepas log masuk

render方法应该是简单的，在render中不能修改组件的state，每一次调用render都会返回一个新的结果。并且在render中也不能与浏览器进行交互，如果需要与浏览器交互，就在componentDidMount或者其他生命周期函数中执行。

二.constructor(props)

react组件的构造函数在组件装载之前调用。如果没有显示的定义constructor，那么在实例化组件时会调用默认的constructor，如果在React.Component的子类中显示的定义了constructor，那么就要在constructor中最开始调用super(props).
在构造函数中实例化state是一个很好的选择。下面举例一段代码

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

Salin selepas log masuk

在react中使用props初始化state是合法的，但是这存在一个问题：当props被更新时，state并不会被更新。解决的方法是：在组件的componentWillReceiveProps(nextProps)中用新的props更新state。虽然这能解决问题，但是并不推荐，推荐把state提升到最近的公共父组件中

三.componentWillMount()

当装载发生之前会立即调用componentWillMount,componentWillMount会在调用render之前被调用，所有在componentWillMount中修改state，不会导致组件的重新渲染。服务器端渲染才会调用这个方法，所有推荐通过constructor代替这个方法。

四.componentDidMount()

当组件被装载完成会立即触发componentDidMount，在这个函数中修改state被导致组件重新渲染。组件被装载之后才能操作DOM。如果你需要加载远程数据，在这个地方发送网络请求是个不错的主意.

五.componentWillReceiveProps(nextProps)

当已经被转载的组件接受新的props之前componentWillReceiveProps会被触发。如果你需要更新state去响应props的更新，可以在这里通过setState方法更新state。当组件首次接受到props，这个方法不会被调用.
注意：props没有被改变也可能会调用这个方法，所有在这个方法中将当前的props去next props进行比较是很有必要的。

六.shouldComponentUpdate(nextState,nextProps)

当新的props或state被接受，在渲染之前会调用shouldComponentUpdate，这个方法默认是返回true，初次渲染和使用forceUpdate，不会调用这个方法。如果shouldComponentUpdate返回false,之后的componentWillUpdate,render以及componentDidMount不会被调用,组件以及他的子组件不会被重新渲染。