我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第n篇文章，点击查看活动详情

生命周期

static getDerivedStateFromProps()方法

这是新版本的生命周期函数中新增的，通常很少使用。 从字面翻译来看，这意味着在render（）方法之前，props返回一个对象来更新状态state，该状态在组件的初始化和更新期间被调用。 我们都知道，类类型组件中使用的static关键字表示类原型的静态方法。 它接收两个参数，一个是props，另一个是state。 传递的属性值用于替换当前组件中的状态。 这个声明循环函数在语义上命名，这有助于理解和记忆。 count的值一直是通过props传入的111,并不会发生任何改变。

static getDerivedStateFromProps(props) {
    return props;
}
ReactDOM.render(<Count count="111"/>,document.getElementById('root'))

直接直译意味着当前组件已经安装，初始化和安装操作已经基本完成。 通常，页面挂载后，我们可以向后台发送Ajax异步请求以获取数据，在该组件中还可以完成启动定时器和组件之间的消息订阅和发布。 此组件在开发中经常使用，因此我们应该重点了解其用法。

const element = <HelloMessage/>;
ReactDOM.render(
  element,
  document.getElementById('example')
);

旧版本中的生命周期函数componentwillmount（）现在不推荐使用，其应用也非常有限。 它被人们误用的可能性很高，这可能会导致潜在的无法检测的错误。

class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}

Props 验证

Props验证使用proptype，这可以确保正确使用我们的应用程序组件。React Proptypes提供了许多验证器来验证传入数据是否有效。当无效数据被传递到props时，JavaScript控制台将抛出警告。

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

下面的示例创建了一个mytitle组件。属性title是必需的，是字符串。 非字符串类型将自动转换为字符串：

MyTitle.propTypes = {
  title: PropTypes.string
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

可以将prop声明为指定的JS基本数据类型。默认情况下，这些数据是可选的

 optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

shouldComponentUpdate()方法

在组件更新之前调用此声明循环函数，这相当于在组件更新前添加一个阀门，以控制组件在满足什么条件时将被更新。 可以控制是否通过返回值更新组件。 如果更新返回true，则不会更新。 如果返回值为false，则当不使用此声明循环函数时，默认返回值为true。 可以是多个对象类型中的一个：

 optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

自定义验证器。如果验证失败，则需要返回错误对象。不要使用“控制台警告”或抛出异常，因为“oneoftype”将无效。

customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }

元素变量

可以使用变量来存储元素。 它可以帮助有条件地渲染组件的一部分，而输出的其余部分不会更改。 在下面的示例中，我们将创建一个名为logincontrol的有状态组件。 它将根据当前状态呈现＜loginButton/＞或＜logoutbutton/＞，并在上一个示例中呈现＜greeting/＞。

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }
 
  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }
 
  render() {
    const isLoggedIn = this.state.isLoggedIn;
 
    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
 
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }

正确使用生命周期函数将使我们的开发更有效率。 react official提供了许多生命周期函数，但它们主要使用诸如render（）、componentdidmount（）、componentwillunmount（）和getderivedstatefromprops（）等生命周期函数。 其他生命周期函数可以通过引用官方文档直接使用，这就是react中的生命周期函数。

class Counter extends React.Component{
  constructor(props) {
      super(props);
      this.state = {clickCount: 0};
      this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  }

Getderivedstatefromprops（）：在调用render方法之前调用，并将在初始装载和后续更新期间调用。 根据shouldcomponentupdate（）的返回值，确定react组件的输出是否受当前状态或属性更改的影响。 Shouldcomponentupdate（）：当属性或状态更改时，将在渲染执行之前调用Shouldcomponentupdate（）。 Render（）：Render（）方法是类组件中必须实现的唯一方法。 Getsnapshotbeforeupdate（）：在上次渲染输出（提交到DOM节点）之前调用。 Componentdidupdate（）：它将在更新后立即调用。

 tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, Runoob!</h1>
        <h2>现在时间是：{this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }