组件的生命周期

一共有四个声明周期init(初始化),mount(装载),update(更新),unmount(卸载)。只有更新可能会执行多次,其余都只执行1次。

init
getDefaultProps(生成默认属性):在创建类的时候,React.createclass时指定。是一个共有的,所有的实例都会使用,是针对类而言的,只会调用一次。
getInitialState(初始化state):ES6时在构造函数中指定。getInitialState针对具体的实例,每个实例生成时都会调用一次。

const Item = React.createClass({
  getDefaultProps () {
    console.log('getDefaultProps')
    return {
      'group': 'javascript'
    }
  },
  getInitialState () {
    console.log('getInitialState')
    return {
      'name': 'cc'
    }
  },
  render () {
    return 
{this.state.name + this.props.group}
} }) ReactDOM.render(
, document.getElementById('root'))
组件的生命周期_第1张图片
图片.png

执行的先后顺序。当调用多个item时:

ReactDOM.render(
  
, document.getElementById('root'))
组件的生命周期_第2张图片
图片.png

调用了一次getDefaultProps,三次getInitialState。


mount组件装载阶段:包含预加载、渲染和加载完毕三个周期,都只执行一次。预加载时dom未成形,不能操作dom。

class Item extends React.Component {
  constructor (props) {
    super(props)
    console.log('getInitialState')
    this.state = {
      'group': 'hello'
    }
  }
  static get defaultProps () {
    console.log('defaultProps')
    return {
      'name': 'cc'
    }
  }
  componentWillMount () {
    console.log('componentWillMount')
    this.state.name = 'cc'
  }
  componentDidMount () {
    console.log('componentDidMount')
  }
  render () {
    console.log('render')
    return 
{this.state.group + this.props.name}
} }

打印顺序如下图


图片.png

componentWillMount(预加载),可以操作组件的state,不能操作DOM
componentDidMount(加载完毕),这时可以操作DOM,也可以再此处引入一些外部交互,比如发送请求,与其他框架交互。
render(渲染),初次渲染,没什么好说的。


Update:只在组件更新时会触发,初次加载时不会触发。
把上面的代码页面渲染部分封装为render方法:

const Item = React.createClass({
  getDefaultProps () {
    console.log('getDefaultProps')
    return {
      'group': 'javascript'
    }
  },
  getInitialState () {
    console.log('getInitialState')
    return {
      'name': 'cc'
    }
  },
  componentWillMount () {
    console.log('componentWillMount')
    this.state.name = 'cc'
  },
  componentDidMount () {
    console.log('componentDidMount')
  },
  render () {
    console.log('render')
    return 
{this.state.group + this.props.name}
}, componentWillUpdate (nextProps, nextState) { console.log('component will update') }, componentDidUpdate (oldProps, oldState) { console.log('compontent did update') } }) ReactDOM.render(
, document.getElementById('root'))
组件的生命周期_第3张图片
图片.png

初次加载没有触发update,触发update有三种方式,外部渲染(如本例中演示),内部state变化,外部传入参数。当我们页面的render方法包装下。

function render () {
  ReactDOM.render(
    
, document.getElementById('root')) } render() //调用两次render render()
组件的生命周期_第4张图片
图片.png

触发了update,而且每次还会自动调用render。

componentWillUpdate(nextProps,nextState):组件预更新,接受两个参数,新的组件props和新的状态state;
为了防止组件频繁刷新,还有一个组件的更新验证方法shouldComponentUpdate,用于控制组件是否需要更新状态。

特殊方法: shouldComponentUpdate (nextProps, nextState) {
    return false//返回false,则组件不会被update
  }
组件的生命周期_第5张图片
图片.png

组件加入shouldComponentUpdate 后没有被update。

特殊方法:componentWillReceiveProps(nextProps)已加载组件收到新的参数时调用。componentWillReceiveProps()
当一个组件收到新的props时被调用。如果需要改变状态来响应props的改变可以先比较传入的props和当前的props,再在此方法内调用setState()来改变state。React可能会调用这个方法,即使props没有改变,所以在处理变化时必须在方法内比较当前值和新的值props。这个可能会因为父元素的变化导致子元素重新渲染。在组件加载过程中不会调用此方法。只有传入新的props时才会调用,同样setState也不会触发此方法。(以上翻自react官网说明)。
unmount卸载阶段
componentWillUnmount

在组件被卸载和摧毁前被立即调用。清理应该放在这里。

比如说我在组件的加载时写了个setInterval定时器,在路由router跳转后,我们应该要clearInterval这个定时器,不然是很耗性能的,包括我们的全局事件绑定,都需要在这里取消。
.

你可能感兴趣的:(组件的生命周期)