React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代

珊珊而川

于 2024-07-31 11:51:17 发布

阅读量427

点赞数 4

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_63681863/article/details/140817692

版权

一、详细解释

React 高阶组件（Higher-Order Components）、Render Props 和 Hooks 是用来复用组件逻辑的三种不同方式。它们各有优缺点，并且随着时间的推移，React 社区不断迭代以提供更简洁和强大的方式来实现组件逻辑的复用。下面我们分别介绍这三种方式，并结合代码案例进行讲解。

1. 高阶组件（Higher-Order Components, HOC）

高阶组件是一个函数，接收一个组件并返回一个新的组件。HOC 主要用于逻辑复用和代码重用。

案例：

import React from 'react';

// 一个简单的高阶组件，用于提供窗口大小的信息
const withWindowSize = (WrappedComponent) => {
  return class extends React.Component {
    state = {
      width: window.innerWidth,
      height: window.innerHeight,
    };

    handleResize = () => {
      this.setState({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    componentDidMount() {
      window.addEventListener('resize', this.handleResize);
    }

    componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize);
    }

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

// 使用高阶组件
const MyComponent = ({ windowSize }) => (
  <div>
    Width: {windowSize.width}, Height: {windowSize.height}
  </div>
);

export default withWindowSize(MyComponent);

2. Render Props

Render Props 是一种通过一个返回 React 元素的函数来共享代码的技术。该函数可以作为一个 prop 传递给组件。

案例：

import React from 'react';

// 定义一个使用 render prop 的组件
class WindowSize extends React.Component {
  state = {
    width: window.innerWidth,
    height: window.innerHeight,
  };

  handleResize = () => {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  render() {
    return this.props.render(this.state);
  }
}

// 使用 render prop
const MyComponent = () => (
  <WindowSize render={({ width, height }) => (
    <div>
      Width: {width}, Height: {height}
    </div>
  )} />
);

export default MyComponent;

3. Hooks

Hooks 是 React 16.8 引入的一种新的 API，用于在函数组件中使用 state 和其他 React 特性。Hooks 使得函数组件能够拥有更强大的功能，并且代码更加简洁。

案例：

import React, { useState, useEffect } from 'react';

// 使用 hooks 实现窗口大小的监听
const 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;
};

// 使用自定义 hook
const MyComponent = () => {
  const windowSize = useWindowSize();

  return (
    <div>
      Width: {windowSize.width}, Height: {windowSize.height}
    </div>
  );
};

export default MyComponent;

迭代原因

代码复用性和可读性：高阶组件和 Render Props 允许我们复用逻辑，但会导致“嵌套地狱”（nested hell）和较复杂的代码结构。Hooks 提供了更简单和直观的方式来复用逻辑。
性能优化：HOC 和 Render Props 可能会导致额外的组件层次和重新渲染问题。Hooks 直接在函数组件内部管理状态和副作用，减少了不必要的渲染和性能开销。
社区需求：React 社区不断提出改进建议，Hooks 是在大量实践和反馈的基础上提出的，它解决了很多开发者在实际项目中遇到的问题。

通过这三种方式，我们可以更好地理解 React 如何不断进化以满足开发者的需求，并提供更强大的工具来构建复杂的应用。