React把函数式组件转化为类组件

函数式组件

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

把函数式组件转化为类组件

你可以遵从以下5步, 把一个类似 Clock 这样的函数式组件转化为类组件：

• 创建一个继承自 React.Component 类的 ES6 class 同名类。
• 添加一个名为 render() 的空方法。
• 把原函数中的所有内容移至 render() 中。
• 在 render() 方法中使用 this.props 替代 props。
• 删除保留的空函数声明。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Clock 现在被定为类组件，而不是函数式组件。

http://www.css88.com/react/docs/state-and-lifecycle.html