React常用Hooks

**React 常用 Hooks**

在 React 中，Hooks 是一种让函数组件"记忆"状态的方式。它们允许你在函数组件中使用 state 和其他的 React 特性，而不需要将其转换为类组件。

下面是常用的 React Hooks：

###1. useState`useState` Hook 允许你在函数组件中添加一个 state 变量和一个更新该变量的方法。

jsximport { useState } from 'react';

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

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

在这个例子中，`useState` Hook 初始化了一个 `count` 变量和一个 `setCount` 方法。每次点击 "+" 按钮时，`setCount` 方法会将 `count` 变量的值加一。

###2. useEffect`useEffect` Hook 允许你在组件渲染后执行某些操作，比如发送网络请求、设置定时器等。

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>Data: {data}</p>
 ) : (
 <p>Loading...</p>
 )}
 </div>
 );
}

在这个例子中，`useEffect` Hook 在组件渲染后发送网络请求，并将返回的数据设置到 `data` 变量中。

###3. useContext`useContext` Hook 允许你访问 React 上下文中的值。

jsximport { createContext, useContext } from 'react';

const ThemeContext = createContext();

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

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

在这个例子中，`useContext` Hook 访问了 React 上下文中的 `theme` 值。

###4. useReducer`useReducer` Hook 允许你使用一个 reducer 来管理 state 变量。

jsximport { 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:
 return state;
 }
}

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

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

在这个例子中，`useReducer` Hook 使用一个 reducer 来管理 `count` 变量。

###5. useCallback`useCallback` Hook 允许你缓存函数，以便在组件重新渲染时重用它们。

jsximport { useState, useCallback } from 'react';

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

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

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

在这个例子中，`useCallback` Hook 缓存了 `increment` 函数，以便在组件重新渲染时重用它。

###6. useMemo`useMemo` Hook 允许你缓存计算结果，以便在组件重新渲染时重用它们。

jsximport { useState, useMemo } from 'react';

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

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

 return (
 <div>
 <p>Count: {count}</p>
 <p>Double Count: {doubleCount}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

在这个例子中，`useMemo` Hook 缓存了 `doubleCount` 的计算结果，以便在组件重新渲染时重用它。

###7. useLayoutEffect`useLayoutEffect` Hook 允许你在组件布局后执行某些操作，比如设置定位器等。

jsximport { useState, useLayoutEffect } from 'react';

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

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

 return (
 <div>
 {data ? (
 <p>Data: {data}</p>
 ) : (
 <p>Loading...</p>
 )}
 </div>
 );
}

在这个例子中，`useLayoutEffect` Hook 在组件布局后发送网络请求，并将返回的数据设置到 `data` 变量中。

###8. useImperativeHandle`useImperativeHandle` Hook 允许你暴露一个函数给父组件，以便在父组件中使用它。

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

在这个例子中，`useImperativeHandle` Hook 暴露了一个 `getValue` 函数给父组件，以便在父组件中使用它。

###9. useDebugValue`useDebugValue` Hook 允许你设置一个调试值，以便在开发者工具中显示它。

jsximport { useState, useDebugValue } from 'react';

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

 useDebugValue(count);

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

在这个例子中，`useDebugValue` Hook 设置了一个调试值，以便在开发者工具中显示 `count` 的当前值。

###10. useTransition`useTransition` Hook 允许你在组件之间进行过渡动画。

jsximport { useState, useTransition } from 'react';

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

 const [isPending, startTransition] = useTransition();

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => startTransition(() => setCount(count +1))}>
 +
 </button>
 {isPending ? (
 <p>Loading...</p>
 ) : (
 <p>Loaded!</p>
 )}
 </div>
 );
}

在这个例子中，`useTransition` Hook 在组件之间进行过渡动画，以便在用户点击 "+" 按钮时显示 "Loading..." 的状态。

以上就是常用的 React Hooks 的使用方法和示例。这些 Hooks 可以帮助你更好地管理组件的状态、执行异步操作、缓存函数等功能，提高你的开发效率和代码质量。