这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
今天的课程为前端框架 React 的基础课程讲解，为了更好地帮助进入 React 技术原理学习，课程将带来有关前端框架 React 的发展历史。

响应式系统与React

react的历史与应用

• 前端应用开发
• 移动原生应用开发
• 结合Electron，进行桌面应用开发

react的设计思路

react(hooks)的写法

• useState
  • 传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改
• useEffect
  • 传入一个函数和一个数组，数组是状态的数组，称作依赖项，该函数在mount时和依赖项被set的时候会执行
• 不要在循环，条件或嵌套函数中调用hook

react的实现

• Problems
  • JSX不符合JS标准
  • 返回的JSX发生改变时，该如何更新DOM
  • State/Props 更新时，要触发render函数
• Virtual DOM
  Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

更新次数少---计算速度快

react状态管理库

react状态管理库

• redux
• xstate
• mobx
• recoil
• Modern.js / Reduck

应用级框架科普

• Next.js
  • 硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好同样有Serverless一键部署平台帮助开发者快速完成部署
• MODERN.js
  • 字节跳动Web Infra团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间
• Blitz
  • 无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目