React常用hooks

React 中的 Hooks 是一系列函数，它们可以让你在函数组件中使用 state 和其他 React 特性。Hooks 的引入使得函数组件更加灵活和强大，不再局限于无状态组件。以下是 React 中一些常用的 Hooks：

1. useState
   • 用于在函数组件中添加 state。它返回一个 state 变量和一个更新该变量的函数。
   • 示例：const [count, setCount] = useState(0);
2. useEffect
   • 用于在组件渲染到 DOM 后执行副作用操作（如数据获取、订阅或手动更改 DOM）。
   • 它可以模拟类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 等生命周期方法。
   • 示例：useEffect(() => { /* 副作用代码 */ }, [dependencies]);
3. useContext
   • 让你能够在函数组件中订阅 React Context 的变化。
   • 示例：const value = useContext(MyContext);
4. useReducer
   • 一个更复杂的 state 管理 Hook，它接受一个 reducer 函数和初始 state，并返回当前的 state 和一个 dispatch 方法来触发 state 更新。
   • 它对于管理组件中的复杂 state 逻辑很有用。
   • 示例：const [state, dispatch] = useReducer(reducer, initialState);
5. useCallback
   • 返回一个记忆化的回调函数版本，只有在它的依赖项改变时才会改变。
   • 这对于优化性能很有帮助，尤其是在将回调函数作为 props 传递给子组件时。
   • 示例：const memoizedCallback = useCallback(() => { /* ...do something... */ }, [deps]);
6. useMemo
   • 返回一个记忆化的值。它只会在其依赖项改变时重新计算该值。
   • 这对于避免在每次渲染时都执行昂贵的计算很有帮助。
   • 示例：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
7. useRef
   • 可以在组件的整个生命周期内保持不变的引用对象。
   • 常用于访问 DOM 节点或在渲染周期之间持久化数据。
   • 示例：const myRef = useRef(initialValue);
8. useImperativeHandle
   • 自定义使用 ref 时暴露给父组件的实例值。
   • 在创建自定义 Hook 或高阶组件时特别有用。
   • 示例：useImperativeHandle(ref, () => ({ /* 自定义实例方法 */ }), [deps]);
9. useLayoutEffect
   • 其语法与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用，可以用于读取 DOM 布局并同步触发重渲染。
   • 在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
   • 示例：useLayoutEffect(() => { /* ...同步读取布局或执行 DOM 操作... */ }, [deps]);
10. useDebugValue
    • 可以用于在 React Developer Tools 中显示自定义的 label。
    • 它对于调试自定义 Hook 很有帮助。
    • 示例：useDebugValue(value);

这些 Hooks 提供了在函数组件中管理 state、执行副作用、访问上下文、优化性能以及创建可重用逻辑的能力。通过组合这些 Hooks，你可以构建出复杂且高效的 React 应用。

设计性能优化的hooks

在React中，设计性能优化的Hooks是提升应用性能的重要手段。以下是一些常用的性能优化Hooks及其使用方式：

1. useMemo

useMemo主要用于缓存计算结果，以避免在每次渲染时都进行昂贵的计算。它返回一个记忆化的值，这个值仅在其依赖项发生变化时才会重新计算。

• 使用场景：当组件需要在渲染过程中进行复杂的计算，而这些计算的结果在多次渲染之间可能保持不变时，可以使用useMemo来优化性能。
• 示例：

jsx复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个例子中，computeExpensiveValue是一个昂贵的计算函数，而a和b是它的依赖项。只有当a或b发生变化时，memoizedValue才会重新计算。

2. useCallback

useCallback用于缓存函数实例，以避免在每次渲染时都创建新的函数实例。这对于将回调函数作为props传递给子组件时特别有用，因为它可以减少不必要的渲染。

• 使用场景：当父组件向子组件传递回调函数，并且这些回调函数在多次渲染之间可能保持不变时，可以使用useCallback来优化性能。
• 示例：

jsx复制代码

	const memoizedCallback = useCallback(() => {
	// do something
	}, [deps]);

在这个例子中，memoizedCallback是一个被记忆化的回调函数，它只在deps数组中的依赖项发生变化时才会更新。

3. React.memo

