这是我参与「第五届青训营 」伴学笔记创作活动的第6天
原本ui编程
- 不会状态更新，手动调用DOM——从转换式系统变成响应式系统
- 代码没有封装和隔离——代码组件化
- ui之间数据依赖需要手动维护——声明表示ui之间的依赖关系
入门
状态归属问题
react是单项数据流，只能父组件向子组件传递值 但是可以通过传递方法的方式——子组件调用方法修改父组件 Props不可改
useEffect
把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
componentDidMount组件挂载componentDidUpdate组件更新componentWillUnmount组件将要摧毁 useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组
useEffect(() => {
/** 执行逻辑 */
},[])
- 第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行
- 第二个参数可以不传，不会报错，但浏览器会无线循环执行逻辑处理函数。
- 第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ，不就是相当于 componentDidMount
- 第二个参数如果不为空数组,逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和 componentDidUpdate 的结合
useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。
虚拟dom
为保证jsx发生变化后操作dom节点，使用虚拟dom 赋予react声明式API,告诉React希望UI是什么状态，React就确保DOM匹配该状态。 在实际操作DOM过程中，使用diff进行对比，减少dom操作，重绘和重拍次数
diff
变化的是不同类型元素——替换 变化的是同类型的DOM元素——更新 同类型的组件元素——递归
diff是递归的，父组件发生改变后，子组件都强制刷新
React状态管理库
将状态抽离到UI外部进行统一管理，避免状态放最高父组件上，导致所有子组件刷新(props) 坏处：降低了组件复用
状态机
当前状态，收到外部事件后，迁移到下一个状态
需要了解学习的框架：Next.js->服务端渲染/modern.js->全栈开发平台
后续需要了解react+umi配置文件具体内容，公司是内网，还没有umi脚手架，很烦啊
