码迷,mamicode.com
首页 > 其他好文 > 详细

3、react-props/state

时间:2020-06-08 15:00:26      阅读:53      评论:0      收藏:0      [点我收藏+]

标签:strong   update   怎么   resolve   判断   变化   监听回调   用法   同步   

1、react中属性props和状态state
属性--静态得,所以在初始化得时候使用得是static进行初始化得,正常情况下属性不改
状态--动态得,它得值是可以发生改变得,react中的组件更新(重新渲染),都是通过改变状态值从而达到更新或者是重新渲染得效果得

2、状态机
正因为react中的组件更新或渲染需要通过状态改变达到效果,所以我们把react中得组件看成是一个状态机
状态到底是怎么变得:通过用户触发UI行为达到得改变:例如:单击、双击、刷新、滚动

3、状态:
this.state={}
改变状态:this.setState()方法进行改变的

4、什么情况下能改变状态得值:状态生成了就可以改变
在生命周期得哪个钩子函数中可以改变状态得值:只要状态初始化完成了,那么就可以改变,但是一般不会再WillMount和WillUpdate中该
为什么不在WillMount和WillUpdate中改变:
WillMount是实例化之前调用得方法,实例化就是为了返回一个初始得虚拟DOM,因为在constructor得时候状态已经初始化了,render是为了把初始化得这些状态值显示在DOM中
WillUpdate是在生存期会触发得,话句话来说组件在更新的时候会触发生存期中得钩子函数,组件更新也就意味着状态更新,在生存期之前状态已经改了,我们现在触发生存期得钩子函数,就是为了获取改变之后得状态值,所以不会再重新使用willupdate改变状态了

5、react中得state作用域都是当前组件,不会造成状态得污染

6、state工作原理:
实在consturctor中进行初始化得,通过调用setState方法改变得状态值,
第一种用法:setState(data,callback):
data(就是一个对象):用当前data中得状态值替换初始化得状态值,使用第一个参数改变完state组件重新渲染之后,如果需要其他操作得话
callback:组件重新渲染完之后会调用的(这个是可以选加得,如果不需要得话可以不加)
第二种用法:setState(callback1,callback2):
callback1:既能获取到原来得状态值,也能获取到现在得状态值,那么再这个时候就需要return一个对象给setState这个方法

7、实现效果:就是再输入框中输入内容得时候,把当前得内容作为状态值显示再页面中
react中写事件对象和js中事件对象得写法是完全一样的,也同样是在处理函数中写的e
document.getElementById(d1).onclick=function(e){}

8、setState是一个异步得方法
setState是通过队列来实现state得更新得
setState返回一个newState
newState不会立刻执行返回到队列中等待执行
判断是否是批量更新得,如果是得话那么将组件保存到dirtyComponents
如果不是批量更新得话,直接遍历dirtyComponents,调用updateComponent,更新队列中得state

9、setState需要注意:
连续调用了多次setState的话,那么只会引发一次生命周期的更新,因为react中会将所有的setState放到一个队列中等待,再这个等待的过程中不断改变同一个state值得话,那么只会显示最后一次改变得值
当setState({}):多次调用得时候,处理方式:合并更新一次状态,只调用一次render()更新界面---状态更新和页面更新都合并了(批量处理得)
setState(fn(){}):更新多次状态得话,只调用一次render方法更新界面--状态更新没有合并,只有页面更新合并了(不是批量处理得)

10、setState更新状态是同步还是异步?
react相关回调中是异步的(生命周期回调,事件监听回调)
其他异步回调中得是同步得(定时器,原生DOM事件监听,Promise回调)

11、react中得属性:props
对于html来说,它里边得标签基本上都是有属性得,并且这些属性再写得时候有一个特点:
<标签名 属性名=‘值’>
而react组件中得属性和html中标记得属性得写法是完全一样的,换句话来说:
<组件名 属性名=‘值’/>
12、react中得属性来说,创建使用得是static defaultProps进行创建得,属性本身是静态得所以初始化得时候需要加上static,再获取当前属性得话使用得是this.props.属性名进行获取得
13、react中又props和state,那么这两个有区别吗?
初始化上:props:static default初始化得静态得属性
state:使用得是constructor中得this.state进行初始化得
获取:this.props.属性名
this.state.状态名
改变值:props属性一般不会再当前组件中直接修改,没办法修改
state可以再当前组件中进行修改,直接使用得是setState这个方法
用法:state常用于组件得更新,只要是组件更新了那么很大程度上都会是state得状态值发生变化了,组 件可以看成是状态机
props:一般是结合这state一块使用得,常用于得是组件之间得传值

 

 

setstate总结

 //异步: react事件监听回调中,setState是异步操作得
   update1=()=>{ // 单机之后加载
      console.log( ‘update1更新前:‘+this.state.count) ;
       this.setState({
       count:this.state.count+1
      })
      console.log( ‘update1更新后:‘+this.state.count);
    }

    //react生命周期回调中,setState是 异步的
    componentDidMount(){ //先加载 
       console.log(‘componentDidMount前:‘+this.state.count);
        this.setState({
          count:this.state.count+1
        })
       console.log( ‘componentDidMount后:‘+this.state.count);
    
    }

    // 同步一 :定时器
    update2=()=>{ // 单机之后加载
        setTimeout(()=>{
            console.log( ‘update1更新前:‘+this.state.count) ;
            this.setState({
               count:this.state.count+1
            })
            console.log( ‘update1更新后:‘+this.state.count);
        })
       
      }
  // 同步一 :promise
    update3=()=>{ // 单机之后加载
          Promise.resolve().then(()=>{
            console.log( ‘update1更新前:‘+this.state.count) ;
            this.setState({
              count:this.state.count+1
            })
            console.log( ‘update1更新后:‘+this.state.count);
         })
      }
    //   同步  dom事件监听
      update4=()=>{ // 单机之后加载
        var h=document.getElementById("p")
          h.onclick=()=>{
              console.log( ‘update1更新前:‘+this.state.count) ;
             this.setState({
                 count:this.state.count+1
             })
             console.log( ‘update1更新后:‘+this.state.count);
  
          }
        
    }

 

3、react-props/state

标签:strong   update   怎么   resolve   判断   变化   监听回调   用法   同步   

原文地址:https://www.cnblogs.com/taozhibin/p/13065261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!