这是我参与「第五届青训营 」笔记创作活动的第7天。活动详情：# 伴学笔记创作活动来袭 ｜ 第五届字节跳动青训营
本节课为前端框架 React 的基础课程讲解，带领大家共同推演 React 框架的设计思路，包括 React 设计的由来，具体的设计方案，剖析该框架为何演进为目前熟知的响应式编程模型，帮助大家更好地理解 React 代码。
React
React:A JavaScript library for building user interfaces.
- 当状态变更时UI会自动更新
- 前端代码组件化 可复用 可封装
- 状态之间的相互依赖关系只需声明
应用场景：
- 前端应用开发
- 移动原生应用开发
- 结合Electron进行桌面应用开发
响应式系统： 监听事件，消息驱动 事件->执行既定的回调->状态变更->UI更新
转换式系统：给定输入，求解输出
React 设计与实现
- React 设计与实现 - 组件化 语义化的组件隔离
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可以将状态传入组件内部（复用）props
- React 设计与实现 – 状态归属问题
- 变量属于其root结点 状态上移
- Redux：React的状态管理库。解决状态上升问题
- 单向数据流 父组件给子组件传递信息 子组件通过执行父组件传递的函数改变父组件的状态
- 声明了状态和UI的映射
- 组件有props（外部传入）和state（私有）两种状态
- React 设计与实现 – 生命周期
- 组件挂载到实际的dom树上
- 挂载 卸载 状态改变
- Hooks 写法 / 基于class类的写法
Hooks
useState（） 传入一个初始值，返回一个状态和set该状态的函数。通过调用该函数实现状态的修改。
useEffect（） 传入一个函数和一个状态的数组（依赖项）。有副作用的函数应传入useEffect中执行。
不能在循环和判断中使用Hooks。
使用浏览器提供的DOM api去修改DOM（JS中的WebAPI）
