3react-props/state

Posted 2020-12-05 taozhibin

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);
  
          }
        
    }