zoukankan      html  css  js  c++  java
  • React Component Specs and Lifecycle (组件和生命周期)

    组件规格

    当创建一个React组件,并调用 React.createClass(),你需要提供一些Object对象,例如必须的render,还有其他一些可选的Object对象。

    render

    这个函数对象必须存在,且一定存在返回值。

    render: function () {
          return (<h2>Hello, World!</h2>);
    }

    官方规范说明这个方法一定要pure(干净),保证职责单一,所有数据通过propsstate来。利于组件的复用和维护。写React一定要约束好各种规范!
    返回值是 ReactElement

    getInitialState

    object getInitialState()

    在组件装载前会调用一次,函数的返回值对象,可以在this.state查询和使用。

    getDefaultProps

    object getDefaultProps()

    在组件装载前会调用一次,函数的返回值对象,可以在this.props查询和使用。
    和state不同的是,props在每个实例里都可以访问到,只会拷贝一次,而this.state是实例独享的。

    propTypes

    object propTypes

    可以约束检测你的参数的,发现不匹配就会console.wran()来提示错误,但是不会报错不执行。

    mixins(ES6已经不支持了)

    array mixins

    支持多个组件之间共享公用的方法,共享使用共同的变量和方法。

    statics

    object statics

    给你的组件增加静态的方法。

    var MyComponent = React.createClass({
      statics: {
        customMethod: function(foo) {
          return foo === 'bar';
        }
      },
      render: function() {
      }
    });
    
    MyComponent.customMethod('bar');  // true
    

    displayName

    string displayName

    用于debug时候的定位。

    生命周期方法

    实例化

    当首次使用组件类时,下面这些方法依次被调用。

    • getDefaultProps

    • getInitialState

    • componentWillMount

    • render

    • componentDidMount

    当组件类再次被调用时getDefaultProps方法不会被调用。

    存在期

    当实例已经生成,修改属性时,以下方法会依次被调用

    • componentWillReceiveProps

    • shouldComponentUpdate

    • componentWillUpdate

    • render

    • componentDidUpdate

  • 相关阅读:
    【XXE学习】XML外部实体注入
    记一次解密wireshark抓取的冰蝎通信流量
    weblogicSSRF漏洞复现
    解决docker删除加载失败的镜像报错
    【vulapps】Sturcts2 S2-037RCE漏洞复现
    【XSS-labs】level 16-20
    解决docker-compose下载过慢
    【XSS-labs】Level 11-15
    【XSS-labs】level 6-10
    [PHP]用PHP自己写一个基于zoomeye的api(偷懒必备quq)
  • 原文地址:https://www.cnblogs.com/xiayao/p/5689330.html
Copyright © 2011-2022 走看看