28、React 组件的协调与生命周期详解

React 组件的协调与生命周期详解

1. 显式触发协调

在 React 应用中，协调过程通常依赖于 setState 方法来通知 React 数据的变化，从而确定哪些数据是过时的。但在某些情况下，比如外部数据到达时，无法直接调用 setState 方法。这时，React 提供了 forceUpdate 方法来显式触发更新，确保变化能反映在用户界面上。

以下是具体的操作步骤：
1. 在 src 文件夹中创建 ExternalCounter.js 文件，代码如下：

import React, {Component } from "react";
import { ActionButton } from "./ActionButton";
let externalCounter = 0;
export class ExternalCounter extends Component {
    incrementCounter = () => {
        externalCounter++;
        this.forceUpdate();
    }
    render() {
        return (
            <div>
                <ActionButton callback={ this.incrementCounter }
                    te