重构技巧

介绍

重构是指在不改变代码外部行为的前提下，优化代码的内部结构。在 React 中，重构可以帮助你提高代码的可读性、可维护性，甚至性能。对于初学者来说，掌握重构技巧是迈向高效开发的重要一步。

本文将介绍几种常见的 React 重构技巧，并通过代码示例和实际案例帮助你理解如何应用这些技巧。

1. 提取组件

当一个组件变得过于复杂时，可以将其拆分为多个小组件。这不仅使代码更易于理解，还能提高组件的复用性。

示例

重构前：

jsx
function UserProfile({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      <img src={user.avatarUrl} alt={user.name} />
      <button onClick={() => alert(`Follow ${user.name}`)}>Follow</button>
    </div>
  );
}

重构后：

jsx
function UserAvatar({ user }) {
  return <img src={user.avatarUrl} alt={user.name} />;
}

function UserInfo({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}

function FollowButton({ user }) {
  return <button onClick={() => alert(`Follow ${user.name}`)}>Follow</button>;
}

function UserProfile({ user }) {
  return (
    <div>
      <UserInfo user={user} />
      <UserAvatar user={user} />
      <FollowButton user={user} />
    </div>
  );
}

提示

通过提取组件，UserProfile 变得更加简洁，每个小组件也更容易测试和复用。

2. 使用自定义 Hook 提取逻辑

当多个组件共享相同的逻辑时，可以将这些逻辑提取到自定义 Hook 中。这有助于减少重复代码并提高可维护性。

示例

重构前：

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

  useEffect(() => {
    fetchData().then((response) => {
      setData(response);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

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

  useEffect(() => {
    fetchData().then((response) => {
      setData(response);
      setLoading(false);
    });
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

重构后：

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

  useEffect(() => {
    fetchData().then((response) => {
      setData(response);
      setLoading(false);
    });
  }, []);

  return { data, loading };
}

function ComponentA() {
  const { data, loading } = useFetchData();
  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

function ComponentB() {
  const { data, loading } = useFetchData();
  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

备注

自定义 Hook 不仅减少了代码重复，还使逻辑更易于测试和复用。

3. 使用 Context 避免 Prop Drilling

当需要在多个组件之间共享状态时，使用 Context 可以避免通过多层组件传递 props（即 prop drilling）。

示例

重构前：

jsx
function App() {
  const [theme, setTheme] = useState("light");

  return (
    <div>
      <Header theme={theme} />
      <MainContent theme={theme} />
      <Footer theme={theme} />
    </div>
  );
}

function Header({ theme }) {
  return <header className={theme}>Header</header>;
}

function MainContent({ theme }) {
  return <main className={theme}>Main Content</main>;
}

function Footer({ theme }) {
  return <footer className={theme}>Footer</footer>;
}

重构后：

jsx
const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <div>
        <Header />
        <MainContent />
        <Footer />
      </div>
    </ThemeContext.Provider>
  );
}

function Header() {
  const theme = useContext(ThemeContext);
  return <header className={theme}>Header</header>;
}

function MainContent() {
  const theme = useContext(ThemeContext);
  return <main className={theme}>Main Content</main>;
}

function Footer() {
  const theme = useContext(ThemeContext);
  return <footer className={theme}>Footer</footer>;
}

警告

虽然 Context 很方便，但过度使用可能导致组件依赖过多，影响性能。仅在必要时使用。

4. 使用 Memoization 优化性能

当组件的渲染开销较大时，可以使用 React.memo 或 useMemo 来避免不必要的重新渲染。

示例

重构前：

jsx
function ExpensiveComponent({ data }) {
  // 假设这是一个计算量很大的组件
  const result = expensiveCalculation(data);
  return <div>{result}</div>;
}

重构后：

jsx
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  const result = useMemo(() => expensiveCalculation(data), [data]);
  return <div>{result}</div>;
});

注意

React.memo 和 useMemo 应谨慎使用，过度优化可能导致代码复杂度增加。

实际案例：重构一个 Todo 应用

假设我们有一个简单的 Todo 应用，以下是重构前后的对比：

重构前：

jsx
function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue("");
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

重构后：

jsx
function TodoInput({ value, onChange, onAdd }) {
  return (
    <div>
      <input value={value} onChange={onChange} />
      <button onClick={onAdd}>Add Todo</button>
    </div>
  );
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const addTodo = () => {
    setTodos([...todos, inputValue]);
    setInputValue("");
  };

  return (
    <div>
      <TodoInput
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onAdd={addTodo}
      />
      <TodoList todos={todos} />
    </div>
  );
}

提示

通过提取 TodoInput 和 TodoList 组件，代码变得更加模块化和易于维护。

总结

重构是提升代码质量的重要手段。通过提取组件、使用自定义 Hook、避免 prop drilling 以及优化性能，你可以使 React 应用更加高效和可维护。

附加资源

练习

尝试将一个复杂的组件拆分为多个小组件。
将共享逻辑提取到自定义 Hook 中。
使用 Context 重构一个需要多层传递 props 的应用。

Happy coding! 🚀

介绍​

1. 提取组件​

示例​

2. 使用自定义 Hook 提取逻辑​

示例​

3. 使用 Context 避免 Prop Drilling​

示例​

4. 使用 Memoization 优化性能​

示例​

实际案例：重构一个 Todo 应用​

总结​

附加资源​

练习​

介绍

1. 提取组件

示例

2. 使用自定义 Hook 提取逻辑

示例

3. 使用 Context 避免 Prop Drilling

示例

4. 使用 Memoization 优化性能

示例

实际案例：重构一个 Todo 应用

总结

附加资源

练习