react组件这么写和用class写有什么区别？

Question

const TodoList = ({todos, onTodoClick}) => {
    return (
        <ul>{
            todos.map (todo =>
                <Todo
                    key={todo.id}
                    {...todo}
                    onClick={() => onTodoClick(todo.id)}
                />
            )
        }</ul>
    )
};

Answer 1

基本没啥区别。用class写的组件可以拥有继承自React.Component的方法，比如render，componentWillMount之类的，函数写的组件没有这些方法，也没有state。如果组件需要在生命周期内做某些事情，那就用class，否则用函数。

Answer 2

这是无状态组件的写法，比 class 写法拥有更好的性能。这种写法没有 state，不能操控生命周期。如果没有复杂的逻辑，建议用此写法

Answer 3

无状态组件使用的是纯函数，所以可以根据纯函数的特点来优化，从而提高性能。但是高性能的代价就是不能操控生命周期，组件状态等。

Answer 4

这样写是无状态的写法，如果只是写一个纯纯只为展示的组件，这样是可以的，如果需要改变其中任何一项，去展示不同的时候，这个方法就不适合了。

Answer 5

如果只是一个没有 state 的组件的话，这么写和用 class 写其实没差别，可能会比用 class 性能更高，因为没有继承 Component