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

  • 相关阅读:
    C#解析json的几种方式
    记一次linux服务部署
    记一次AngularJs 路由 $stateChangeStart不起作用(细节决定成败)
    Could not commit JPA transaction RollbackException: Transaction marked as rollbackOnly
    elasticsearch服务安装采坑
    spring boot ${}占位符不起作用
    js 事件冒泡、捕获;call()、apply()
    angular $digest already in progress
    idea其他人把jar更新之后更新不到
    spring接入swagger后单元测试报错
  • 原文地址:https://www.cnblogs.com/xiayao/p/5689330.html
Copyright © 2011-2022 走看看