React学习|青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第6天

一、本堂课重点内容：

二、详细知识点介绍：

• 应用

  前端应用开发历程 —— Facebook

  移动原生应用开发 —— Instagram

  结合Electron的桌面应用开发

• 历史

  Facebook —— FaxJS

• 设计思路

  UI痛点

    1、不会随状态更新自动更新
    
    2、代码层面没有组件化
    
    3、数据依赖需要手动维护（各种数据之间的关联过多）
  

  响应式系统与转换式系统

    转换式系统 —— 编译器
    
    响应式系统 —— UI界面 —— 需要监听事件并相应作出反应更新状态
  

  优化

    1、UI自动更新
    
    2、前端代码组件化，可复用，可封装
    
    3、状态之间的依赖关系只需声明不需手动维护
  
    组件化
    
        组件内状态外部不可见，父组件通过状态传入组件内部控制子组件
        
        声明了状态和UI的映射
        
        组件有Props / state两种状态
            
            props指对外状态，可复用
            
            state指对内状态
        
        组件可以由其他组件拼装而成
  

  状态归属问题

    属于root节点
    
    只有父组件才能控制子组件，向上找最近的祖宗节点
    
    且父组件通过给子组件传递状态从而控制子组件 —— react是单向数据流
  

• HOOKS

  useState

  useEffect

  使用法则：不在循环、条件以及嵌套函数中调用HOOK

• react的问题

  1、JSX不符合JS标准语法 —— 解决方法：转译语法

  2、返回的JSX发生改变时，如何更新DOM —— 解决方法：Virtual DOM

    VirtualDOM 可以和真实DOM同步，是JS内存中维护的一个对象，具有和DOM类似的树状结构，并可以和DOM建立一一对应的关系
  

  3、state / props更新时，要重新触发render函数

• 状态管理库

  核心思想：将状态抽离到UI外部统一管理

• 应用级框架科普

  Next.JS

  Modern.JS

  Blitz