React生命周期

原创

堕落飞鸟

发布于 2023-05-20 19:03:56

2570

发布于 2023-05-20 19:03:56

文章被收录于专栏：飞鸟的专栏飞鸟的专栏

React生命周期可以分为三个阶段：挂载阶段（Mounting phase）、更新阶段（Updating phase）和卸载阶段（Unmounting phase）。

挂载阶段（Mounting Phase）

在挂载阶段，组件实例被创建并插入到DOM中。以下是挂载阶段的生命周期方法：

constructor：组件的构造函数，用于初始化状态和绑定方法。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {
      count: 0,
    };
    // 绑定方法的this上下文
    this.handleClick = this.handleClick.bind(this);
  }
  // ...
}

render：渲染组件的UI结构，它是必需的方法。

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

componentDidMount：在组件被挂载到DOM后调用，可以进行一次性的操作，如数据获取或订阅事件。

javascriptCopy codeclass MyComponent extends React.Component {
  // ...
  componentDidMount() {
    // 发起数据请求
    fetchData()
      .then(data => {
        this.setState({ count: data.count });
      })
      .catch(error => {
        console.error(error);
      });
  }
  // ...
}

更新阶段（Updating Phase）

在更新阶段，组件的状态或属性发生变化，导致UI需要更新。以下是更新阶段的生命周期方法：

static getDerivedStateFromProps：在props发生变化时调用，返回一个新的状态对象。

class MyComponent extends React.Component {
  // ...
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.count !== prevState.count) {
      return { count: nextProps.count };
    }
    return null;
  }
  // ...
}

shouldComponentUpdate：在更新发生之前调用，用于决定是否重新渲染组件。返回false将阻止更新。

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

render：与挂载阶段的render方法相同。

componentDidUpdate：在组件更新完成后调用，可以进行DOM操作或发起其他异步请求。

class MyComponent extends React.Component {
  // ...
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      // 执行一些操作
    }
  }
  // ...
}

卸载阶段（Unmounting Phase）

在卸载阶段，组件从DOM中移除。以下是卸载阶段的生命周期方法：

componentWillUnmount：在组件被卸载前调用，可以进行清理操作，如取消订阅或清除定时器。

class MyComponent extends React.Component {
  // ...
  componentWillUnmount() {
    // 清理操作
    clearInterval(this.timer);
  }
  // ...
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

登录后参与评论

0 条评论

热度