React18 Hooks【useState、useEffect等】

**React18 Hooks**

React18 是 React 的最新版本，它带来了许多新的特性和改进。其中最重要的就是 Hooks，这是一种让你在函数组件中使用状态和其他 React 特性的方式。

### useState Hook`useState` 是最常用的 Hooks之一，它允许你在函数组件中添加状态。

**示例代码**

jsximport { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
 <div>
 <p>计数:{count}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

**注释**

* `useState` 接收一个初始值作为参数，返回一个状态数组 `[state, setState]`。
* `state` 是当前状态的值。
* `setState` 是更新状态的函数。

### useEffect Hook`useEffect` 是另一个常用的 Hooks，它允许你在组件渲染后执行副作用代码，如网络请求或 DOM 操作。

**示例代码**

jsximport { useState, useEffect } from 'react';

function FetchData() {
 const [data, setData] = useState(null);

 useEffect(() => {
 fetch(' /> .then(response => response.json())
 .then(data => setData(data));
 }, []);

 return (
 <div>
 {data && <p>数据:{JSON.stringify(data)}</p>}
 </div>
 );
}

**注释**

* `useEffect` 接收一个回调函数作为参数，这个回调函数会在组件渲染后执行。
* 第二个参数是依赖数组，表示这个回调函数的执行依赖于哪些状态或 props 的变化。

### useContext Hook`useContext` 是用于访问 React 上下文的 Hooks。

**示例代码**

jsximport { createContext, useContext } from 'react';

const ThemeContext = createContext();

function App() {
 const theme = useContext(ThemeContext);

 return (
 <div>
 <p>主题:{theme}</p>
 </div>
 );
}

**注释**

* `createContext` 创建一个上下文对象。
* `useContext` 接收这个上下文对象作为参数，返回当前组件的上下文值。

### useReducer Hook`useReducer` 是用于管理状态的 Hooks，它比 `useState` 更灵活和高级。

**示例代码**

jsximport { useReducer } from 'react';

const initialState = {
 count:0,
};

function reducer(state, action) {
 switch (action.type) {
 case 'INCREMENT':
 return { ...state, count: state.count +1 };
 case 'DECREMENT':
 return { ...state, count: state.count -1 };
 default:
 throw new Error(`未知类型:${action.type}`);
 }
}

function Counter() {
 const [state, dispatch] = useReducer(reducer, initialState);

 return (
 <div>
 <p>计数:{state.count}</p>
 <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
 <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
 </div>
 );
}

**注释**

* `useReducer` 接收一个 reducer 函数和初始状态作为参数，返回当前状态和 dispatch 函数。
* `reducer` 函数用于更新状态。

### useCallback Hook`useCallback` 是用于缓存函数的 Hooks，它可以避免每次渲染时都创建新的函数实例。

**示例代码**

jsximport { useState, useCallback } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 const increment = useCallback(() => {
 setCount(count +1);
 }, []);

 return (
 <div>
 <p>计数:{count}</p>
 <button onClick={increment}>+</button>
 </div>
 );
}

**注释**

* `useCallback` 接收一个函数作为参数和依赖数组，返回缓存的函数实例。

### useMemo Hook`useMemo` 是用于缓存计算结果的 Hooks，它可以避免每次渲染时都执行相同的计算。

**示例代码**

jsximport { useState, useMemo } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 const doubleCount = useMemo(() => count *2, [count]);

 return (
 <div>
 <p>计数:{count}</p>
 <p>双倍计数:{doubleCount}</p>
 </div>
 );
}

**注释**

* `useMemo` 接收一个计算函数和依赖数组作为参数，返回缓存的计算结果。

### useLayoutEffect Hook`useLayoutEffect` 是用于在组件渲染后执行 DOM 操作或其他布局相关操作的 Hooks，它比 `useEffect` 更早执行。

**示例代码**

jsximport { useState, useLayoutEffect } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 useLayoutEffect(() => {
 console.log('组件渲染后执行');
 }, []);

 return (
 <div>
 <p>计数:{count}</p>
 </div>
 );
}

**注释**

* `useLayoutEffect` 接收一个回调函数和依赖数组作为参数，返回当前组件的 DOM 节点。

### useImperativeHandle Hook`useImperativeHandle` 是用于暴露组件实例给父组件的 Hooks，它可以让父组件访问子组件的方法或属性。

**示例代码**

jsximport { useState, forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
 const [value, setValue] = useState('');

 useImperativeHandle(ref, () => ({
 getValue: () => value,
 }));

 return (
 <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
 );
});

function Parent() {
 const inputRef = useRef(null);

 return (
 <div>
 <MyInput ref={inputRef} />
 <button onClick={() => console.log(inputRef.current.getValue())}>获取值</button>
 </div>
 );
}

**注释**

* `useImperativeHandle` 接收一个回调函数和依赖数组作为参数，返回当前组件的实例。

### useDebugValue Hook`useDebugValue` 是用于在 React DevTools 中显示 Hooks 的值的 Hooks，它可以让开发者更好地理解组件的行为。

**示例代码**

jsximport { useState, useDebugValue } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 useDebugValue({ count });

 return (
 <div>
 <p>计数:{count}</p>
 </div>
 );
}

**注释**

* `useDebugValue` 接收一个值作为参数，返回当前组件的值。

以上就是 React18 Hooks 的使用方法和示例代码。通过这些 Hooks，你可以在函数组件中实现状态管理、副作用处理、上下文访问等功能。