【React】常用Hook函数的梳理和总结（第二篇）

功能：为函数组件添加状态变量，输入可是基本数据类型或引用数据类型，也可以是不带参数的纯函数，函数返回值作为初始值，输出则是状态和set函数组成的二值数组

输入：State | Function

输出：Array<State | Function>

const [name, setName] = useState(‘Xiaoming’);

setName(name => name + 'LI');

功能：创建一个用于管理状态的reducer，输出则是状态和dispatch函数组成的二值数组

输入：

reducer - 用于更新state的纯函数，参数为state和action，返回更新后的state

initialArg - 用于初始化state的任意值

init? - 计算初始值的函数，如果存在，init(initialArg)执行结果作为初始值

输出：Array<State | Function>

const [name, dispatch] = useReducer(reducer, {name: 'xiaoming'})

dispatch({name: 'xiaoming'})

功能：将组件与外部系统同步

输入：

setup - 处理Effect的函数，setup函数选择性返回一个清理函数cleanup

dependencies - 依赖项数组

输出：undefined

Effect(() => {

? ? const connection = createConnection();

? ? connection.connect();

return () => {

? ? connection.close();? ??

};

}, []);

功能：useLayoutEffect是useEffect的一个版本，在浏览器重绘屏幕之前触发。

注：可以影响性能，尽可能用useEffect

输入：同useEffect

输出：同useEffect

功能：缓存每次重新渲染都需要计算的结果

输入：

calculateValue - 计算缓存值的不带参数的纯函数，返回值可以是任意类型

dependencies - 依赖项数组

输出：返回不带参数调用calculateValue的结果

const cachedData = useMemo(() =>??filterTodos(todos, tab), [todos, tab])

功能：缓存每次重新渲染都需要计算的结果

输入：

fn - 需要缓存的函数，此函数接受任何参数并返回任何值

dependencies - 依赖项数组

输出：返回传入的fn，依赖项数组改变，则返回本次渲染传入的fn

const handleSubmit = useCallback((orderDetails) => {

? post('/product/' + productId + '/buy', {? ? ?referrer, orderDetails,

});

}, [productId, referrer]);

功能：引用一个不需要渲染的值

输入：initialValue - ref对象current属性的初始值，可以是任意类型

输出：{current: any} - 一个属性的对象

const inputRef = useRef(null);

功能：读取和订阅组件中的context

输入：SomeContext - createContext创建的context

输出：返回context的值

const Context = createContext(/*初始值*/);

const value = useContext(Context);

功能：生成传递给无障碍属性的唯一ID

输入：无

输出：字符串ID

本篇仅列出几个常用的Hook，还有很多Hook，可以查阅

React 内置 Hook – React 中文文档