我正在React 15环境中开发(使用react-starterify模板),并且在下面的VERSION 2中使用了语法,但是我在Facebook的React页面中找到的大多数示例和教程都是VERSION 1.有什么区别两个以及何时应该使用另一个？
版本1
var MyComponent = React.createClass({
render: function() {
return (
<ul>
// some list
</ul>
);
}
});
module.exports = MyOtherComponent;
版本2
const MyComponent = () => (
<ul>
// some list
</ul>
);
export default MyComponent;
解决方法
您可以在官方的React博客,here上,关于官方的React文档,here以及Stackoverflow文档,了解更多信息.
These components behave just like a React class with only a render
method defined. Since no component instance is created for a
functional component,any ref added to one will evaluate to null.
Functional components do not have lifecycle methods,but you can set
.propTypesand.defaultPropsas properties on the function.This pattern is designed to encourage the creation of these simple
components that should comprise large portions of your apps. In the
future,we’ll also be able to make performance optimizations specific
to these components by avoiding unnecessary checks and memory
allocations.
有什么区别？
这种模式类似于“传统”模式,除了使用简单的函数,而不是类中定义的方法.当您想要从类中提取功能(例如可读性和清洁度)时,这可能很有用.
一个重要的事情要注意的是功能组件就是这个功能.这不是一个班.因此,没有全球这个对象.这意味着当你做一个渲染时,你基本上是创建一个ReactComponent的一个新实例,因此这些JavaScript对象通过一些全局的这种方式可以互相通信.这也使得使用状态和任何生命周期方法是不可能的.
>我的应用程序如何从中受益？
性能
当您使用无状态功能组件时,React非常聪明,可以省略所有“传统”生命周期方法,这样做可以提供相当多的优化. React团队表示,他们计划在未来进一步优化内存分配并减少支票数量.
适应性
因为我们只是在谈论一个函数(而不是一个类),所以我们不必担心状态,生命周期方法或其他依赖关系.给定参数,该函数将始终给出相同的输出.因此,无论我们想要什么,都很容易适应这样的组件,这也使测试更容易.
With React’s stateless functional components,each component can be easily tested in isolation. No mocking,state manipulation,special libraries,or tricky test harnesses are needed.
鼓励最佳做法
反应通常与MVC模式的V进行比较,因为它意在创建视图.创建组件的“传统”方法使得很容易将业务逻辑(例如,状态或引用)“隐藏到真正应该只处理渲染逻辑的组件中.他们鼓励懒惰和写臭臭的代码.然而,无状态功能组件使得几乎不可能采取这样的捷径和力量更好的方法.
>我应该什么时候使用另一个？
通常,尽可能推荐使用新模式！如果只需要一个渲染方法,但没有生命周期的方法或状态,则使用此模式.当然,有时您需要使用状态,在这种情况下,您可以使用传统模式.
Facebook建议在呈现静态表示组件时使用无状态组件.那么,如果需要某种状态,只需将它们包装在一个有状态的组件中,就可以通过使用它的状态来管理它们,并将这些状态发送给无状态组件.
