React的历史与应用
FaxJS:React的原型 2013年,React开源
React的设计思路
UI编程痛点: 状态更新,UI不会自动更新,需要手动调用DOM更新 欠缺基本的代码层面的封装和隔离,代码层面没有组件化 UI之间的数据依赖关系,需要手动维护 转化式系统=>响应式系统 :事件->执行回调->状态更新->UI更新 =>状态更新,UI自动更新;前端代码组件化,可复用,可封装;状态之前的互相依赖关系,只需声明即可 将组件的共同状态上升至他们的最近公共父节点=>状态管理冗余 总结思考: React是单向数据流:只有父组件可以给子组件传数据 状态不合理上升? 组件状态改变后,如何更新DOM?
React生命周期:Mounting挂载、Updating更新、Unmounting卸载
React(hooks)的写法与React实现
useState、useEffect
使用法则:不要在循环、条件、嵌套函数中调用hooks
实现:
JSX不符合JavaScript的语法
返回的JSX发生改变,如何更新DOM
状态更新,重新渲染
Virtual DOM
用于和真实的DOM同步,在JS内存中维护的一个对象。具有和DOM类似的树状结构,并和DOM可以建立一一对应的关系
赋予React声明式的API;
指令式、声明式、响应式
性能问题:每个父组件改变,所有后代节点都需要更新
React状态管理库与应用级框架科普
状态管理库: 尽量使用它去解决组件“距离远”的状态共享 将状态抽离到UI外部进行统一管理 问题:组件复用性不好 状态机:收到外部事件,迁移到下一状态 推荐的React状态管理库——Modern.js/Reduck。讲师团队开发的嘞 应用级框架:Next.js、Modern.js、Blitz
总结
今天的课程老师带我们了解了React的历史,解决的前端编程痛点、特点及实现思路。因为之前一直接触使用的都是Vue,我也上网搜索了解了一下这两种框架的特点。知道了Vue是由一个中国的独立开发者开源的,牛的嘞