Question

我在这里查看React / Redux示例：

http://redux.js.org/docs/basics/ExampleTodoList.html

请注意以下内容从未完成：

const CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
      </div>
    );
  }
});

而是使用箭头函数代替类。

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

为什么这个以及何时必须实现render方法？

Answer 1

让我们说我们有一个React组件，它使用一个道具向某人问好。

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

正如您可能知道的那样，此组件不需要任何内部状态才能正常运行。它所需要的只是一个支柱才能完成它的工作。 React允许我们将这样的组件定义为stateless functions，它只返回一些道具的标记。

function Hello(props) {
    return <span>Hello, {props.name}</span>;
}

我们可以使用ES6语法来改为使用箭头函数，这允许我们隐式返回标记：

const Hello = (props) => (<span>Hello, {props.name}</span>);

此外，我们可以构造给予组件的名称prop：

const Hello = ({name}) => (<span>Hello, {name}</span>);

它会为您提供与您在问题中发布的组件类似的结果。

Answer 2

无状态函数：

您也可以将React类定义为纯JavaScript函数。使用新的ES6箭头语法：

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

这个简化的组件API适用于作为其道具的纯函数的组件。这些组件不得保留内部状态，不具有后备实例，并且不具有组件生命周期方法。它们是输入的纯函数变换，没有样板。

但是，您仍然可以通过将它们设置为函数的属性来指定.propTypes和.defaultProps，就像在ES6类上设置它们一样。

您可以从以下网址StateLess Function部分获取更多信息，

https://facebook.github.io/react/docs/reusable-components.html

在react.js中实现render方法

2 个答案: