zoukankan      html  css  js  c++  java
  • react组件生命周期

    组件的生命周期分成三个状态:

    • Mounting:已插入真实 DOM
    • Updating:正在被重新渲染
    • Unmounting:已移出真实 DOM

    React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

    • componentWillMount()
    • componentDidMount()
    • componentWillUpdate(object nextProps, object nextState)
    • componentDidUpdate(object prevProps, object prevState)
    • componentWillUnmount()

    此外,React 还提供两种特殊状态的处理函数。

    • componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
    • shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

    这些方法的详细说明,可以参考官方文档。下面是一个例子(查看 demo10 )。

    
    var Hello = React.createClass({
      getInitialState: function () {
        return {
          opacity: 1.0
        };
      },
    
      componentDidMount: function () {
        this.timer = setInterval(function () {
          var opacity = this.state.opacity;
          opacity -= .05;
          if (opacity < 0.1) {
            opacity = 1.0;
          }
          this.setState({
            opacity: opacity
          });
        }.bind(this), 100);
      },
    
      render: function () {
        return (
          <div style={{opacity: this.state.opacity}}>
            Hello {this.props.name}
          </div>
        );
      }
    });
    
    ReactDOM.render(
      <Hello name="world"/>,
      document.body
    );
    

    上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

    另外,组件的style属性的设置方式也值得注意,不能写成

    
    style="opacity:{this.state.opacity};"
    

    而要写成

    
    style={{opacity: this.state.opacity}}
    

    这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。

  • 相关阅读:
    软件工程实验二—结构化分析与设计
    软件工程实验一 软件开发文档与工具的安装与使用
    个人作业三-ATM管理系统
    软件工程个人作业二—举例分析流程图与活动图的区别与联系
    软工个人作业—四则运算
    2020软件工程作业02
    自我介绍
    2019春总结作业
    2019春第四次课程设计实验报告
    2019春第三次课程设计实验报告
  • 原文地址:https://www.cnblogs.com/chenziyu/p/9176755.html
Copyright © 2011-2022 走看看