Javascript 定义ES6反应组件的两种方法

我在寻找MobX，我在ES6其他地方也看到了这两种定义React组件的方法，比如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>
);

@observer
类TodoListView扩展了组件{
render（）{
返回

{this.props.todoList.todos.map（todo=>
)}

剩余任务：{this.props.todoList.unfinishedTodoCount}
}
}
const TodoView=观察者（{todo}）=>

todo.finished=！todo.finished}
/>
todo.title=e.target.value}/>

);

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

看起来更简单的组件可以使用更简单的语法，但我希望遵循一条规则或指南

---

谢谢

第二种模式称为“无状态功能组件”，建议在几乎所有情况下使用它。SFC（无状态功能组件）是纯函数，仅依赖于它们的

道具

。它们更易于测试，彼此解耦，并且在未来将比其他模式有显著的性能提升。（来自官方文件）

不过，他们有几个问题，即：

• 不能将

  ref

  s附加到SFCs。（，）
• 它们不能具有内部状态。（）
• 他们不能使用生命周期方法。（例如，

  componentDidMount

  ，）

如果您需要这些东西中的任何一种，首先确保没有办法使用它们，然后使用ES6

class

或

React.createClass

模式

---

---

我强烈建议James K Nelson理解这些模式之间的权衡和差异，Dan Abramov解释Redux应用程序最常用的结构。

React.createClass VS ES2015 Class VS functional stateless components

在React中，创建新组件有三种主要方法

第一个与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);

var TestComponent=React.createClass({
render:function（）{
返回{this.props.children}
；
}
})
React.render（这将是一个段落元素，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);

类TestComponent扩展了React.Component{
渲染（）{
返回{this.props.children}
；
}
}
React.render（这将是一个段落元素，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'));

consttestcomponent=（props）=>props.children
；
render（这将是一个段落元素！，
document.querySelector（'#root'）；

这些无状态组件对于React-to-render来说要轻得多，并且还具有与React无关的优点，这意味着它们可以在给定相同输入的情况下以任何其他方式呈现，并将产生相同的输出

所以你应该在你的应用程序中使用什么取决于。每种方法都有其优缺点，应在特定条件下使用。有时您不能使用无状态组件

---

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

回答得好！谢谢“几乎所有情况下都建议使用它。”我建议修改它，因为它不是真正的好建议，很多人可能会停止阅读。为什么它不是好建议@rossipedia？我敢肯定这是真的！正如您所提到的，使用标准组件和功能组件有很多考虑因素。将它们称为“推荐”（实际上并不准确）往往会阻止人们真正考虑它们。最大的问题是性能。按“建议”推出性能较差的解决方案会导致对React的总体看法变得更差。功能组件有其位置（技术上不需要是无状态的，因为可以使用闭包为它们提供状态），但它们根本不是具有生命周期的标准组件的替代品。