将React组件从函数重构为ES6类

Question

我是ES6的新手.在编写React组件的不同方法上有点困惑.我从"React.createClass"开始,然后使用ES6类语法移动到"扩展React.Component".

现在关注Redux教程,我看到他们以这种方式定义组件

import React, { PropTypes } from 'react'

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

Todo.propTypes = {
    onClick: PropTypes.func.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
}

export default Todo

我怎样才能重构这个"函数"移动到扩展React.component的ES6类？我想返回JSX是render()方法,不是吗？那么onClick,已完成的文本参数呢？

谢谢

Answer 1

对于你的组件来说，实际上最好让它成为一个纯函数，而不是一个 ES6 类，因为它可以渲染为它的函数props并且不维护状态。不过，您仍然可以使用 ES6 语法（导出、箭头函数等）。

\n

Facebook 的解释是：“在理想的世界中，大多数组件都将是无状态函数，因为将来我们还能够通过避免不必要的检查和内存分配来针对这些组件进行性能优化。如果可能的话，这是推荐的模式。”

\n

import { PropTypes } from \'react\'\n\nfunction Todo = (props) => (\n    <li onClick={props.onClick} style={{ textDecoration: props.completed ? \'line-through\' : \'none\' }} >\n        {props.text}\n    </li>\n)\n\nTodo.propTypes = {\n    onClick: PropTypes.func.isRequired,\n    completed: PropTypes.bool.isRequired,\n    text: PropTypes.string.isRequired\n}\n\nexport default Todo\n

\n