给新手看的 React Hooks 教程 _React

"Hooks 到底是个啥玩意儿？？？"
你是不是有这样的疑惑？在你自认为已经了解了差不多 React 所有的内容的时候， Hooks 就这么出现了。
这就是前端开发人员的日常，技术从未停止更新。
学习新东西是一件很棒的事情吗？当然是！但有的时候我们又不得不思考：”为什么要学它？这个新东西有啥意义？我是必须得学他吗？“ 。
针对 Hooks 而言，上面的这个问题答案是否定的，你不需要立马就学它。如果您一直在使用 React ，并且迄今为止一直在使用基于类的组件，那么就不必急于转向 Hooks 。Hooks 是可选的，可以与现有组件配合使用。我相信当你因为要使用新东西而不得不重写整个代码库，你整个人都是崩溃的。
在函数组件中使用状态在使用 Hooks 之前，我们不能在函数组件中使用状态。这就意味着，如果您有一个经过精心设计和测试的函数组件，突然需要存储状态，那么你就不得不把他重构为一个类组件。
牛逼的来了， Hooks 让函数组件也能使用状态，就意味着我们不需要重构之前自己的写的代码，可以点击这篇文章查看更多。
类组件很笨重我们不得不承认的是，类组件附带了太多的东西。constructor ， binding ， “this”无处不在。使用函数组件可以消除许多这种情况，能让我们的代码更容易维护。
可以在React文档中了解更多相关内容
更高的可读性由于 Hooks 允许我们在函数组件中使用状态，因此和类组件相比，这意味同样的功能，我们写出来的代码会更好。这也会让我们的代码更具可读性。我们再也不用担心方法是不是绑定了 this ，也不必记住 this 之间的关系等等。我们可以专心写代码了。
React State Hook状态，是React生态系统的基础。接下来我将通过介绍最常见的 Hook —— useState() 来让大家初步了解 Hooks 。
我们先来看一下具有状态的类组件。
import React, { Component } from 'react';import './styles.css';class Counter extends Component {state = {count: this.props.initialValue,};setCount = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><h2>This is a counter using a class</h2><h1>{this.state.count}</h1><button onClick={this.setCount}>Click to Increment</button></div>);}}export default Counter;有了React Hooks 之后，我们可以重写这个类组件并删除很多内容，使其更易理解
import React, { useState } from 'react';function CounterWithHooks(props) {const [count, setCount] = useState(props.initialValue);return (<div><h2>This is a counter using hooks</h2><h1>{count}</h1><button onClick={() => setCount(count + 1)}>Click to Increment</button></div>);}export default CounterWithHooks;代码变少了，但这到底是啥情况呢？
React State Syntax在上面的代码里，我们已经用到了人生中第一个 React Hook
const [count, setCount] = useState();简单来讲，这里使用了数组的结构赋值。
useState() 函数为我们提供了两个东西:
* 一个保存状态值的变量，在本例中称为count;* 一个更改值的函数，在本例中称为setCount 。当然，你可以为这两个东西起任何你想要的名字。
const [myCount, setCount] = useState(0);而且，你也可以在你的代码中像使用正常变量/函数一样去用它们。
function CounterWithHooks() {const [count, setCount] = useState();return (<div><h2>This is a counter using hooks</h2><h1>{count}</h1><button onClick={() => setCount(count + 1)}>Click to Increment</button></div>);}注意最上面的的useState Hook 。我们声明、结构了2个东西：