React 生命周期钩子

概念—什么是生命周期钩子

React官方文档中说到：在组件类上声明特殊的方法，当组件挂载或卸载时，来运行一些代码，这些方法被称作生命周期钩子。

生命周期图解

在官方文档给出的组件生命周期的图中，我们可以很清楚的认识到，一个React组件的生命周期主要分为3个阶段：创建时、更新时、卸载时。

创建时阶段

当组件处于初始化阶段时，依次调用：

1. defaultProps（默认状态，一般用于如果父组件调用子组件的时候不给子组件传值，可以在子组件中使用defaultProps定义的默认值）

// defaultProps初始化props，只会调用一次
class Hello extends React.Component {
    static defaultProps = {
      name: 'Lily',
      age: 13
    }
    render: function(){
            return (
                <div>Hello,{this.props.name}</div>
            )
        }
}

注意: React.PropTypes 自 React v15.5 起已弃用，官方推荐使用使用prop-types库代替。

// 类型检测
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.pro