zoukankan      html  css  js  c++  java
  • react.js 从零开始(四)React 属性和状态详解

    属性的含义和用法:

    1、属性的含义。

      props=properties

      属性:一个事物的性质和关系。

      属性往往与生俱来,不可以修改。

    2. 属性的用法。

    <Helloworld name=??? />
    

     这个name 可以是 变量 ,对象,数组,函数表达式的值。 

    var props={
    a:1,
    b:2
     }
    <Helloworld {...props} />

    这样react就会自动遍历props对象并添加到属性中去。

    状态的含义和用法:

    1.状态的含义。

      state 

      状态:事物所处的环境。

      状态是由事物自行处理,不断的发生变化。

      getInitialState:初始化实例是特有的状态。

      setState:改变组件的状态。

    2,状态的用法

      

    var MessageBox = React.createClass({
      getInitialState: function() {
        return {nameWithQualifier: 'Mr.bbb'};
      },
    
      render: function() {
        return <div>{this.state.nameWithQualifier}</div>;
      }
    });
    
    var dom=React.render(<MessageBox />, mountNode);
    dom.setState({
    nameWithQualifier:"223"
    });
     

    首先可以在初始化的时候给状态赋值。

    接着可以通过:

    setState来改变状态。
    状态改变以后就会触发render函数。重新渲染视图。。

      

    属性和状态对比:

    1.相似点:

      都是js对象。

      都会触发render 更新。

      都具备确定性。

    2. 不同点:

      

    总结:总之,学习到现在挺顺利的。下一节继续加油吧。。大家下节见。

  • 相关阅读:
    hdu6060[贪心+dfs] 2017多校3
    Codeforces 547B. Mike and Feet[单调栈/队列]
    Codeforces 545E. Paths and Trees[最短路+贪心]
    gitignore使用
    es学习
    google浏览器安装jsonview
    sychronized关键字底层详解加锁升级过程
    idea 中 “XXX has broken path” 错误解决
    kafka高并发读写的原因
    window redis版本 安装
  • 原文地址:https://www.cnblogs.com/tomblog/p/4779606.html
Copyright © 2011-2022 走看看