在本文中，我们将讨论React钩子。这个新特性目前处于React 16.8阶段。使用React Hooks，我们将能够编写具有状态的功能组件；不再需要为state使用类组件！反应钩React不断给我们提供新的更新。目前，在React 16.8中，我们有React钩子！如果我告诉你Hooks摆脱了对类组件的主要需求呢？这个新特性可以使您的代码更简洁。我们不都想要吗？但是React钩子有什么好大惊小怪的呢？为什么我应该停止使用类组件？无论如何，没有必要停止使用它们。目前还没有摆脱类组件的计划，如果开发人员愿意的话，切换到React钩子的过渡将是无缝的。"React钩子可以使代码更简洁，并且不需要为状态使用类组件。"在推特上留言什么是"钩子"？React钩子是一种"钩住"功能组件的方法。功能组件从来都不能保持一个状态，但是通过钩子，它现在就有了这样做的能力。从我们的主题演讲（我和@sophibits）和@ryanflorence的深度探索中了解有关钩子的所有信息！https://t.co/bGk9ajVtgi-丹·阿布拉莫夫（@Dan unu Abramov）2018年10月26日如果我们要去反应钩子上的文件，他们会说最好是：Hooks是一个即将推出的特性，它允许您使用state和其他React特性，而无需编写类。来源状态以一种更简洁的方式编写，设置或更新该状态只需一行即可声明。然后您就有了像componentDidMount或componentdidpupdate这样的生命周期方法，这些方法将由useEffect负责。钩子很强大，它允许功能部件利用这种能力。"React Hooks是一种‘钩住’到功能组件中的方法。"在推特上留言在项目中使用钩子React现在我们已经基本了解了什么是React钩子，我们准备好在项目中使用它了吗？要将React的当前版本添加到项目中并开始使用React Hooks，只需在IDE中运行以下命令：安装-npm反应@16.8反应dom@16.8现在是什么状态在类组件中，我们可以声明state，并使用我们熟悉的setState设置该状态，如下所示：//24行代码从React导入React；从"react-dom"导入ReactDOM；类ClassExample扩展反应组分{建造师（道具）{超级（道具）；这个州= {短语："我最喜欢的颜色是"};}渲染（）{返回(

在{this.state.短语}在

此设置状态（{短语：this.state.短语+"蓝色"}）}>露出颜色！

);}}ReactDOM.render（，文档.getElementById（"根"）；上面代码的代码沙盒可以在这里找到。在这个例子中，我们声明我们的状态为短语"我最喜欢的颜色是"。然后我们创建一个按钮，当点击时，激活setState并在短语中添加字符串"Blue"。此组件的输出如下所示：一旦点击按钮，我们会看到：使用React hook可以看到什么状态如果我们从类组件中获取相同的逻辑，将其放入一个功能组件中，然后使用React钩子，我们可以删除大量代码行。让我们看看会是什么样子。//代码17行导入React，{useState}来自"React"；从"react-dom"导入ReactDOM；函数HooksExample（）{const[phrase，setPhrase]=useState（"我最喜欢的颜色是"）；返回(

{短语}

设置短语（短语+"蓝色"）}>露出颜色！

);}ReactDOM.render（，文档.getElementById（"根"）；上面代码的代码沙盒可以在这里找到。我们在这里看到的是不同的，非常不同的状态。除了关键字useState，我们根本看不到state被使用。在这一行中：const[phrase，setPhrase]=useState（"我最喜欢的颜色是"）；我们的州就在这里。两个值phrase和setPhrase是占位符。我们还看到了一个新特性useState。短语等于这个州.设置短语等于此设置状态.useState将是我们的初始状态值。通过在呈现的React元素中使用setPhrase，我们可以设置一个新的状态值，并在单击按钮后显示最喜欢的颜色。这两个示例之间的行数相差7行，但这可能会随着组件的不同而增加。但最大的区别是我们现在可以在一行中声明我们的州！我们可以为单个函数调用替换类构造函数。再看一下useState，这是一个钩子，它允许我们向我们的功能组件添加in-state。你可以在这里的React文档中了解更多信息！另外，请注意，在Hooks示例中，它是一个功能组件。在功能组件中使用状态，谁会想到！为什么是方括号？这是使用JavaScript语法"array destructuring"。数组破坏是指我们能够从数组中"解包"值并将它们分配给变量。我们知道这两个变量的名称，然后用它们来表示。一旦设置了这两个变量，useState将能够映射这些值，并知道第一个值的名称为phrase，第二个值的名称为setPhrase。const[firstvalue，secondvalue]=useState（0）；多状态挂钩想在一个组件中使用不止一个状态钩子吗？React允许在一个组件中使用多个状态挂钩：函数LotsOfStates（）{const[name，setName]=useState（"Sarah"）；const[color，setColor]=useState（"蓝色"）；const[shopping，setList]=useState（[{item:"杏仁奶"}]）；我们可以给特定的州起不同的名字，这样事情就有条理了。我们给它起一个名字，比如，颜色或者购物，这样我们就知道我们在和哪一个合作。特效钩React Hooks的另一个出色特性是useEffect的使用。这将处理我们希望在React代码中使用的生命周期方法。以下代码基于React文档中提供的示例：从"react"导入{useState，useEffect}；函数示例（）{const[count，setCount]=useState（0）；//与componentDidMount和componentDidUpdate类似：使用效果（（）=>{//使用浏览器API更新文档标题文件名称=`您单击了${count}次`；});返回(