一、React Hooks是什么

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如：

• 难以重用和共享组件中的与状态相关的逻辑
• 逻辑复杂的组件难以开发与维护，当我们的组件需要处理多个互不相关的 local state 时，每个生命* 周期函数中可能会包含着各种互不相关的逻辑在里面
• 类组件中的this增加学习成本，类组件在基于现有工具的优化上存在些许问题
• 由于业务变动，函数组件不得不改为类组件等等

在以前，函数组件也被称为无状态的组件，只负责渲染的一些工作

因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理

二、一些常用的Hooks以及各自的作用

1、useState

创建数据状态，方法里的参数为state默认的值，返回值是一个数组，第一个值为当前的state，第二个值为更新state的函数

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>);
}

2、useEffect

可以进行带有副作用的操作，useEffect第一个参数接受一个回调函数，第二个参数是一个数组，数组元素指定特定值是否在两次渲染中发生变化，没有变化则跳过effect的调用

import { useEffect, useState } from "react";
export default function App() {const [count, setCount] = useState(0)const handleIncrement = () => setCount(count + 1)const handleDecrement = () => setCount(count - 1)useEffect(() => {console.log('useEffect');}, [count])return (<div style={{ padding: 10 }}><button onClick={handleIncrement}>+</button><span>{count}</span><button onClick={handleDecrement}>-</button></div>);
}

3、useContext

用作组件通信

import { createContext, useContext } from "react";export function Section({ children }) {const level = useContext(LevelContext);return (<section className="section"><LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider></section>);
}export function Heading({ children }) {const level =  useContext(LevelContext);switch (level) {case 1:return <h1>{children}</h1>;case 2:return <h2>{children}</h2>;case 3:return <h3>{children}</h3>;case 4:return <h4>{children}</h4>;case 5:return <h5>{children}</h5>;case 6:return <h1>{children}</h1>;default:throw Error("未知的 level： " + level);}
}const LevelContext = createContext(0);export default function App() {return (<div><Section><Heading>主标题</Heading><Section><Heading>副标题</Heading><Heading>副标题</Heading><Heading>副标题</Heading><Section><Heading>子标题</Heading><Heading>子标题</Heading><Heading>子标题</Heading><Section><Heading>子子标题</Heading><Heading>子子标题</Heading><Heading>子子标题</Heading></Section></Section></Section></Section></div>);
}

4、useMemo

用作数据缓存

import { useMemo, useState } from "react";function DoSomeMath({value}){const result = useMemo(() => {console.log('DoSomeMath执行了');let result = 0for(let i = 0; i < 1000000; i++){result += value * 2}return result}, [value])return (<div><p>输入内容：{value}</p><p>经过复杂计算的数据：{result}</p></div>)
}export default function App() {const [inputValue, setInputValue] = useState(5)const [count, setCount] = useState(0)return (<div><p>count的值为：{count}</p><button onClick={() => setCount(count  + 1)}>点击更新</button><br/><br/><input type="number"value={inputValue}onChange={(e) => setInputValue(parseInt(e.target.value))}/><DoSomeMath value={inputValue}/></div>);
}

5、useCallback

用作函数缓存

import { memo, useCallback, useState } from "react";// memo将组件变更为一个记忆组件，如果向这个组件传入的prop没有出现变话，它就不会受到父组件更新的影响
const Button = memo(function ({ onClick }) {console.log("Button渲染了");return <button onClick={onClick}>子组件</button>;
}); export default function App() {const [count, setCount] = useState(0)const handleClick = useCallback(() => {console.log("点击按钮");}, []);const handleUpdate = () => {setCount(count + 1)}return (<div><p>Count：{count}</p><button onClick={handleUpdate}>点击</button><br /><Button onClick={handleClick} /></div>);
}

6、useReducer

用作state的统一管理状态，可用useState代替

import { useReducer } from "react";
function countReducer(state, action){switch (action.type){case "increment":return state + 1case "decrement":return state - 1default: throw new Error()}
}
export default function App(){// 计数器// const [count, setCount] = useState(0)// const handleIncrement = () => setCount(count + 1)// const handleDecrement = () => setCount(count - 1)const [state, dispatch] = useReducer(countReducer, 0);const handleIncrement = () => dispatch({ type: "increment" });const handleDecrement = () => dispatch({ type: "decrement" });return (<div style={{ padding: 10 }}><button onClick={handleIncrement}>+</button>{/* <span>{count}</span> */}<span>{state}</span><button onClick={handleDecrement}>-</button></div>);
}

7、useRef

用作获取DOM结构和引用之前的状态值

// react hooks，useRef，引用之前的状态值
import { useRef, useState } from "react";export default function App(){const [count, setCount] = useState(0)const prevCount = useRef()function handleClick(){prevCount.current = countsetCount(count + 1)}return (<div style={{ padding: 10 }}><p>最新的count：{count}</p><p>上次的count：{prevCount.current}</p><button onClick={handleClick}>增大的count</button></div>);
}

// react hooks，useRef，引用页面中的标签
import { useRef } from "react";export default function App(){const inputRef = useRef(null)function handleClick(){inputRef.current.focus()}return (<div style={{ padding: 10 }}><input type="text" ref={inputRef} /><button onClick={handleClick}>增大的count</button></div>);
}

// react hooks，useRef，引用页面中的其他组件进行子组件功能访问
import { forwardRef, useImperativeHandle, useRef } from "react";
const Child = forwardRef(function (props, ref) {useImperativeHandle(ref, () => ({// 暴露父组件的方法myFn: () => {console.log("子组件的myFn方法");},}));return <div>子组件</div>;
});export default function App() {const childRef = useRef();function handleClick() {childRef.current.myFn()}return (<div><Child ref={childRef} /><button onClick={handleClick}>按钮</button></div>);
}