阅读 3674
react 生命周期详解

react 生命周期详解

react 生命周期详解(React Lifecycle)

React的生命周期对组件而言是一个很重要的存在,每一个状态都有其重要的作用。

第一次Redner

首次渲染执行的顺序如图上

getDefaultProps相当于ES6中staticdefaultProps = {}
getInitialState相当于constructor中的 this.state = {}
复制代码

Props 改变

State 改变

组件卸载

自定义组件的3个阶段

自定义组件的主要通过3个阶段来管理,分别是MOUNTINGRECEIVE_PROPSUNMOUNTING,3个阶段对应3中方法,分别是:mountComponent、updateComponent 和 unmountComponent。

  1. 其中will前缀的方法是进入状态之前的调用,比如componentWillReceiveProps,此方法中改变state不会二次渲染而是进行state合并,并且只有在componentDidUpdate后才能获取更新后的this.state。如果想获取组件默认的props,并且赋值给State ,就可以在这里修改,达到UI上的效果。
  2. did的前缀表示进入状态之后调用,比如componentDidMount,组件一般初始化都会在这里进行数据请求。
    componentDidMount() {
        this.gitInitData()
    }复制代码

shouldComponentUpdate 是在第二阶段RECEIVE_PROPS运行的,从

1. componentWillReceivePorps 

2. shouldComponentUpdate 

3. componentwillUpdate 

4. render 

5. componentDidUpdate
复制代码

shouldComponentUpdate接收需要更新的props 和 state, 如果方法返回false的时候就不会向下执行生命周期了。(默认情况下React会渲染所有节点,所以返回true),react性能优化的主要手段之一。

注意: 在shouldComponentUpdate和componentwillUpdate中切勿使用setState方法,会导致循环调用。

第三阶段:UNMOUNTING

unmountComponent负责组件中的componentWillUnmount 如果存在componentWillUnmount,则执行重置所有相关参数。在该方法中调用setState不会触发render,因为所有的更新队列,更新状态都被重置为null。

无状态组件

在React开发中,我们需要一些单纯的只接受props进行渲染的组件,更易于管理,简单开发。无状态组件只是一个render方法,没有存在实例返回,接收props渲染成DOM结构。在项目开发中作为view组件的存在,应该尽量的多使用无状态组件。 栗子

const Pane = (props) => <div>{props.children}</div>;

Pane.propTypes = {
  ...
};复制代码

在我们平常的组件开发中,组件可以分为数据层,渲染层。其中单纯的渲染层就可以是无状态组件。

文章分类
前端
文章标签