前端框架(react.js)
知识点:
- 三大JS框架的区别
- React和Vue的对比
- React的优点和特点
- Hooks
- 生命周期
- Redux
- 纯函数
- 高阶组件
- react15、16、17的区别
- 扩展
1.三大JS框架的区别:
- Angular带有比较强的排它性的
- React主张是函数式编程的理念,侵入性没有Angular那么强,主要因为它是软性侵入。
- Vue 渐进式的
你如何看待react /什么是react react就是一个框架 他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序
react相对其他框架优势: 高性能高效率 实现了前端界面的高性能高效率开发,所以说react很擅长处理组件化的页面
2.React与Vue对比
2.1 相同之处
- 虚拟 DOM。映射真实 DOM,通过新旧 DOM 的 diff 对比,更好的跟踪渲染页面。
- 组件化。将应用拆分成一个个功能明确的模块,每个模块之间可以通过合适的方式互相联系。
- 构建工具。都有自己的构建工具,通过
Webpack+Babel去搭建脚手架。 - Chrome 开发工具。两者都有很好的 Chrome 扩展去帮助查找 Bug。
- 配套框架。Vue 有
Vue-router和Vuex,而 React 有React-router和React-Redux
2.2 不同之处
- 模板 VS JSX。Vue 推荐编写近似常规
HTML的模板进行渲染,而 React 推荐 JSX 的书写方式。 - 监听数据变化的不同。Vue 使用的是可变数据,而 React 更强调数据的不可变。在 Vue 中通过
v-model绑定的数据,用户改变输入值后对应的值也相应改变。而 React 需要通过setState进行设置变化。 - Diff 不同。Vue 通过双向链表实现边对比边更新 DOM,而 React 通过
Diff队列保存需要更新的 DOM,得到patch树,再统一批量更新 DOM。 - 开发团队。Vue 一开始核心就是 Evan You,后面再招了其他人组成团队;React 的话是一开始就是 Facebook 团队搞的。所以网上的人比对源码情况的话,Vue 的比 React 的简单易懂点。
3.react特点和优势:
3.1.虚拟dom
虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。
是一个JavaScript对象,重新渲染的时候,会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM,对比发现差异之后,只需修改真正的DOM树时就只需要触及差别中的部分就行,使用这个虚拟dom,避免对原生dom的创建和对比,这样就大大提升了性能,因为原生dom的创建是非常 消耗性能的,而对js对象的对比和创建对性能开销很小,从这种方式来提供应用的性能
3.2.组件
组件化 组件指的就是同时包含了html、css、js、image元素的聚合体
每个组件和组件都相互独立 便于维护
组件是通过React.createClass创建的(ES5),在es6中直接通过class关键字来创建
组件的划分要满足高内聚,低耦合的原则。
- 高内聚是指把逻辑紧密相关的内容放在一个组件中。
- 低耦合指的是不同组件的依赖关系要尽量弱化,每个组件要尽量独立。
组件其实就是一个构造器,每次使用组件都相当于在实例化组件
react的组件必须使用render函数来创建组件的虚拟dom结构
组件需要使用ReactDOM.render方法将其挂载在某一个节点上
组件的首字母必须大写
3.3.单向数据流 数据绑定 父到子
3.4.jsx树
通过跟babel结合把jsx里面的东西转成JavaScript对象