QuikieApps

反应生命周期:您需要了解的一切

QuikieApps

什么是React Lifecycle台湾宾果28开奖?

反应生命周期台湾宾果28开奖可以被认为是从React组件的诞生到死亡的一系列事件。 

 反应中的每个组件都会经历事件的生命周期。可以认为这些事件经历了出生,生长和死亡的周期。 

 

反应生命周期中的各个阶段 

1)    安装- 组件的诞生

2)    更新- 组件的增长

3)    卸下- 组件死亡。 

 

在生命周期的上述三个阶段中,可以监控和处理反应中的每个组件。

 

安装-

 安装意味着将元素放入DOM。 

 在react中,安装组件时依次调用了四个内置台湾宾果28开奖。 

 这四种台湾宾果28开奖是: 

1)    构造函数()

2)    getDerivedStateFromProps()

3)    渲染()

4)    componentDidMount()

 

渲染()台湾宾果28开奖是必需的,将始终被调用,其他台湾宾果28开奖仅是可选的,并且仅在定义它们时才被调用。 

 

建设者

当组件初始化时,constructor()台湾宾果28开奖是我们调用的第一个台湾宾果28开奖,它是设置初始状态和其他初始值的自然场所。 

 用props作为参数调用constructor()台湾宾果28开奖,并且要记住,务必始终先调用super(props)作为开始,这将启动父构造函数台湾宾果28开奖并允许组件继承台湾宾果28开奖。来自其父React.Component。 

 例如:这是每次您制作组件时由react调用的构造台湾宾果28开奖: 

 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  渲染() {

    返回 (

      <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

    );

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

getDerivedStateFromProps:

 

在呈现DOM中存在的元素之前,将立即调用getDerivedStateFromProps()台湾宾果28开奖。 

 

这是根据初始道具设置状态对象的自然场所。 

 

它以状态为参数,并返回对其状态进行了更改的对象。 

 

下面的示例以收藏夹颜色为“红色”开始,但是getDerivedStateFromProps()台湾宾果28开奖根据favcol属性更新收藏夹颜色。 

 

例如: 

调用getDerivedStateFromProps台湾宾果28开奖以在render台湾宾果28开奖之前使用。

 

标头 延伸 反应.零件 {

  建设者(道具) {

(道具);

这个.= {最喜欢的颜色: “红”};

  }

  静态的 getDerivedStateFromProps(道具,) {

返回 {最喜欢的颜色: 道具.favcol };

  }

  渲染() {

返回 (

   <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

);

  }

}

 

反应DOM.渲染(<标头 favcol=”黄色“/>, 文件.getElementById('根'));

 

渲染: 

 这是必需的台湾宾果28开奖,没有该台湾宾果28开奖,程序将无法运行。这也是将HTML输出到DOM的台湾宾果28开奖。 

 

一个例子是: 

一个带有简单render()台湾宾果28开奖的简单组件: 

 

标头 延伸 反应.零件 {

  渲染() {

返回 (

   <h1>这是Header组件的内容</h1>

);

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

componentDidMount

 

呈现组件后,将调用componentDidMount()台湾宾果28开奖。  

 

在这里运行需要将组件放置在DOM上的语句。 

 

例如: 

在第一个选项中,我们将我们喜欢的颜色设置为红色,但是在一秒钟之内,它改为黄色。 

 

 

标头 延伸 反应.零件 {

  建设者(道具) {

(道具);

这个.= {最喜欢的颜色: “红”};

  }

  componentDidMount() {

setTimeout(() => {

   这个.setState({最喜欢的颜色: “黄色”})

}, 1000)

  }

  渲染() {

返回 (

   <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

);

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

更新中

 

生命周期的下一个阶段是组件更新的时间。 

 

只要组件的状态或道具发生变化,组件就会更新。 

 

当组件被更新时,React有五个内置台湾宾果28开奖被调用,按此顺序:

 

 

1)    getDerivedStateFromProps()

2)    shouldComponentUpdate()

3)    渲染()

4)    getSnapshotBeforeUpdate()

5)    componentDidUpdate()

 

同样,render()台湾宾果28开奖是必需的,将始终被调用,其他台湾宾果28开奖是可选的,仅当您定义它们时才被调用。 

 

getDerivedStateFromProps-
 

在更新阶段,将调用getDerivedStateFromprops台湾宾果28开奖。这是组件更新时调用的第一个台湾宾果28开奖。 

这是根据初始道具设置状态的理想场所。

 

下面的示例有一个按钮,可将喜欢的颜色更改为蓝色,但是由于 getDerivedStateFromProps() 调用台湾宾果28开奖,该台湾宾果28开奖使用favcol属性中的颜色更新状态,最喜欢的颜色仍呈现为黄色:

 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  静态的 getDerivedStateFromProps(道具,) {

    返回 {最喜欢的颜色: 道具.favcol };

  }

  换颜色 = () => {

    这个.setState({最喜欢的颜色: “蓝色”});

  }

  渲染() {

    返回 (

      <div>

      <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

      <纽扣 类型=”纽扣 onClick= {这个.换颜色}>换颜色</纽扣>

      </div>

    );

  }

}

 

