React是一款非常流行的JavaScript库，它提供了许多Hooks，用于管理函数组件的状态和生命周期。下面是React的每个Hooks的使用场景和示例：
No1、useState
useState用于在函数组件中管理状态。
它返回一个包含当前状态和一个更新状态的函数的数组。更新状态的函数可以接受一个新的值，并更新状态。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return <button onClick={handleClick}>Count: {count}</button>;
}
No2、useEffect
useEffect用于在函数组件中处理副作用。
它接受两个参数：一个副作用函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，副作用函数将被调用。
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(time + 1);
}, 1000);
<span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">clearInterval</span><span class="token punctuation">(</span>interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
}, [time]);
return <div>Time: {time}</div>;
}
No3、useContext
useContext用于在函数组件中使用上下文。
它接受一个上下文对象并返回上下文的当前值。当上下文的值发生变化时，函数组件将重新渲染。
import React, { createContext, useContext } from 'react';const ThemeContext = createContext('light');
function Header() {
const theme = useContext(ThemeContext);return (
<header style={{ background: theme }}>
<h1>My App</h1>
</header>
);
}function App() {
return (
<ThemeContext.Provider value="dark">
<Header />
</ThemeContext.Provider>
);
}
No4、useReducer
useReducer用于在函数组件中管理复杂的状态。
它接受一个reducer函数和一个初始状态，并返回一个包含当前状态和一个派发操作的数组。派发操作将一个操作对象发送到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);function handleIncrement() {
dispatch({ type: 'increment' });
}function handleDecrement() {
dispatch({ type: 'decrement' });
}return (
<>
<button onClick={handleIncrement}>+</button>
<span>{state.count}</span>
<button onClick={handleDecrement}>-</button>
</>
);
}
No5、useCallback
useCallback用于在函数组件中缓存回调函数。
它接受一个回调函数和一个依赖数组，并返回一个缓存的回调函数。当依赖数组中的任何一个值发生变化时，缓存的回调函数将被更新。
import React, { useState, useCallback } from 'react';function Parent() {
const [count, setCount] = useState(0);const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);return (
<>
<Child onClick={handleClick} />
<span>Count: {count}</span>
</>
);
}function Child({ onClick }) {
return <button onClick={onClick}>Click me</button>;
}
No6、useMemo
useMemo用于在函数组件中缓存计算结果。
它接受一个计算函数和一个依赖数组，并返回一个缓存的计算结果。当依赖数组中的任何一个值发生变化时，计算函数将被重新计算。
import React, { useMemo } from 'react';
function ExpensiveComponent({ value1, value2 }) {
const result = useMemo(() => {
console.log('calculating result');
return value1 * value2;
}, [value1, value2]);
return <div>Result: {result}</div>;
}
No7、useRef
useRef用于在函数组件中引用DOM元素或其他值。
它返回一个包含可变引用的对象。当在函数组件中传递该对象时，它将保留其引用，即使组件重新渲染。
import React, { useRef } from 'react';function Input() {
const inputRef = useRef(null);function handleClick() {
inputRef.current.focus();
}return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus input</button>
</>
);
}
以上是React的每个Hooks的使用场景和示例。这些Hooks可以帮助我们更加方便地管理状态和生命周期，并且提高代码的可读性和可维护性。
总结
useState：用于在函数组件中管理状态。可以用于跟踪和更新组件的内部状态，例如表单输入、开关状态、计数器等。
useEffect：用于处理副作用操作，例如数据获取、订阅事件、DOM操作等。可以在组件渲染后执行一些操作，也可以在组件卸载前进行清理操作。
useContext：用于在组件之间共享数据。可以创建一个全局的上下文，并在组件树中的多个组件中访问和更新该上下文。
useReducer：用于管理复杂的状态逻辑。可以用于替代useState，特别适用于具有复杂状态转换的组件，例如有限状态机、游戏状态等。
useCallback：用于性能优化。可以缓存函数实例，以便在依赖项不变的情况下避免不必要的函数重新创建，提高组件的性能。
useMemo：用于性能优化。可以缓存计算结果，以便在依赖项不变的情况下避免重复计算，提高组件的性能。
useRef：用于在函数组件中保存可变值的引用。可以用于保存DOM元素的引用、保存上一次渲染的值等。