React优化

React.memo使用.

（1）React.memo是一个HOC，接收两个参数，一个是组件，一个是自定义更新函数（接收prevProps，nextProps）如果返回true，就是没有变。React.memo默认进行浅比较，对对象的属性进行遍历比较,仅比较一层，基本数据类型值相同就是相同，引用数据类型需要地址相同。如果新旧对象key数量不同，则直接更新;

（2）React.memo和useMemo、useCallback联合使用，useMemo缓存大的计数值，useCallBack缓存函数

React.lazy和Suspense联合使用

suspense包裹组件，并且必须传递fallback属性,fallback参数可以是一个组件异步加载时的占位内容。React.lazy和react-router联合使用,减少首屏加载时间，对于很多路由的页面有优势

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';

// 使用 React.lazy 按需加载页面组件
const Home = lazy(() => import('../views/Home'));
const About = lazy(() => import('../views/About'));
const User = lazy(() => import('../views/User'));

const withLoadingComponent = (comp) => (
  <Suspense fallback={<div>Loading...</div>}>
    {comp}
  </Suspense>
);

const routes = [
  {
    path: "/",
    element: <Navigate to="/home" />
  },
  {
    path: "/home",
    element: withLoadingComponent(<Home />)
  },
  {
    path: "/about",
    element: withLoadingComponent(<About />)
  },
  {
    path: "/user",
    element: withLoadingComponent(<User />)
  }
];

const App = () => {
  return (
    <Router>
      <Routes>
        {routes.map((route, index) => (
          <Route key={index} path={route.path} element={route.element} />
        ))}
      </Routes>
    </Router>
  );
};

export default App;

减少props复杂度，避免影响组件浅比较；

注意context使用，内部改变，相关使用context的都会改变；

避免组件嵌套太深；