旧调重弹之谈钩子、高阶组件、渲染道具

2023-12-18 00:14:57

伴随着前端界面的开发如火如荼的进行，许多开发人员会不自觉的考虑一个问题，那就是在 React 中如何创建和使用可重用组件。众所周知，可重用组件通常被认为是创建和维护一个大型项目的基础，也因此诞生了许多种在 React 中创建和使用可重用组件的模式，高阶组件（HOC）、渲染道具（Render Props）和钩子（Hooks）就是其中最具代表性的三种模式。

高阶组件（HOC）

高阶组件是一种 React 模式，它允许你创建一个新的组件，这个新的组件将增强另一个组件。HOC 非常适合用于向组件添加新的功能，而无需修改组件本身。例如，你可以使用 HOC 来向组件添加日志记录或错误处理功能。

const withLogging = (WrappedComponent) => {
  return (props) => {
    console.log('Rendering', props);
    return <WrappedComponent {...props} />;
  };
};

const MyComponent = (props) => {
  return <div>{props.name}</div>;
};

const LoggedMyComponent = withLogging(MyComponent);

在上面的例子中，withLogging 是一个高阶组件，它将 MyComponent 包装成一个新的组件 LoggedMyComponent。LoggedMyComponent 继承了 MyComponent 的所有属性，同时还添加了一个新的功能，即在每次渲染时都会将组件的属性打印到控制台。

渲染道具（Render Props）

渲染道具是一种 React 模式，它允许你将一个组件的渲染逻辑传递给另一个组件。这对于创建可重用的组件非常有用，这些组件可以根据传入的属性渲染不同的内容。例如，你可以创建一个渲染道具组件，该组件可以根据传入的属性渲染一个列表或一个表格。

const RenderList = (props) => {
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

const RenderTable = (props) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {props.items.map((item) => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const MyComponent = (props) => {
  return (
    <div>
      {props.render({ items: props.items })}
    </div>
  );
};

在上面的例子中，MyComponent 是一个组件，它接受一个 render 属性，该属性是一个函数。RenderList 和 RenderTable 都是渲染道具组件，它们可以根据传入的属性渲染不同的内容。MyComponent 将 render 属性传递给 RenderList 或 RenderTable，这些组件根据接收到的属性渲染不同的内容。

钩子（Hooks）

钩子是一种 React 模式，它允许你在函数组件中使用状态和生命周期方法。钩子非常适合用于创建简单的组件，这些组件不需要使用类组件的全部功能。例如，你可以使用钩子创建一个组件，该组件在每次渲染时都会将组件的属性打印到控制台。

import { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count:', count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};