30分钟掌握今年year ——React Hooks最精彩的新功能

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

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

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

这样，毫不夸张地说，React Hooks是今年最令人兴奋的新功能。如果你对react感兴趣，或者正在使用react进行项目开发，答应我，请至少花30分钟阅读这篇文章，好吗？本文涵盖了您需要了解的关于React 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组件实际上很长，很难重用。尤其是那些写成类的组件，它们包含状态，所以重用这样的组件非常麻烦。

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

呈现属性是指使用一个其值为函数的道具来传递需要动态呈现的节点或组件。从下面的代码可以看出，我们的DataProvider组件包含所有与状态相关的代码，而Cat组件可以是一个简单的显示组件，这样DataProvider就可以独立重用。

从“组件/卡特彼勒”类导入卡特彼勒数据提供程序扩展了反应。组件{构造器(道具){ super(道具)；this . state={ target : ' Zac ' }；} render(){ return(div { this . props . render(this . state)}/div)