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

Question

我是ES6新手。在编写React组件的不同方法上有点困惑。我从“react.createClass”开始，然后使用ES6类语法移到“extends react.component”。

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

Answer 1

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

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

import { PropTypes } from 'react'

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

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

export default Todo