React.createClass与ES6箭头函数

React.createClass与ES6箭头函数

第二个代码是 无状态功能组件， 并且是用于将组件定义为的函数的新语法/模式

props

。它是在React v0.14中引入的。

您可以在官方的React Blog，
此处
的官方React文档，
此处了解更多信息
。

这些组件的行为就像只定义了render方法的React类。由于没有为功能组件创建组件实例，因此添加到其中的任何引用都将评估为null。功能组件没有生命周期方法，但是您可以在函数上设置

.propTypes

和

.defaultProps

作为属性。

此模式旨在鼓励创建这些简单的组件，这些组件应包含应用程序的大部分。将来，通过避免不必要的检查和内存分配，我们还将能够针对这些组件进行性能优化。

---

• 有什么不同？

这种模式与“传统”模式类似，不同之处在于您使用的是简单函数而不是类中定义的方法。当您要从类中提取函数时（例如，出于可读性和清洁性考虑），这可能很有用。

需要注意的重要一件事是功能组件就是 功能
。这不是一堂课。因此，没有全局

this

对象。这意味着当您执行a时，

render

您基本上是在创建a的新实例

ReactComponent

，从而排除了这些javascript对象通过某种global相互通信的可能性

this

。因此，这也使得

state

不可能使用任何生命周期方法。

---

• 我的应用程序如何从中受益？

性能
当您使用无状态功能组件时，React非常聪明，可以省略所有“传统”生命周期方法，事实证明，该方法提供了大量的优化。React团队已经表示，他们计划在将来实现进一步的优化，以进行内存分配并减少检查次数。

适应性
因为我们只在谈论一个函数（而不是一个类），所以我们不必担心

state

，生命周期方法或其他依赖项。给定参数，该函数将始终提供相同的输出。这样，很容易在任何地方调整这些组件，这也使测试更加容易。

使用React的无状态功能组件，可以轻松地对每个组件进行隔离测试。不需要模拟，状态 *** 纵，特殊的库或棘手的测试工具。

鼓励最佳实践
React通常被与MVC模式的 V
进行比较，因为它是用于创建视图的。创建组件的“传统”方式使将业务逻辑（例如通过

state

或

ref

）“侵入”
真正只应处理渲染逻辑的组件变得容易。他们鼓励懒惰并写臭代码。但是，无状态功能组件几乎不可能采取这样的捷径并强制采用更好的方法。

---

• 我什么时候应该使用另一个？

通常，建议尽可能使用新模式！如果只需要一个

render

方法，而没有生命周期方法或

state

，则使用此模式。当然，有时候您 确实
需要使用

state

，在这种情况下，您可以使用传统模式。

Facebook建议在呈现静态表示组件时使用无状态组件。然后，如果需要某种状态，只需将其包装在有状态的组件中，即可通过使用状态并将其

state

发送

props

给无状态组件来对其进行管理。