React类组件基础之其他API

2023-12-02 17:04:04

React类组件是React框架中用于构建可复用组件的基本构建块。与函数式组件相比，类组件提供了更多的功能和灵活性。在本文中，我们将深入探讨React类组件中的一些常用API，包括state、props、生命周期、key、ref、context和高阶组件。这些API对于编写复杂的React组件非常有用，可以帮助开发者更轻松地构建和管理组件。

1. state

state是类组件内部的一个私有数据，用于存储组件的状态。当state发生改变时，组件将重新渲染。state可以通过this.setState()方法来更新。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

2. props

props是类组件从父组件继承的属性。props是只读的，不能直接修改。如果要更新props，需要通过父组件重新渲染。

class MyComponent extends React.Component {
  render() {
    const { name, age } = this.props;

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

3. 生命周期

生命周期是指组件从创建到销毁过程中所经历的各个阶段。React类组件提供了多种生命周期方法，可以帮助开发者在组件的各个阶段执行特定的操作。

常用的生命周期方法包括：

componentWillMount()：在组件挂载之前调用。
componentDidMount()：在组件挂载之后调用。
componentWillUnmount()：在组件卸载之前调用。
shouldComponentUpdate()：在组件收到新的props或state时调用，决定是否需要更新组件。
componentWillUpdate()：在组件更新之前调用。
componentDidUpdate()：在组件更新之后调用。

4. key

key是React在渲染列表时用于唯一标识每个元素的属性。key必须是唯一的，并且不能随着时间的推移而改变。如果我们在遍历数组渲染列表的时候，没有添加key，那么在这段js代码运行在浏览器的时候，会抛出一个警告a key should be provided for list items，告诉我们必须要添加一个key。

const listItems = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const MyComponent = () => {
  return (
    <ul>
      {listItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

5. ref

ref是React提供的一种方式，可以让我们在组件中访问DOM元素或子组件。ref可以是字符串或函数。如果ref是字符串，那么它将作为DOM元素的id属性。如果ref是函数，那么它将在组件挂载后调用，并将DOM元素或子组件作为参数传递给函数。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  componentDidMount() {
    console.log(this.ref.current); // DOM元素
  }

  render() {
    return (
      <div ref={this.ref}>
        Hello world!
      </div>
    );
  }
}

6. context

context是一种共享数据的方式，可以在组件树中传递数据。context可以被任何子组件访问，而无需显式地传递props。

const MyContext = React.createContext({
  name: 'John Doe',
  age: 30
});

class MyComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {(context) => (
          <p>Name: {context.name}, Age: {context.age}</p>
        )}
      </MyContext.Consumer>
    );
  }
}

7. 高阶组件

高阶组件是一种函数，它可以将一个组件作为参数，并返回一个新的组件。高阶组件可以用来扩展组件的功能，而无需修改组件本身的代码。

const withCounter = (Component) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }

    handleClick = () => {
      this.setState({ count: this.state.count + 1 });
    };

    render() {
      return (
        <Component {...this.props} count={this.state.count} handleClick={this.handleClick} />
      );
    }
  };
};

const MyComponent = (props) => {
  return (
    <div>
      <p>Count: {props.count}</p>
      <button onClick={props.handleClick}>+</button>
    </div>
  );
};

const MyComponentWithCounter = withCounter(MyComponent);