React 组件 API

React 组件 API 涉及多个重要的方面，包括生命周期方法、状态管理、属性传递和事件处理。

以下是 React 组件 API 的详细说明：

生命周期方法

React 组件的生命周期方法分为三个主要阶段：挂载、更新和卸载，详细说明参见：React 组件的生命周期 。

挂载阶段

  • constructor(props): 构造函数，用于初始化状态或绑定方法。
  • static getDerivedStateFromProps(props, state): 每次在调用 render 方法之前调用，用于更新状态。
  • componentDidMount(): 组件挂载后调用，此时可以进行 DOM 操作或数据请求。

实例

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

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.reset) {
      return { count: 0 };
    }
    return null;
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

更新阶段

  • static getDerivedStateFromProps(props, state): 与挂载阶段相同，用于更新状态。
  • shouldComponentUpdate(nextProps, nextState): 返回布尔值，决定组件是否重新渲染。
  • render(): 渲染组件的 UI。
  • getSnapshotBeforeUpdate(prevProps, prevState): 在 DOM 更新之前调用，用于捕获一些信息（如滚动位置）。
  • componentDidUpdate(prevProps, prevState, snapshot): 在组件更新后调用。

实例

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    return { scrollPosition: window.scrollY };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      window.scrollTo(0, snapshot.scrollPosition);
    }
    console.log('Component updated');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

卸载阶段

  • componentWillUnmount(): 组件即将卸载时调用，用于清理资源（如定时器、事件监听等）。

实例

class MyComponent extends React.Component {
  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

状态管理

状态是一个组件内部的数据，使用 this.state 来定义和管理。通过 setState 方法更新状态。

实例

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

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

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

属性传递

通过 this.props 访问传递给组件的属性，可以使用 PropTypes 进行类型检查。

实例

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.title}</div>;
  }
}

MyComponent.propTypes = {
  title: PropTypes.string.isRequired,
};

// 使用组件并传递属性
<MyComponent title="Hello, World!" />

事件处理

通过事件处理函数处理用户交互。需要使用 .bind(this) 或箭头函数来确保 this 指向正确。

实例

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

条件渲染

通过条件语句控制组件的渲染。

实例

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

  toggleVisibility = () => {
    this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
  };

  render() {
    return (
      <div>
        {this.state.isVisible && <p>This is visible</p>}
        <button onClick={this.toggleVisibility}>Toggle</button>
      </div>
    );
  }
}

列表渲染

通过数组的 map 方法渲染列表。

实例

class MyComponent extends React.Component {
  render() {
    const items = ['Item 1', 'Item 2', 'Item 3'];
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    );
  }
}

受控组件

通过状态控制表单元素的值。

实例

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

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', this.state.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

设置状态:setState

setState 是 React 中用于更新组件状态的方法。

语法格式如下：

setState(object nextState[, function callback])

参数说明

  • object nextState: 一个对象，包含要更新的状态键值对。React 会将这个对象合并到当前状态中。
  • function callback: 一个可选的回调函数，会在状态更新并重新渲染完成后执行。

合并 nextState 和当前 state，并重新渲染组件。

setState 是 React 事件处理函数中和请求回调函数中触发 UI 更新的主要方法。

关于setState

不能在组件内部通过 this.state 修改状态，因为该状态会在调用 setState() 后被替换。

setState() 并不会立即改变 this.state，而是创建一个即将处理的 state。setState() 并不一定是同步的，为了提升性能 React 会批量执行 state 和 DOM 渲染。

setState()总是会触发一次组件重绘，除非在 shouldComponentUpdate() 中实现了一些条件渲染逻辑。

通过合理使用 setState，可以有效地管理组件状态，并确保在状态更新后执行必要的操作，从而提高应用的响应性和可靠性。

React 实例

class Counter extends React.Component{ constructor(props) { super(props); this.state = {clickCount: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); } render () { return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <Counter /> );

尝试一下 »

实例中通过点击 h2 标签来使得点击计数器加 1。