创建组件的不同方式

Question

在redux教程中，创建组件的方式有两种。有什么区别

WAY1：

import React, { PropTypes } from 'react' 
import Todo from './Todo' 

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

export default TodoList 

way2：

import React, { Component, PropTypes } from 'react'; 
import Todo from './Todo'; 

export default class TodoList extends Component { 
    render() { 
    return (
     <ul> 
     {this.props.todos.map((todo, index) => 
      <Todo {...todo} 
       key={index} 
       onClick={() => this.props.onTodoClick(index)} /> 
     )} 
     </ul> 
    ) 
    } 
} 

Answer 1

第一个是在推出了stateless functional component反应0.14。

第二个是基于类的组件，可用于处理状态并可访问React.Component的lifecycle methods。

在Redux中，无状态函数主要用于表示性组件，基于经典类的组件用于关注状态的容器组件。 更多关于这个话题可以在这里找到：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mqt3zyon5

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

在一个理想的世界里，大部分的组件是无状态的，因为 功能在未来，我们也将能够使性能 通过避免不必要的 检查和内存分配，特定于这些组件的优化。这是推荐的模式，当 可能。