React：告别臃肿，迈向精简代码之道

2023-12-13 08:37:15

前言

为了更高效地开发、维护前端代码，业界普遍推荐将通用性较强的组件或逻辑提取成公共函数或公共组件，减少代码重复，提高代码可维护性。在React中，Custom Hook和HOC（高阶组件）正是实现这一目标的利器，它们能帮助我们创建可复用、可组合的组件，让代码更加简洁、优雅。

了解Custom Hook

Custom Hook是一个React函数，它允许我们在函数组件中使用状态和其他的React特性，而无需编写类组件。Custom Hook可以接受参数，并返回一个值，这个值可以是状态、函数、甚至是其他组件。

创建Custom Hook

import { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return [count, increment, decrement];
};

export default useCounter;

使用Custom Hook

import useCounter from "./useCounter";

const MyComponent = () => {
  const [count, increment, decrement] = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default MyComponent;

理解HOC

HOC是一个函数，它接受一个组件作为参数，并返回一个新的组件。HOC可以用于向组件添加额外的功能，例如数据获取、事件处理、状态管理等。

创建HOC

const withData = (WrappedComponent) => {
  return class extends React.Component {
    state = {
      data: [],
    };

    componentDidMount() {
      fetch("https://example.com/api/data")
        .then((res) => res.json())
        .then((data) => {
          this.setState({ data });
        });
    }

    render() {
      const { data } = this.state;
      return <WrappedComponent data={data} {...this.props} />;
    }
  };
};

使用HOC

import withData from "./withData";

const MyComponent = (props) => {
  const { data } = props;

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
};

export default withData(MyComponent);