使用react-hooks及在项目中使用react-hooks遇到的一些问题的解决

什么是Hook？
Hook是React16.8的新增特性。它可以让我们在不编写class的情况下使用state以及其他react的特性。
Hook 是一些可以让我们在函数组件里“钩入” React state 及生命周期等特性的函数。他可以让我们不使用 class 也能使用 React。

先看一下类组件和函数式组件在实现同一个功能时，两者的区别。

class组件

import React, { Component } from “react”;

export default class Button extends Component {
constructor() {
super();
this.state = { buttonText: “Click me, please” };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(() => {
return { buttonText: “Thanks, been clicked!” };
});
}
render() {
const { buttonText } = this.state;
return {buttonText};
}
}
hooks函数式组件

import React, { useState } from “react”; // 引入useState

export default function Button() {
const [buttonText, setButtonText] = useState(“Click me, please”); // 调用 useState 声明了一个新的 state 变量。它返回一对值给到我们命名的变量上。
// const [loading, setLoading] = useState(false) 如果需要多个变量，可以通过调用多次useState来声明
function handleClick() {
return setButtonText(“Thanks, been clicked!”); // 用户点击按钮后，我们传递一个新的值给 setCount。React 会重新渲染 Button 组件，并把最新的 值 传给它。
}

return {buttonText};
}
对比两种组件，以看出class组件的代码相对于函数式组件显得很笨重，层级很多，如果再加入redux的话就会变得更加复杂。

hooks常用的钩子：
1.状态钩子 useState
2.副作用钩子 useEffect
3. 共享状态钩子 useContext (我没用过。。。)
4. useCallback和useMemo
5.useRef

useState:
用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

（1）useState()这个函数接受状态的初始值，作为参数，上例的初始值为按钮的文字。该函数返回一个数组，数组的第一个成员是一个变量（上例是buttonText），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（上例是setButtonText）。

（2）如果需要多个变量，可以通过调用多次useState来声明。

（3）需要注意，useState是异步的 ，如果需要处理异步，可以使用useEffect来监听state是否发生变化，从而进行操作。（具体事例见后useEffect）。