react Hook的简单理解

对于钩子（hook)的理解

一句话，钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应。
函数组件的主体只应该用来返回组件的 HTML 代码，所有的其他操作（副效应）都必须通过钩子引入。

哪什么是副效应？

函数式编程将那些跟数据计算无关的操作，都称为 “副效应” 。

为什么要用hook?

首先我们要明白，react有类组件，有函数组件，而函数组件是没有状态，跟生命周期这个概念的。而hook刚好能够弥补这缺陷。
像，useSate,useEffect配合使用，它就有模拟生命周期的感觉，初始化，挂载，更新，卸载的感觉。
它的好处：
代码复用变的更简单
不用记很多生命周期方法
更干净的代码
学习成本低

参考，推荐： 阮一峰写的简单易懂。我只是搬运工。

https://www.ruanyifeng.com/blog/2019/09/react-hooks.html

常见的HookAPI：
基础 Hook
useState
useEffect
useContext
额外的 Hook
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
常见的hook用法

1.useState()状态钩子

作用：useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。
参数：例子：const[data,setData]=useState([]),useState(),()里面传入什么就相当于把data初始化为某一个类型的变量。
data第一个成员是一个变量，指向状态的当前值setData第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名
返回值：该函数返回一个数组

2.useEffect(()=>{},[])副作用钩子

作用：useEffect()的作用就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。
组件首次在网页 DOM 加载后，副效应函数也会执行。

参数：useEffect有两个参数，第一是传一个函数，第二个是一个数组。
如果当useEffect只有一个参数的时候，它就会每次渲染都执行
有时候，我们不希望useEffect()每次渲染都执行，这时可以使用它的第二个参数，
使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。

如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。
因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。
这样相当于初始化，比如说我们只要它加载一次数据的时候就可以使用。
由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。

返回值：useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。

用途：获取数据（data fetching）
事件监听或订阅（setting up a subscription）
改变 DOM（changing the DOM）
输出日志（logging）

3.useContext()共享状态钩子

作用：如果需要在组件之间共享状态，可以使用useContext()，它其实也是一种组件之间的通信方式
使用步骤：
1.就是使用 React Context API，在组件外部建立一个 Context。

const AppContext = React.createContext({});
2.封装

<AppContext.Provider value={{
  username: 'superawesome'
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

3.AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享

const Navbar = () => {
  const { username } = useContext(AppContext);
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

4.useContext()钩子函数用来引入 Context 对象，从中获取username属性。

4.useReducer()：action 钩子

作用：useReducers()钩子用来引入 Reducer 功能。
缘由：React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。
Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，
使用 Reducer 函数算出新的状态，Reducer 函数的形式是(state, action) => newState。
const [state, dispatch] = useReducer(reducer, initialState);
参数：它接受 Reducer 函数和状态的初始值作为参数，
state第一个成员是状态的当前值，dispatch第二个成员是发送 action 的dispatch函数。
返回一个数组。