让你快速上手的React组件封装技巧：HOC、Render Props、Hook

2023-11-06 03:03:59

在React项目开发的过程中，减少代码冗余、提供代码质量、加强代码的可维护性，都是我们经常要考虑的问题。接下来，我们将用HOC、Render Props、Hook这三种方式，示范一些常用的组件封装的技巧。

技巧一：高阶组件（HOC）

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。它允许你将一个组件作为另一个组件的参数传递，并返回一个新的组件。这种技术可以用来共享组件之间的逻辑，例如数据获取、事件处理或状态管理。

例子：

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

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

    render() {
      const { data } = this.state;

      return <WrappedComponent data={data} />;
    }
  };
};

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

  return (
    <div>
      <h1>My Component</h1>
      <ul>
        {data && data.map((item) => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
};

const MyWithDataComponent = withData(MyComponent);

在上面的例子中，我们创建了一个高阶组件withData，它接受一个组件作为参数，并返回一个新的组件。这个新组件继承了父组件的所有属性，并增加了新的功能，即从API中获取数据。

我们还可以使用高阶组件来实现代码重用。例如，我们可以创建一个withLoading高阶组件，它将为组件添加一个加载指示器。

const withLoading = (WrappedComponent) => {
  return class extends React.Component {
    state = { isLoading: true };

    componentDidMount() {
      setTimeout(() => this.setState({ isLoading: false }), 1000);
    }

    render() {
      const { isLoading } = this.state;

      return isLoading ? <Loading /> : <WrappedComponent />;
    }
  };
};

const MyComponent = () => {
  return (
    <div>
      <h1>My Component</h1>
      <p>This component is loading...</p>
    </div>
  );
};

const MyWithLoadingComponent = withLoading(MyComponent);

技巧二：Render Props

Render Props是一种在组件之间传递数据或函数的方法。它允许你将组件的渲染逻辑从组件本身中分离出来，并将其传递给另一个组件。这可以使你的组件更加灵活和可重用。

例子：

const ThemeContext = React.createContext();

const ThemeProvider = (props) => {
  return (
    <ThemeContext.Provider value={props.theme}>
      {props.children}
    </ThemeContext.Provider>
  );
};

const MyComponent = (props) => {
  const theme = React.useContext(ThemeContext);

  return (
    <div>
      <h1>My Component</h1>
      <p>The current theme is: {theme}</p>
    </div>
  );
};

const App = () => {
  return (
    <ThemeProvider theme="dark">
      <MyComponent />
    </ThemeProvider>
  );
};

在上面的例子中，我们创建了一个ThemeContext上下文，它用于在组件之间传递主题数据。我们还创建了一个ThemeProvider组件，它将主题数据提供给其子组件。最后，我们创建了一个MyComponent组件，它使用React.useContext钩子从ThemeContext中获取主题数据。

技巧三：Hook

Hook是React 16.8中引入的一种新特性。它允许你在函数组件中使用状态和生命周期方法。这使得函数组件更加强大，并且可以与类组件实现相同的功能。

例子：

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

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

  return (
    <div>
      <h1>My Component</h1>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};