揭秘 React 中的 HOC 和 Ref

2024-01-24 11:45:58

React 是一个用于构建用户界面的 JavaScript 库，它具有强大的组件系统和丰富的 API。本文将介绍 React 中的 HOC（高阶组件）和 Ref（引用）的概念和使用方法，帮助您更好地理解和应用这些技术来构建复杂的用户界面。

属性默认值和属性类型检查

在 React 中，我们可以使用 defaultProps 和 propTypes 来分别定义组件的属性默认值和属性类型检查。defaultProps 可以帮助我们在创建组件实例时指定默认值，而 propTypes 则可以帮助我们检查组件属性是否符合预期的类型。

// 定义一个名为 MyComponent 的组件
class MyComponent extends React.Component {
  // 设置组件的属性默认值
  static defaultProps = {
    name: 'John Doe',
    age: 30,
  };

  // 设置组件的属性类型检查
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
  };

  // 组件的渲染方法
  render() {
    const { name, age } = this.props;

    return (
      <div>
        <h1>{name}</h1>
        <p>Age: {age}</p>
      </div>
    );
  }
}

高阶组件

高阶组件（HOC）是一种函数，它可以接受一个组件作为参数，并返回一个新的组件。新的组件将继承原组件的功能，并可能添加一些额外的功能。

// 定义一个高阶组件
const withCounter = (WrappedComponent) => {
  // 返回一个新的组件
  return class extends React.Component {
    // 初始化状态
    state = {
      count: 0,
    };

    // 递增计数
    incrementCounter = () => {
      this.setState({ count: this.state.count + 1 });
    };

    // 渲染方法
    render() {
      // 将 WrappedComponent 作为子组件渲染
      return (
        <WrappedComponent
          count={this.state.count}
          incrementCounter={this.incrementCounter}
          {...this.props}
        />
      );
    }
  };
};

// 使用高阶组件
const MyComponentWithCounter = withCounter(MyComponent);

Ref

Ref（引用）是一种特殊的属性，它可以让我们访问组件实例。我们可以使用 Ref 来访问组件实例的属性和方法，也可以用它来控制组件的行为。

// 使用 Ref
class MyComponent extends React.Component {
  // 定义 Ref
  myRef = React.createRef();

  // 渲染方法
  render() {
    return (
      <div ref={this.myRef}>
        <h1>{this.props.name}</h1>
        <p>Age: {this.props.age}</p>
      </div>
    );
  }
}