虽然React.memo本身不是一个Hook，但它与性能优化密切相关。React.memo是一个高阶组件，它允许你指定一个函数组件，并且只有当它的props发生变化时，才会重新渲染组件。

• 使用场景：当你想避免函数组件在props未发生变化时的无谓渲染时，可以使用React.memo。
• 示例：

jsx复制代码

	const MemoizedComponent = React.memo(function MyComponent(props) {
	// 只有当props发生变化时，才会重新渲染
	});

4. useEffect与性能优化

虽然useEffect主要用于处理副作用，但合理使用它也可以帮助提升性能。例如，你可以通过指定依赖项数组来控制副作用的执行时机，从而避免不必要的重复执行。

• 使用场景：当你想在组件加载、更新或卸载时执行某些副作用操作（如数据请求、订阅事件等），并且希望这些操作只在特定条件下执行时，可以使用useEffect。
• 示例：

jsx复制代码

	useEffect(() => {
	// 组件加载或更新时的副作用
	return () => {
	// 清理副作用（如取消订阅、清除定时器等）
	};
	}, [dependencies]);

在这个例子中，副作用只在dependencies数组中的依赖项发生变化时才会执行。同时，返回一个清理函数来在组件卸载或依赖项变化时执行清理操作。

总结

通过使用useMemo、useCallback、React.memo以及合理控制useEffect的执行时机，你可以显著提升React应用的性能。这些Hooks和工具允许你缓存计算结果、函数实例和组件渲染结果，从而避免不必要的计算和渲染。在设计React应用时，务必考虑性能优化，并合理使用这些工具来提升应用的性能和用户体验。

### `useEffect` 的作用
`useEffect` 是 React 中的一个 Hook，用于在函数组件中处理**副作用**。它的主要作用是将组件的渲染逻辑与副作用逻辑分离，使代码更清晰、易于维护。

---

### 什么是副作用？
在 React 中，**副作用**是指那些与组件渲染无关的操作，通常包括：
1. **数据获取**：从 API 获取数据。
2. **订阅或事件监听**：如监听窗口大小变化、键盘事件等。
3. **手动操作 DOM**：直接修改 DOM 元素。
4. **定时器**：如 `setTimeout` 或 `setInterval`。
5. **日志记录**：记录用户行为或调试信息。

这些操作通常不直接参与组件的渲染逻辑，但会影响组件的状态或外部环境。

---

### `useEffect` 的作用详解
`useEffect` 的主要作用是将副作用逻辑与组件的生命周期绑定，确保在适当的时机执行这些操作。具体来说：
1. **在组件挂载时执行**：例如初始化数据、设置订阅。
2. **在组件更新时执行**：例如根据状态变化更新 DOM 或重新获取数据。
3. **在组件卸载时清理**：例如取消订阅、清除定时器。

---

### 副作用示例
#### 1. 数据获取
```javascript
useEffect(() => {
  fetch('/api/data')
    .then(response => response.json())
    .then(data => setData(data));
}, []); // 空依赖数组，仅在组件挂载时执行
```

#### 2. 事件监听
```javascript
useEffect(() => {
  const handleResize = () => {
    console.log(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

  // 清理函数
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // 空依赖数组，仅在组件挂载和卸载时执行
```

#### 3. 定时器
```javascript
useEffect(() => {
  const timer = setInterval(() => {
    console.log('Timer tick');
  }, 1000);

  // 清理函数
  return () => {
    clearInterval(timer);
  };
}, []); // 空依赖数组，仅在组件挂载和卸载时执行
```

---

### 副作用的特点
1. **与渲染无关**：副作用不直接影响组件的渲染结果。
2. **可能影响外部环境**：例如修改全局变量、操作 DOM、发送网络请求等。
3. **需要管理生命周期**：副作用需要在组件挂载、更新或卸载时正确执行或清理。

---

### 总结
- **`useEffect` 的作用**：在函数组件中处理副作用，将副作用逻辑与组件的生命周期绑定。
- **副作用**：与组件渲染无关的操作，如数据获取、订阅、DOM 操作等。
- **使用场景**：数据获取、事件监听、定时器、手动 DOM 操作等。

通过 `useEffect`，React 提供了一种声明式的方式来管理副作用，使代码更易于理解和维护。