react 进阶用法

React 进阶用法涵盖了许多更高级的概念和技巧，可以帮助你提升代码的可维护性、性能和开发效率。以下是一些重要的进阶用法：

1. Hooks 深入使用

1.1. useState 和 useReducer

• useState 用于组件的局部状态管理，适合管理简单的状态。
• useReducer 是一个更适合管理复杂状态的 Hook，通常用于状态之间存在复杂关系或者需要更细粒度的更新操作时。

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

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

1.2. useEffect

useEffect 是 React 中用于处理副作用（side effects）的 Hook，通常用来执行 API 请求、设置订阅等操作。

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 只在组件挂载时执行一次
  
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};