这是参加第六届青训营第二次笔记，以下是
课程纲要以及知识要点，以及一丢丢自己的理解。简单的记录一下，方便后面回头复盘。复盘再深入更新思考吧。至于我说的东西可能不对，但不喜勿喷。如果，愿意帮忙纠正，还是很欢迎的。
一、React的历史与应用
1. 前置知识
- HTML，CSS，JS基础
- 基础的数据结构、算法知识。如二叉树，深度遍历等。
- 会使用浏览器提供的DOM API 来修改DOM，更新UI。
2. 前端开发client
- 前端应用开发（h5），
- 移动原生应用开发，
- 结合Electron开发桌面应用，
- 小程序（应该也算一个）。
3. 历史与Facebook颇有渊源。
二、React的设计思路
1. UI编程痛点
- 状态更新，UI不会自动更新，需要手动的调用DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”
2. 响应式与转换式
转换式系统： 给定【输入】求解【输出】，编译器， 数值计算
!==
响应式系统： 监听事件，消息驱动。监控系统，UI界面
响应式系统逻辑:事件->执行既定回调->状态变更->UI更新。
- 状态更新，U自动更新。
“状态更新，UI不会自动更新，需要手动地调用DOM进行更新。” - 前端代码组件化，可复用，可封装。
“欠缺基本的代码层面的封装和隔离，代码层面没有组件化。” - 状态之间的互相依赖关系，只需声明即可。
“UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell”。”
3. 组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件中的数据流动通常是：父组件->子组件->孙子组件等等。
4. 状态归属问题
思考：
- React是单向数据流还是双向数据流？
答：单向。 - 如何解决状态不合理上升的问题？
答：第五节讲, 通过使用Redux了。 - 组件的状态改变后，如何更新DOM？
答：第四节讲， 虚拟DOM和Diff。
5. 组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态
- “组件”可由其它组件拼装而成
6. 生命周期（React）
三、React（hooks）的写法与React实现
- useState
用来声明变量,它可以帮助我们在函数组件中添加、读取和更新状态。如：const [name, setName] = useState(“铁头功的大师兄”);setName的赋值是异步。 - useEffect 副作用
- useEffect中第二个参数是Array。如果第二个参数是空，那么这个副作用就只触发一次。如果，不是空，那就随着数组中数据变化而被调用。
- 应该可以通过useEffect发起HTTP请求，
- 用useEffect，做过数据监听（不知对错，但是在一个函数组件中，可以同时存在多个useEffect）
- 注意： useEffect的第二个参数中的数据最好不要在循环体内部进行赋值，循环触发副作用是真吓人。
- useRef
- 也能用来声明一个变量，但是
current只参加首次渲染，后面在变化，页面不会更新。 - 通过 ref 与DOM绑定，就可操作 DOM
- 官方说能避免重复创建 ref 的内容(这个我还没有什么真切个感觉嘞)
- 也能用来声明一个变量，但是
四、 Reac的实现
1. Problems
- JSX不符合JS标准语法，(编译转化)
- 返回的JSX发生变化时，如何更新DOM（虚拟DOM，diff算法） 虚拟dom与浏览器dom树映射，哪里变了改哪里。
- State/Props 更新时，要重新触发render函数
三种编程方式：指令式编程，声明式编程（前端框架），响应式编程
2. How to Diff？
更新次数少 <---> 更新速度快 不同类型的元素 - 替换 同类型的DOM元素 - 更新 同类的组件元素 - 递归
五、React 状态管理库（redux、xstate状态机、mobx、recoil）
1. 核心思想
将状态抽离到UI外部进行统一管理 缺点： 降低组件的复用性
2. 状态机
当前状态，收到外部事件，迁移到下一个状态。
前端框架：Modern.js， 状态机：Reduck
六、应用级框架科普
- NEXTJS 用过NEXTJS写过静态页面，遇到一个大坑印象深刻。部署后，图片无法加载。以下是我的处理方式(图片加载代码片段)
/**
* 为了处理next/image 生产环境下无法加载image资源问题
* @description 这个真的有效，但是我不是很清楚这里的类型应该是什么
* @description 看起来Next的加载器正在对url进行编码，为了克服这个问题，你可以定义你自己的加载器，简单地返回src，
* @example <Image src={srcUrl} alt="image" loader={loaderProp} />
* */
// @ts-ignore
export const imageLoader = ({src}):any => {
return src;
};
- ModernJs
- Blitz（小团队项目）
学习建议以及总结：对于初学来说，React的写法确实有点不容易接受，但是去尝试接受学习，便可很快接受这种方式了。
这里我看到工程化的重要性。
不要急，慢慢来。
