创建模块

Class vs React.createClass vs stateless

  • 如果你的模块有内部状态或者是refs, 推荐使用 class extends React.Component 而不是 React.createClass.
    eslint: react/prefer-es6-class react/prefer-stateless-function

    1. // bad
    2. const Listing = React.createClass({
    3.   // ...
    4.   render() {
    5.     return <div>{this.state.hello}</div>;
    6.   }
    7. });
    9. // good
    10. class Listing extends React.Component {
    11.   // ...
    12.   render() {
    13.     return <div>{this.state.hello}</div>;
    14.   }
    15. }

    如果你的模块没有状态或是没有引用refs， 推荐使用普通函数（非箭头函数）而不是类:

    1. // bad
    2. class Listing extends React.Component {
    3.   render() {
    4.     return <div>{this.props.hello}</div>;
    5.   }
    6. }
    8. // bad (relying on function name inference is discouraged)
    9. const Listing = ({ hello }) => (
    10.   <div>{hello}</div>
    11. );
    13. // good
    14. function Listing({ hello }) {
    15.   return <div>{hello}</div>;
    16. }