初识react响应式系统|青训营

这是我参与「第四届青训营 」笔记创作活动的第15天

响应式系统与react

1. 前置知识
   1. HTML、JS、CSS
   2. 基础数据结构
   3. 会用浏览器提供的DOM API修改DOM
2. react
   1. react应用
      • 前端应用开发
      • 移动原生应用开发
      • 结合Electron，进行桌面应用开发
   2. react设计思路
      1. 原生写UI的痛点
         • 状态更新，UI不会自动更新
         • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
         • UI之间的数据依赖关系，需要手动维护
      2. 响应式
         • 状态更新，UI自动更新
         • 前端代码组件化，可复用，可封装
         • 状态之间的互相依赖关系，只需要声明即可
      3. 总结
         • 组件是组件的组合
         • 组件内拥有状态，外部不可见
         • 父组件可将状态传入组件内部
         • 组件声明了状态和UI映射
         • 组件有Props/State两种状态
         • 组件可由其他组件拼装而成
   3. react（hooks）的写法
      • 基本写法

          import React ，{useState} from 'react';
          
          function Example(){
              const [count,setCount] = userState(0);
              return (
                  <div>
                      <p>You clicked {count} times</p>
                      <button conClick={()=>setCount(count + 1)}>click me</button>
                  </div>
              )
          }
      

   4. react实现
      • 问题
        1. jsx不符合js语法
        2. 返回的jsx发生改变时，如何更新DOM
        3. State/Props更新时，要触发render函数

          //写的
          const Test = props = >{
              const {url} = props；
              return(
                  <div className='root'>
                      <img src={url}/>
                  </div>
              )      
          }
          //转义
          const Test = props=>{
              const { 
                  url
              } = props;
              return /*#_PURE_*/React.createElement('div',{className:'root'}),/*#_PURE_*/React.createElement('img',{src:url})
          }
      

   5. react状态管理库
      • 核心思想
        • 将状态抽离到UI外部进行统一管理
      • 状态管理库
        • redux
        • xstate
        • mobx
        • recoil
      • 状态机
        • 当前状态，收到外部事件，迁移到下一个状态
      • 什么该放到库中
        • 如果全局中要用到几次或多次就放
        • 如果是局部组件应用就不用
   6. 应用级框架科普
      • next.js
      • mordern.js
      • blitz

总结

学习了之后，对于框架有了更加深入的了解，比如react如何运行，react hooks的基本写法等等，还算有收获。Try to be better