React Hook 的学习（1）

• Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性.让我们跟着react 官方文档，开启学习之路

• Hook 换言之 使用函数型组件，舍弃 class 组件 。使复用组件更加便捷。

一个简单的Hook （官方文档中使用的例子）

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这段代码中 useState 就是一个Hook useState 会返回一对值：当前状态和一个让你更新它的函数 比如上述 就是声明一个 count 然后会返回一个更新他的函数 setCount。很多人问useState(0)啥意思呢，简单来说就是count 初始化值为 0这样子理解就很简单，通俗。换言之我们也可以声明其他的变量。比如

function ExampleWithManyStates() {
  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

刚才讲了那么多都很简单，但是忘记了说明什么是Hook，为什么会有useState这个api呢。 根据官方文档回应

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React

React 内置了一些像 useState 这样的 Hook。你也可以创建你自己的 Hook 来复用不同组件之间的状态逻辑。

官方说我这里有很多内置的Hook针对基本的api以及一些钩子函数，但我不能做到全部，可以自定义哦。哇哦，这就有趣了。Hook很有趣，很强大。后面再让我们详细去看看那些经典的内置Hook.打完休息下。精彩还在后面。