类组件 最基础的形态就是声明一个类 并且继承 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的表现是同步的但是实际上还是异步的