在 react.js 中实现 render 方法答案

【问题标题】：implementing the render method in react.js在 react.js 中实现 render 方法
【发布时间】：2017-01-06 20:58:06
【问题描述】：

我在这里查看一个 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 方法？

【问题讨论】：

谷歌搜索“无状态组件”
在这里阅读无状态函数：facebook.github.io/react/docs/reusable-components.html
ReactJS difference between stateful and stateless的可能重复

标签： reactjs

【解决方案1】：

假设我们有一个 React 组件，它使用单个 prop 向某人打招呼。

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

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

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

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

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

另外，我们可以解构赋予组件的 name prop：

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

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

【讨论】：

【解决方案2】：

无状态函数：

你也可以将你的 React 类定义为一个普通的 JavaScript 函数。使用新的 ES6 箭头语法：

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

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

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

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

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

【讨论】：