参见:React.createClass 与 ES6 箭头函数

简短的回答是，您希望尽可能多地使用无状态功能组件 (SFC)；您的大部分组件应该是 SFC 的.

在以下情况下使用传统的 Component 类:

• 您需要本地状态 (this.setState)
• 您需要一个生命周期钩子(componentWillMount、componentDidUpdate 等)
• 您需要通过 refs 访问支持实例(例如
  this.elem = elem}>)

  In react tutorial:

  https://egghead.io/lessons/javascript-redux-react-todo-list-example-filtering-todos

  there is main component create with extends:

  class TodoApp extends Component {
    render() {
      const visibleTodos = getVisibleTodos(
        this.props.todos,
        this.props.visibilityFilter
      );
      .
      . // Input and Button stuff
      .
  

  and another components just create like a const that hold a function:

  const FilterLink = ({
    filter,
    children
  }) => {
    return (
      <a href='#'
         onClick={e => {
           e.preventDefault();
           store.dispatch({
             type: 'SET_VISIBILITY_FILTER',
             filter
           });
         }}
      >
        {children}
      </a>
    )
  }
  

  the difference i see, first created with class use a render function, and the another a return function to send back the template.

  What are the differences? I've heard components in the future only will be allowed with extend Component ?

  See: React.createClass vs. ES6 arrow function

  The short answer is that you want to use Stateless Functional Components (SFC) as often as you can; the majority of your components should be SFC's.

  Use the traditional Component class when:

  • You need local state (this.setState)
  • You need a lifecycle hook (componentWillMount, componentDidUpdate, etc)
  • You need to access backing instances via refs (eg. <div ref={elem => this.elem = elem}>)