分享React Conf 2018视频

发表于:2018-12-05

观看视频

Dan主要讲了react在16.7.0-alpha版本中的新特性 hooks

没有重大变化

在我们继续之前,请注意Hooks是:

  • 完全选择加入。您可以在几个组件中尝试Hooks,而无需重写任何现有代码。但是如果你不想,你现在不必学习或使用Hooks。
  • 100%向后兼容。挂钩不包含任何重大更改。
  • 在有空。Hook目前处于alpha版本,我们希望在收到社区反馈后将它们包含在React 16.7中。

动机

Hook解决了React中各种看似无关的问题,我们在编写和维护数以万计的组件时遇到了这些问题。无论您是在学习React,每天使用它,还是更喜欢使用具有类似组件模型的不同库,您都可能会发现其中的一些问题。

复杂的组件变得难以理解

我们经常不得不维护从简单开始的组件,但却变成了无法管理的状态逻辑和副作用。每个生命周期方法通常包含不相关逻辑的混合。例如,组件可能会在componentDidMount和中执行一些数据提取componentDidUpdate。但是,相同的componentDidMount方法可能还包含一些不相关的逻辑,用于设置事件侦听器,并执行清理componentWillUnmount。一起更改的相互关联的代码被拆分,但完全不相关的代码最终组合在一个方法中。这使得引入错误和不一致变得太容易了。

在许多情况下,不可能将这些组件分解为较小的组件,因为状态逻辑遍布整个地方。测试它们也很困难。这是许多人更喜欢将React与单独的状态管理库相结合的原因之一。但是,这通常会引入太多的抽象,要求您在不同的文件之间跳转,并使重用组件变得更加困难。

为了解决这个问题,Hooks允许您根据相关的部分(例如设置订阅或获取数据)将一个组件拆分为较小的函数,而不是基于生命周期方法强制拆分。您还可以选择使用reducer管理组件的本地状态,以使其更具可预测性。


hooks只能在函数组件中使用,可以完全使用Hooks进行编写应用,也可以用回class的方式去写。不过我建议等正式版本出来之后直接用hooks去写,因为hooks不存在this关键字,无需关心this,而且维护成本降低了。

了解hooks是什么之后你会发现react真的牛B。

React
广告