【react】进阶教程01

一、性能优化策略

1. 组件渲染优化

2. 虚拟 DOM 优化

3. 代码分割（Lazy Loading）

二、高级 Hooks 模式

1. 自定义 Hook

2. useReducer 复杂状态管理

三、状态管理进阶

1. Redux Toolkit 现代 Redux 实践

2. 状态选择器优化

四、高级组件模式

1. Render Props

2. 高阶组件 (HOC)

3. 复合组件（Compound Components）

五、错误边界与异步处理

1. 错误边界（Error Boundaries）

2. Suspense 数据获取

六、TypeScript 集成

1. 组件 Props 类型定义

组件props类型检查

2. 泛型组件

七、测试策略

1. 单元测试（Jest + Testing Library）

2. 端到端测试（Cypress）

八、部署与优化

1. 生产环境构建

2. 性能分析

3. CDN 与缓存策略

九、进阶学习方向

十、推荐资源

一、性能优化策略

1. 组件渲染优化

React.memo：缓存函数组件，避免不必要的渲染（浅比较 props）

const MemoComponent = React.memo(function MyComponent({ data }) {
  return <div>{data}</div>;
});

useMemo：缓存计算结果

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

useCallback：缓存回调函数

const handleClick = useCallback(() => {
  console.log('Clicked:', id);
}, [id]);

2. 虚拟 DOM 优化

避免在渲染函数中进行高开销操作（如复杂计算、DOM 操作）

使用 key 属性稳定化（避免索引作为 key）

3. 代码分割（Lazy Loading）

React.lazy + Suspense：动态加载组件

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

二、高级 Hooks 模式

1. 自定义 Hook

封装可复用的逻辑：

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 使用
function App() {
  const { data, loading } = useFetch('https://api.example.com/data');
  // ...
}

2. `useReducer` 复杂状态管理

替代 useState 处理多层嵌套或关联状态：

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);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}
3. useContext 深度使用

配合 状态管理库 或 主题/全局配置：

const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState({ name: 'John', id: 1 });
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const { user } = useContext(UserContext);
  return <div>{user.name}</div>;
}

三、状态管理进阶

1. Redux Toolkit 现代 Redux 实践

安装：

npm install @reduxjs/toolkit react-redux

创建 Store：

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 },
    decrement: state => { state.value -= 1 }
  }
});

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

export const { increment, decrement } = counterSlice.actions;

连接 React：

import { Provider, useSelector, useDispatch } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{count}</span>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  );
}vvvvvvvv