两种定义ES6 React组件的方法

Question

我正在为MobX 看这个小提琴,我也看到了这两种在ES6其他地方定义React Components的方法,比如Dan Abramov的egghead redux视频系列.

@observer
class TodoListView extends Component {
    render() {
        return <div>
            <ul>
                {this.props.todoList.todos.map(todo => 
                    <TodoView todo={todo} key={todo.id} />
                )}
            </ul>
            Tasks left: {this.props.todoList.unfinishedTodoCount}
        </div>
    }
}

const TodoView = observer(({todo}) =>
    <li>
        <input
            type="checkbox"
            checked={todo.finished}
            onClick={() => todo.finished = !todo.finished}
        />
        <input
            type="text"
          value={todo.title}
          onChange={ e => todo.title = e.target.value } />
    </li>
);

我的问题是,什么时候适合使用每种类型？

似乎更简单的组件能够使用更简单的语法,但我希望遵循规则或准则.

谢谢!

Answer 1

第二种模式称为" 无状态功能组件 ",几乎在所有情况下都推荐使用它.SFC(无状态功能组件)是纯函数,仅依赖于它们props.它们更容易测试,彼此分离,并且将来会比其他模式获得显着的性能提升.(源从官方反应文档)

他们有一些陷阱,即:

• 无法将refs 附加到SFC.(src,src2)
• 他们不能拥有内部状态.(src)
• 他们不能使用生命周期方法.(例如componentDidMount,src)

如果您需要任何这些东西,首先要确保周围有使用它们,然后才请使用ES6没有办法class或者React.createClass模式.

我强烈推荐"我应该使用React.createClass,ES6类还是无状态功能组件？" 由James K Nelson理解这些模式之间的权衡和差异,以及Dan Abramov的"演示和容器组件",以解释Redux应用程序最常用的结构.