深入了解和使用React Hooks

你还在担心是使用无状态函数还是有状态类吗？有了钩子，你就不需要再写类了，你所有的组件都是函数。

你还在彻夜不眠地想用哪个生命周期钩子函数吗？——有Hooks，生命周期hook功能可以先放一边。

你仍然对组件中的这一点感到困惑吗？——既然班丢了，这是哪里？有生以来第一次，你不再需要面对这个。

这样，毫不夸张地说，React Hooks是今年最令人兴奋的新功能。如果你对react感兴趣，或者正在使用react进行项目开发，答应我，请至少花30分钟阅读这篇文章，好吗？本文涵盖了您需要了解的关于React Hooks的所有知识点。相信你看完全了会有收获的。

为什么要引入Hooks？

react给出的官方动机是为了解决react在长期使用和维护中不可避免的一些问题。比如：1。组件中的状态相关逻辑很难重用和共享；2.开发和维护逻辑复杂的组件非常困难。当我们的组件需要处理多个不相关的本地状态时，每个生命周期函数可能包含各种不相关的逻辑。3.这种类内构件增加了学习成本，基于现有工具的类内构件优化存在一些问题。4.由于业务的变化，功能组件不得不变成类组件等等。

在进一步了解之前，我们需要快速了解一些基本Hooks的用法。

最简单的钩子之一

让我们首先看一个简单的有状态组件：

类示例扩展了React。组件{构造器(道具){ super(道具)；this . state={ count : 0 }；} render() { return (div pYou单击{this.state.count}次/p button OnClick={()=this . SetState({ count : this . state . count 1 })}单击me/button/div；}}我们来看看使用钩子后的版本：

从“react”导入{ useState }；函数Example() { const [count，setCount]=useState(0)；return (div pYou单击{count}次/p按钮onClick={()=setCount(count 1)}单击me/button/div)；}是不是简单多了！可以看到，Example变成了一个函数，但是这个函数有自己的状态(count)，也可以更新自己的状态(setCount)。这个函数之所以如此伟大，是因为它注入了一个hook - useState，这使得我们的函数变成了一个有状态函数。

除了useState钩子之外，还有很多其他的钩子，比如useEffect提供了像componentDidMount这样的生命周期钩子的功能，useContext提供了Context的功能。

Hooks本质上是一种特殊的函数，它可以将一些特殊的函数注入到您的函数组件中。啊？听起来有点像被批评的Mixins。Mixins会在反应中复活吗？当然不是。我们以后再谈区别。综上所述，这些钩子的目的就是让你停止写类，让函数称霸江湖。

为什么React有一个钩子？

重用有状态组件太麻烦了！

我们都知道react的核心思想是将一个页面拆分成一堆独立的、可重用的组件，以自上而下单向数据流的形式将这些组件串联起来。但是如果您在大型工作项目中使用react，您会发现项目中的许多react组件实际上很长，很难重用。尤其是那些写成类的组件，它们包含状态，所以重用这样的组件非常麻烦。

在此之前，政府建议如何解决这个问题？答案是：渲染属性和高阶组件。我们可以简单看一下这两种模式。

呈现属性是指使用一个其值为函数的道具来传递需要动态呈现的节点或组件。从下面的代码中可以看出，我们的数据提供器组件包含所有与状态相关的信息