React的hook

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hooks 的引入极大地简化了 React 组件的逻辑，并使得函数组件更加强大和灵活。

以下是一些常用的 React Hooks：

1. useState

useState 允许你在函数组件中添加局部状态。它返回一个状态变量和一个更新该状态的函数。

	import React, { useState } from 'react';
	function Example() {
	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 类似于 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的组合。它用于执行副作用操作，如数据获取、订阅或手动更改 DOM。

	import React, { useState, useEffect } from 'react';
	function Example() {
	const [count, setCount] = useState(0);
	useEffect(() => {
	document.title = `You clicked ${count} times`;
	});
	return (
	<div>
	<p>You clicked {count} times</p>
	<button onClick={() => setCount(count + 1)}>
	Click me
	</button>
	</div>
	);
	}

3.useContext

useContext 允许你订阅 React 的 Context。这使得你可以在不明确地通过组件树逐层传递 props 的情况下访问某些值。

	import React, { useContext } from 'react';
	import MyContext from './MyContext';
	function MyComponent() {
	const value = useContext(MyContext);
	// ...
	}

4. useReducer

对于包含多个子状态的大型组件，使用 useReducer 可以更好地管理状态。它类似于 Redux 的 reducer，但专为组件的本地状态设计。

	import React, { useReducer } from 'react';
	const initialState = { count: 0 };
	function reducer(state, action) {
	switch (action.type) {
	case 'increment':
	return { count: state.count + 1 };
	case 'decrement':
	return { count: state.count - 1 };
	default:
	throw new Error();
	}
	}
	function Counter() {
	const [state, dispatch] = useReducer(reducer, initialState);
	return (
	<>
	Count: {state.count}
	<button onClick={() => dispatch({ type: 'increment' })}>+</button>
	<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
	</>
	);
	}

5. useCallback

useCallback 返回一个记忆的回调函数。只有当依赖项发生变化时，它才会返回一个新的回调函数。这有助于避免在渲染时创建不必要的回调函数，从而提高性能。
6. useMemo

useMemo 返回一个记忆的值。它只在某个依赖项改变时重新计算。这有助于避免在每次渲染时都执行高开销的计算。
7. useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
8. useLayoutEffect

其 API 与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
9. useDebugValue

useDebugValue 可以用于在 React Developer Tools 中为自定义 Hooks 添加标签。这对于调试复杂的组件树非常有用。

这些 Hooks 为 React 开发者提供了更灵活、更强大的工具来构建复杂的应用。你可以单独使用它们，也可以将它们组合起来以创建自定义 Hooks，从而进一步抽象和重用组件逻辑。