创建 React 组件

Created: November-22, 2018

让我们通过比较两个代码示例来探索语法差异。

React.createClass（不建议使用）

这里我们有一个分配了 React 类的 const，后面的 render 函数用于完成典型的基本组件定义。

import React from 'react';

const MyComponent = React.createClass({
  render() {
    return (
      <div></div>
    );
  }
});

export default MyComponent;

React.Component

让我们采用上面的 React.createClass 定义并将其转换为使用 ES6 类。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div></div>
    );
  }
}

export default MyComponent;

在这个例子中，我们现在使用的是 ES6 类。对于 React 更改，我们现在创建一个名为 MyComponent 的类，并从 React.Component 扩展而不是直接访问 React.createClass。这样，我们使用更少的 React 样板和更多的 JavaScript。

PS：通常，这将与 Babel 之类的东西一起用于将 ES6 编译为 ES5 以在其他浏览器中工作。