反应DOM.渲染(<标头 favcol=”黄色“/>, 文件.getElementById('根'));

 

shouldComponentUpdate:

 

在此台湾宾果28开奖中,您可以返回一个布尔值,该值指定Reacy是否应继续进行渲染。 

 

默认值是true。 

 

下面给出的示例显示了shouldComponentUpdate()台湾宾果28开奖返回false时的情况:

 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  shouldComponentUpdate() {

    返回 ;

  }

  换颜色 = () => {

    这个.setState({最喜欢的颜色: “蓝色”});

  }

  渲染() {

    返回 (

      <div>

      <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

      <纽扣 类型=”纽扣 onClick= {这个.换颜色}>换颜色</纽扣>

      </div>

    );

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

下一个示例显示了该台湾宾果28开奖返回true时发生的情况: 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  shouldComponentUpdate() {

    返回 真正;

  }

  换颜色 = () => {

    这个.setState({最喜欢的颜色: “蓝色”});

  }

  渲染() {

    返回 (

      <div>

      <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

      <纽扣 类型=”纽扣 onClick= {这个.换颜色}>换颜色</纽扣>

      </div>

    );

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

渲染

当然,当组件更新时,将调用render()台湾宾果28开奖,它必须使用新的更改将HTML重新呈现到DOM。 

 

下面的示例有一个按钮,可将收藏夹颜色更改为蓝色: 

 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  换颜色 = () => {

    这个.setState({最喜欢的颜色: “蓝色”});

  }

  渲染() {

    返回 (

      <div>

      <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

      <纽扣 类型=”纽扣 onClick= {这个.换颜色}>换颜色</纽扣>

      </div>

    );

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

 

getSnapshotBeforeUpdate

 

使用此台湾宾果28开奖时,您可以在更新之前访问属性和状态,这意味着即使在更新之后,也可以检查更新之前的值。 

 

如果存在此台湾宾果28开奖,则还应该包括componentDidUpdate()台湾宾果28开奖,否则,将出现错误。 

 

请遵循以下示例: 

 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  componentDidMount() {

    setTimeout(() => {

      这个.setState({最喜欢的颜色: “黄色”})

    }, 1000)

  }

  getSnapshotBeforeUpdate(prevProps, prevState) {

    document.getElementById(“div1”)。 innerHTML =

    “在更新之前,最喜欢的是” + prevState.最喜欢的颜色;

  }

  componentDidUpdate() {

    document.getElementById(“div2”)。 innerHTML =

    “最新的收藏夹是” + 这个..最喜欢的颜色;

  }

  渲染() {

    返回 (

      <div>

        <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

        <div ID=”div1“></div>

        <div ID=”div2“></div>

      </div>

    );

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

componentDidUpdate:

 

在DOM中更新组件后,将调用componentDidUpdate台湾宾果28开奖。 

 

请遵循以下示例: 

 

标头 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {最喜欢的颜色: “红”};

  }

  componentDidMount() {

    setTimeout(() => {

      这个.setState({最喜欢的颜色: “黄色”})

    }, 1000)

  }

  componentDidUpdate() {

    document.getElementById(“ Mydiv”)。 innerHTML =

    “最新的收藏夹是” + 这个..最喜欢的颜色;

  }

  渲染() {

    返回 (

      <div>

      <h1>我最喜欢的颜色是 {这个..最喜欢的颜色}</h1>

      <div ID=”Mydiv“></div>

      </div>

    );

  }

}

 

反应DOM.渲染(<标头 />, 文件.getElementById('根'));

 

卸载:

 

下一个也是最后一个阶段是卸载,即从DOM中删除组件时。 

 

当组件被卸载时,React只有一个内置台湾宾果28开奖会被调用:

 

      componentWillUnmount()

 

componentWillUnmount-

 

在组件即将从DOM中删除之前,将立即调用componentWillUnmount台湾宾果28开奖。 

 

根据例子:

 

容器 延伸 反应.零件 {

  建设者(道具) {

    (道具);

    这个.= {节目: 真正};

  }

  delHeader = () => {

    这个.setState({节目: });

  }

  渲染() {

     我的头;

    如果 (这个..节目) {

      myheader = <儿童 />;

    };

    返回 (

      <div>

      {我的头}

      <纽扣 类型=”纽扣 onClick= {这个.delHeader}>删除标题</纽扣>

      </div>

    );

  }

}

 

儿童 延伸 反应.零件 {

  componentWillUnmount() {

    警报(“名为Header的组件即将被卸载。”);

  }

  渲染() {

    返回 (

      <h1>你好,世界!</h1>

    );

  }

}

 

反应DOM.渲染(<容器 />, 文件.getElementById('根'));

 

这样就完成了React Lifecycle的过程。 

 

Exit mobile version