React类组件

类组件 最基础的形态就是声明一个类 并且继承 React.Compoent 类

       在类组件内部 声明render函数 返回的值就是模板渲染内容

       by dixon 对于组件的理解   一个组件就是一大段html及它相关逻辑的替代

       什么是状态？ 状态是state 单词的翻译  它是一种响应式的数据！ 什么是响应式？ 一旦状态发生变化那么使用到 状态的地方会自动更新视图

       这是mvvm 框架 视图层面上最核心的概念

class Cp1 extends React.Component {
          
          constructor(){
            super();
            // 在类组件中 在constructor 进行状态的声明 对于组件当中 所有的可能会发生变化的值都应该在state当中声明
            this.state = {
                a:1
            }
          }

          fn1 = ()=>{
            // 修改状态的方式  是调用 this.setState()
            // 修改状态的时候 只有状态对应的地方才会进行更新   它带来的是最小的性能的损耗
            this.setState({
              a: this.state.a + 1
            })
            console.log('修改之后立马输入 a状态的值',this.state.a)
          }

          fn3 = () => {
            // 对于同步的代码流程当中 this.setSate()会在同步代码执行之后 再统一执行
            //  而且会合并操作 因为在底层当中执行的是  Object.assign(之前的state,{ a:a+1},{a:a+1})
            
            this.setState({ a: this.state.a + 1 });   //  ====>  入队   [a+1的任务]
            console.log('第一次打印 a ',this.state.a);
            this.setState({ a: this.state.a +1 });   //  ====>  入队   [a+1的任务， a+1的任务]
            console.log('第二次打印a', this.state.a);

            //  最终执行的就是  Object.assign(之前的state，{ a:a+1}，{ a:a+1})

            // setState 并不是没执行一次 就更新一次  setState对于state的操作是批处理的
            // 所以上面的代码并不是执行了两次  +1  而是 只会修改为最新的一次变更 所以第一次和第二次 都是输入 1
            // 因为如果没执行一次setState就去渲染 就会特别的消耗性能 所以react才会这样去设计

            setTimeout(()=> {
              // 但是基于react的事件处理机制当中 如果是setTimeout setInterval还有DOM原生事件当中 它的表现为同步
              // 所以首先要死记硬背  在setTimeout setInterval他是同步的
            
              this.setState({ a: this.state.a + 1 })
              console.log('第三次打印a', this.state.a);  //这里就会现在 setState完成之后才执行 输入 3
              this.setState({ a: this.state.a + 1 })
              console.log('第四次打印a', this.state.a);  //  输入4
            },100)
           
          }

          fn4 = ()=> {
            //   setState 传入一个函数  是不是还是异步操作？  如果是函数那么每一次都会单独执行
            // 跟直接传入一个对象 有什么区别？ 如果是对象 则会合并
              this.setState((state)=> {
                  return {
                      a: state.a+1
                  }
              })
              console.log('fn4 第一次让 a 变化', this.state.a);

              this.setState((state)=> {
                  return {
                      a: state.a+1
                  }
              })
              console.log('fn4 第二次让 a 变化', this.state.a);
          }


          fn5 = ()=> {
            //  setState 可以传入第二个参数  是一个回调函数 表示在状态修改完成并且执行完渲染之后执行
            this.setState({a: this.state.a+1}, ()=> {
                // 这个函数会在state修改完成之后执行
                console.log(document.querySelector('#kfc').innerHTML);
            })
          }


          fn2 = ()=>{
            //  传统的原生节点的修改 则是这个节点的更新 会消耗大量的性能
            document.querySelector('#kfc').innerHTML = 'a is change by fn2';
          }


          // 除了翻译的意思很有语义化  渲染...
          render(){
            // 类内部 render函数返回的jsx代码就是组件会渲染的模板内容
            //  const { a } = this.state 
              
              return (
                <div>
                   我是 Cp1 组件
                   <div id="kfc"> a is : { this.state.a }  </div>
                   <button onClick={ this.fn1 } > 让a 递增 fn1</button>
                   <button onClick={ this.fn2 } > 让a 递增 fn2</button>
                   <button onClick={ this.fn3 }> 让a 变化  fn3</button>
                   <button onClick={ this.fn4 }> 让a 变化  fn3</button>
                   <button onClick={ this.fn5 }> 让a 变化  fn3</button>
                </div>
              )
          }
       }

---

总结

        setState({})

        stateState((state)=>{})

        !!! setState是同步的还是异步的

        异步的！  

        但是在 setTimeout setInterval还有DOM原生事件当中 setState的表现是同步的但是实际上还是异步的