重生之我在chatgpt中学习React 第五天-前端-E先生的博客

React 学习指南 - 第五天

1. React 自定义 Hook

今天我们将学习如何创建自定义 Hook，以便复用组件逻辑。自定义 Hook 是将组件中共享的逻辑抽象出来，让它们在不同组件间复用。

1.1 创建一个简单的自定义 Hook

自定义 Hook 本质上是一个函数，它可以调用其他 Hook，并返回需要的值或方法。一个常见的例子是使用 useState 和 useEffect 来处理窗口大小的变化：

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
}

function App() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Window width: {width}px</p>
      <p>Window height: {height}px</p>
    </div>
  );
}

export default App;

useWindowSize 是一个自定义 Hook，用来监听窗口大小变化并返回当前窗口的宽度和高度。
组件 App 使用这个 Hook 来显示窗口大小。

1.2 复用逻辑

你可以使用自定义 Hook 来提取和复用任何业务逻辑，比如表单处理、动画、API 请求等。

// useLocalStorage.js
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

import React from 'react';
import useLocalStorage from './useLocalStorage';

function App() {
  const [name, setName] = useLocalStorage('name', 'Guest');

  return (
    <div>
      <p>Welcome, {name}!</p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default App;

useLocalStorage 自定义 Hook 用于从 localStorage 中读取和更新数据。
组件 App 使用它来管理用户的名字，并在每次修改时将其保存到浏览器的 localStorage。

2. React Suspense 和 Lazy Loading

在大型应用中，按需加载（Lazy Loading）是提升性能的一个重要技术。React 提供了 React.lazy 和 Suspense 来支持代码拆分和懒加载。

2.1 使用 `React.lazy` 和 `Suspense`

React.lazy 允许你动态地加载组件，只有在需要时才会加载。Suspense 用于包裹懒加载的组件并处理加载状态。

import React, { Suspense } from 'react';

// 使用 React.lazy 动态加载组件
const OtherComponent = React.lazy(() => import('./OtherComponent'));

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

export default App;

React.lazy 接受一个函数，该函数返回一个 import() 语句，用来懒加载组件。
Suspense 包裹懒加载组件，并通过 fallback 属性显示加载状态，直到组件加载完毕。

2.2 按需加载路由

如果你的应用使用了 React Router，你可以将路由组件也按需加载。

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

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在这个例子中，Home 和 About 组件将只在用户访问对应路由时加载，而不是在初始加载时加载所有组件。

3. React 高级性能优化技巧

随着应用变得更复杂，性能优化变得尤为重要。今天我们继续学习更多关于性能优化的技巧。

3.1 懒加载组件

使用懒加载将组件拆分成更小的部分，以便按需加载，避免加载不必要的代码，提高页面加载速度。

使用 React.lazy 和 Suspense 进行按需加载组件。
使用 React.Suspense 来处理加载状态，避免显示空白页面。

3.2 `shouldComponentUpdate` 和 `React.memo`

对于类组件，shouldComponentUpdate 允许我们控制组件何时重新渲染，避免不必要的渲染。对于函数组件，React.memo 实现了类似的功能。

const MemoizedComponent = React.memo(function Component({ prop }) {
  console.log('Rendering...');
  return <div>{prop}</div>;
});

React.memo 可以帮助我们避免组件在 props 没有变化时重新渲染，优化性能。

3.3 避免不必要的重新渲染

确保组件在渲染时只有在真正必要时才更新。使用 useMemo 和 useCallback 可以避免函数和计算值每次都被重新计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

useMemo 用于缓存计算结果。
useCallback 用于缓存函数引用，防止每次渲染时重新创建函数。

4. 小结

自定义 Hook：你学会了如何创建自定义 Hook 来提取和复用逻辑，提升代码的可维护性和复用性。
Suspense 和懒加载：通过 React.lazy 和 Suspense 实现按需加载组件和路由，优化了应用的性能。
性能优化技巧：了解了如何使用 React.memo、useMemo、useCallback 等技术来避免不必要的渲染和计算，提高应用的性能。

今天，你不仅学到了如何创建自定义 Hook，还了解了如何通过懒加载和性能优化技巧提升应用的性能。这些技巧会在构建大型、复杂应用时大有帮助。