探究React.Component()/PureComponent()方法，揭秘高阶组件本质

2023-09-08 01:03:26

React.Component() 和 PureComponent()：组件基石

1.1 React.Component()：组件的基础

React.Component()是React组件的基本类，它提供了一系列生命周期钩子和方法，允许组件在不同的阶段执行特定的操作。这些钩子和方法包括：

componentWillMount()：在组件挂载之前执行。
render()：返回组件的渲染结果。
componentDidMount()：在组件挂载之后执行。
componentWillReceiveProps(nextProps)：在组件接收到新的props之前执行。
shouldComponentUpdate(nextProps, nextState)：决定是否应该更新组件。
componentWillUpdate(nextProps, nextState)：在组件更新之前执行。
componentDidUpdate(prevProps, prevState)：在组件更新之后执行。

1.2 PureComponent()：性能优化神器

PureComponent()是React.Component()的子类，它针对性能优化进行了改进。PureComponent()通过比较当前的props和state与上一次的props和state，如果发现没有发生变化，则跳过不必要的渲染过程，从而提高性能。

2. 高阶组件：封装组件的利器

2.1 高阶组件的概念

高阶组件是一种用来增强组件功能的函数，它接受一个组件作为参数，并返回一个新的组件。高阶组件可以用于向组件添加新的功能，例如数据获取、表单验证、错误处理等。

2.2 高阶组件的实现

高阶组件通常使用ES6的箭头函数或函数表达式来实现。以下是一个简单的例子：

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

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

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

这个高阶组件接收一个组件作为参数，并返回一个新的组件，该组件具有获取数据的功能。

3. 结合React.Component()/PureComponent()和高阶组件

React.Component()/PureComponent()和高阶组件可以结合使用，以创建更强大、更灵活的组件。例如，以下是一个使用高阶组件来实现数据获取的示例：

const withData = (WrappedComponent) => {
  return class extends PureComponent {
    state = {
      data: null,
    };

    componentDidMount() {
      fetch('https://example.com/data')
        .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>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
};

const MyComponentWithData = withData(MyComponent);