ReactJS：渲染组件时的触发方法答案

【问题标题】：ReactJS: Fire Method when Component is renderedReactJS：渲染组件时的触发方法
【发布时间】：2017-05-16 17:35:55
【问题描述】：

我有一个关于 ReactJS 的一般性问题：

是否可以在所有 JSX 组件 (<div> components </div>) 成功呈现后立即触发方法？因此，如果某些仅在某些条件下呈现，我可以在它们全部为 true 时立即触发一个方法。

如何检查所有内容是否已成功渲染？

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

有一个生命周期方法componentDidMount会在react渲染组件后立即被调用，它会被调用一次，只有在初始渲染之后，我认为你可以使用那个方法。

根据DOC：

componentDidMount() 在组件被调用后立即调用安装。需要 DOM 节点的初始化应该放在这里。如果你需要从远程端点加载数据，这是一个很好的地方实例化网络请求。在此方法中设置状态将触发重新渲染。

关于第二个问题：

您正在根据某些条件渲染元素，我假设您正在使用某种布尔或检查数组的长度，所以有一个生命周期方法componentWillUpdate，它将在反应之前被调用在此方法中重新渲染组件（在初始渲染时不会调用它）您可以检查所有条件并在所有条件为真时调用任何方法。因此，无论何时您执行setState，它都会被调用，您可以将逻辑放在这里。

【讨论】：

这正是我所需要的！我正在从休息端点获取一些数据，并且每当数据显示在浏览器上时都需要一个计时器来停止。使用 componentWillUpdate 生命周期方法。非常感谢
很高兴，它帮助了你:)

【解决方案2】：

这只是一个框架，但它应该可以帮助您找到您正在寻找的解决方案：

type ChildProps = {
    onUpdated: () => void;
}

class MyChildComponent extends React.component<ChildProps, void> {
    componentDidUpdate() {
        this.props.onUpdated();
    }

    render() {
        ...
    }
}

class MyComponent extends React.Component<void, void> {
    private childCount: number;
    private updated: number;

    constructor() {
        this.childCount = 2;
    }

    render() {
        this.updated = 0;

        return (
            <div>
                <MyChildComponent onUpdated={ this.childUpdated.bind(this) } />
                <MyChildComponent onUpdated={ this.childUpdated.bind(this) } />
            </div>
        );
    }

    private childUpdated() {
        this.updated++;
        if (this.updated === this.childCount) {
            // do something...
        }
    }
}

【讨论】：