zoukankan      html  css  js  c++  java
  • react state

    功能1: 负责数据管理
    3个基础操作:
    ①初始化
    getInitialState:function(){
    return {count:0,price:100}
    }
    ②读
    this.state.count
    ③写
    this.setState({count:2})
    this.setState({count:2},()=>{
    //状态在写操作成功之后,会执行的处理函数
    })
    注意事项:
    如果一个组件中 有多个状态,在处理状态的写操作时,需要更新哪个状态直接设置,其它的默认保持不变

    功能2: 状态的数据具有绑定的效果
    一旦将状态的数据给视图使用,当状态发生变化时,视图也会跟着自动更新
    <script type='text/babel'>
         var MyComponent = React.createClass({
           // 组件内部数据的初始化
           getInitialState:function(){
             return {count:0,price:50}
           },
           handleClick:function(){
             //修改状态的值
              var nowCount = this.state.count;
              var priceNum = this.state.price;
              nowCount++;
              priceNum--;
              this.setState({count:nowCount,price:priceNum},()=>{
                console.log(this.state.count);
              });
                       
           },
           render:function(){
             return <div>
               <p>{this.state.count}</p>
               <p>{this.state.price}</p>
               <button onClick={this.handleClick}>clickMe</button>
             </div>
           }
         })
    
         ReactDOM.render(
           <MyComponent></MyComponent>,
           document.getElementById('example')
         )
      </script>
  • 相关阅读:
    javascript游戏引擎
    BI 可视化
    nodeJS 相关开源项目
    bean validation 技术规范
    JForum 源码分析
    lemon OA 我长时间经历的第一个开源项目
    Rete算法
    摘自知乎--mysql
    copy and paste ,做到这样也很牛逼了
    servlet 3.0特性说明
  • 原文地址:https://www.cnblogs.com/iamlhr/p/10906330.html
Copyright © 2011-2022 走看看