对react的理解
react是集于v(视图层)层的一款框架 虚拟dom 和diff算法
react特点
(1)声明式设计
(2)高效 其中高效以现在 虚拟dom 最大限度减少与dom的交互 和diff算法
(3)灵活 体现在可以与已知的框架或库很好的配合
(4)JSX 是js语法的扩展
(5)组件化 构建组件,是代码的更容易得到复用 , 比较建议在大型项目的开发
(6)单项数据 : 实现单项数流 从而减少代码复用
虚拟dom实现的原理以及怎么实现
虚拟dom相当在js和真实dom中间加了一个缓存 ,
利用dom diff算法避免了没有必要的dom操作 , 从而提高性能
用 javaScript对象 结构表示dom树的结构;然后用这个树构建一个真正的dom树,插到文档中
当状态变更的时候,重新构建一颗新的对象树。然后用新的树和旧的树进行比较,记录两颗树的差异
把记录的差异之处重新进行dom 渲染 视图就更新了
diff 算法
(1)把树形结构按照层次分解,之比较同级元素
(2)给列表结构的每个单元添加唯一的key属性 比较key值
(3)react只会匹配相同组件的component
(4)合并操作,调用component的setState方法的时候,
react将其标记dirty到每一个事件循环,结束 react
检查所有标记dirty的component重新绘制
(5)选择性子树渲染。用shouldComponentUpdate提高diff算法
vue和react的区别
(1)React严格上只针对MVC的view层,Vue则是MVVM模式
(2)virtual DOM不一样,vue会跟踪每一个组件的依赖关系,
不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,
全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
(3)组件写法不一样:
React推荐的做法是 JSX + inline style,
也就是把HTML和CSS全都写进JavaScript了,即'all in js';
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
(4)数据绑定:
vue实现了数据的双向绑定,
react数据流动是单向的
(5)state对象在react应用中不可变的
需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理
react 从16.0的区别
1)是生命周期的改变
2)是this.setState
3 ) react-Router
4 ) 以前是jsx 现在是js文件格式
5)声明组件方式class
为什么从16.0改变生命周期
1)便利取属性和状态,直接继承直接 有props 和 state
2)class类语法