react

140 阅读2分钟

对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类语法