定义 ES6 React 组件的两种方法
Two ways of defining ES6 React Components
我正在为 MobX 看这个小提琴,我也在 ES6 其他地方看到了这两种定义 React 组件的方法,比如 Dan Abramov 的蛋头 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>
);
我的问题是,什么时候适合使用每种类型?
似乎更简单的组件能够使用更简单的语法,但我希望遵循规则或指南。
谢谢!
第二种模式称为"无状态功能组件",建议在几乎所有情况下使用它。SFC(无状态功能组件)是仅依赖于其props
的纯功能。它们更易于测试,彼此分离,并且将来将比其他模式具有显着的性能提升。(来源于官方反应文档)
不过,他们有一些陷阱,即:
- 不能将
ref
附加到SFC。 (src, src2) - 他们不能有内部状态。(来源)
- 他们不能使用生命周期方法。(例如
componentDidMount
,来源)
如果您需要这些东西中的任何一个,请首先确保没有办法使用它们,然后才使用 ES6 class
或React.createClass
模式。
我强烈推荐James K Nelson的"我应该使用React.createClass,ES6类还是无状态功能组件?"来理解这些模式之间的权衡和区别,以及Dan Abramov的"Representational and Container Components"来解释Redux应用程序最常用的结构。
React.createClass VS ES2015 classes 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 引入了创建那些称为无状态组件(也称为功能组件或纯组件)的功能,因为它们被声明为没有状态的函数,并在给定相同的 props 的情况下返回相同的标记:
const TestComponent = (props) => <p>props.children</p>;
ReactDOM.render(<TestComponent>This will be a paragraph element!</TestComponent>,
document.querySelector('#root'));
这些无状态组件对于 React 来说要轻得多,并且还具有与 React 无关的优点,这意味着它们可以在给定相同的输入的情况下以任何其他方式渲染并产生相同的输出。
因此,您应该在应用程序中使用什么取决于。 每种方法都有其优点和缺点,应在某些条件下使用。 有时无法使用无状态组件。
当您的组件需要生命周期方法或需要访问 props 以外的任何内容时,请使用 ES2015 (ES6) 类或 React.createClass。
- 这两种方法有什么不同
- 通过两种方法创建和更新 CSS
- 声明Javascript名称空间的两种方法之间的区别
- Dojo和RequireJS:Error:defineAlreadyDefined(…)在站点上同时使用这两种方法时
- 处理jQuery提交表单的两种方法
- 定义 ES6 React 组件的两种方法
- 在承诺链中调用两种方法
- 这两种方法在javascript类中定义方法的区别
- 确定对象是否在JavaScript中具有属性的两种方法
- 加载JS库的两种方法
- 在Javascript中定义对象方法的两种方法之间有什么区别
- 使用以下两种方法定义的方法之间的差异
- 在 Javascript 中创建“私有”属性的这两种方法之间的区别
- 主干视图渲染:fetch-first vs . render-first,两种方法都有缺点
- mongoDB——存储相同数据的两种方法的优缺点
- 在javascript中填充数组,这两种方法的区别是什么?
- 在持续集成后,在生产服务器中使用Webpack处理环境变量的两种方法
- AngularJS中定义控制器的两种方法
- 嵌套脚本标签,两种方法的比较
- Javascript -最好的两种方法来创建一个简单的时钟