Reactコンポーネントのライフサイクルの詳細な説明

 <div id='コンテナ'></div>
    <script type="text/babel">
        クラスLifeCycleはReact.Componentを拡張します。
            コンストラクタ(props) {
                スーパー(小道具);
                alert("初期レンダリング");
                アラート("コンストラクタ");
                this.state = {str: "hello"};
            }
             コンポーネントマウント() {
                アラート("コンポーネントがマウントされます");
            }
            コンポーネントマウント() {
                アラート("コンポーネントがマウントされました");
            }
            コンポーネントはプロパティを受け取ります(次のプロパティ) {
                アラート("コンポーネントがプロパティを受け取る");
            }
            コンポーネント更新() {
                アラート("コンポーネントを更新する必要があります");
                return true; // trueを返すことを忘れないでください
            }
             コンポーネントWillUpdate() {
                アラート("コンポーネントが更新されます");
            }
            コンポーネントを更新しました() {
                アラート("コンポーネントが更新されました");
            }
            コンポーネントのマウントを解除します（）{
                アラート("コンポーネントがマウント解除されます");
            }
            状態を設定する() {
                s = "hello"とします。
                （this.state.str === s）の場合{
                    s = "こんにちは";
                }
                this.setState({
                    str: s
                });
            }
            強制更新() {
                this.forceUpdate();
            }
            与える（） {
                アラート("レンダリング");
                戻る（
                    <div>
                        <span>{"プロパティ:"><h2>{parseInt(this.props.num)}</h2></span>
                        <br />
                        <span>{"州:"><h2>{this.state.str}</h2></span>
                    </div>
                );
            }
        }
        クラスコンテナはReact.Componentを拡張します。
            コンストラクタ(props) {
                スーパー(小道具);
                この状態 = {
                    数値: Math.random() * 100
                };
            }
            プロパティの変更（）{
                this.setState({
                    数値: Math.random() * 100
                });
            }
            ライフサイクルステートを設定する() {
                this.refs.rLifeCycle.setTheState();
            }
            強制ライフサイクル更新() {
                this.refs.rLifeCycle.forceItUpdate();
            }
            アンマウントライフサイクル() {
                // ここで親コンポーネントをアンマウントすると、子コンポーネントもアンマウントされます ReactDOM.unmountComponentAtNode(document.getElementById("container"));
            }
            親強制更新() {
                this.forceUpdate();
            }
            与える（） {
                戻る （
                    <div>
                        <a href="javascript:;" onClick={this.propsChange.bind(this)}>propsChange</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.setLifeCycleState.bind(this)}>状態の設定</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.forceLifeCycleUpdate.bind(this)}>強制更新</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.unmountLifeCycle.bind(this)}>アンマウント</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
                        <ライフサイクル ref="rLifeCycle" num={this.state.num}></ライフサイクル>
                    </div>
                );
            }
        }
        ReactDOM.render() は、
            <コンテナ></コンテナ>,
            document.getElementById('コンテナ')
        );
    </スクリプト>