Question

我正在寻找this fiddle的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。它们更容易测试，彼此分离，并且将来会比其他模式获得显着的性能提升。（source来自官方反应文件）

他们有一些陷阱，即：

无法将ref附加到SFC。（src，src2）
他们不能拥有内部状态。（src）
他们不能使用生命周期方法。（例如componentDidMount，src）

如果您需要这些内容，请先确保无法使用它们，然后才能使用ES6 class或React.createClass模式。

我强烈推荐James K Nelson的"Should I use React.createClass, ES6 Classes or stateless functional components?"来理解这些模式之间的权衡和差异，以及Dan Abramov的"Presentational and Container Components"解释Redux应用程序最常用的结构。

Answer 2

React.createClass VS ES2015类VS功能性无状态组件

在React中，创建新组件的主要方法有3种。

第一个与React库一起引入的是React.createClass，它具有以下语法：

var TestComponent = React.createClass({
 render: function(){
      return <p>{this.props.children}</p>;
 }
})

React.render(<TestComponent>This will be a paragraph element!</TestComponent>, document.body);

之后，在React 0.13版本中，我们可以将组件直接定义为ES2015类：

class TestComponent extends React.Component {
 render () {
      return <p>{this.props.children}</p>;
 }
}

React.render(<TestComponent>This will be a paragraph element!</TestComponent>, document.body);

React 0.14引入了创建那些称为无状态组件（也称为功能组件或纯组件）的功能，因为它们被声明为没有状态的函数，并且在给定相同道具的情况下返回相同的标记：

const TestComponent = (props) => <p>props.children</p>;

ReactDOM.render(<TestComponent>This will be a paragraph element!</TestComponent>, 
document.querySelector('#root'));

这些无状态组件对于React而言要轻得多，并且还具有与React无关的优点，这意味着只要输入相同，它们就可以以任何其他方式呈现，并且将产生相同的输出。

因此，应在应用程序中使用的内容取决于。每个都有其优缺点，应在某些条件下使用。有时候，您无法使用无状态组件。

当您的组件需要生命周期方法或者需要访问除道具以外的其他任何东西时，请使用ES2015（ES6）类或React.createClass。

两种定义ES6 React组件的方法

2 个答案: