react

最新推荐文章于 2025-03-09 10:07:09 发布

糖果的小九

最新推荐文章于 2025-03-09 10:07:09 发布

阅读量197

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/qq_45271323/article/details/106540580

版权

react 专栏收录该内容

14 篇文章

订阅专栏

综合

vue和react的区别

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的理解

    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算法

react 从16.0的区别

    1）是生命周期的改变
    2）是this.setState
    3 ) react-Router
    4 ) 以前是jsx   现在是js文件格式
    5）声明组件方式class

为什么从16.0改变生命周期

便利取属性和状态，直接继承直接有props 和 state
class类语法

react-router的原理

 市场上的react-router的版本有1、2、3、4,1-3的差别不大，使用于16.0.0以下的版本
    react-router 4.0 适用于16.0.0以上

React.createClass来创建组件，在16以上只能使用class类的方式来创建
react-router依赖基础 - history
     老浏览器的history: 主要通过hash来实现，对应createHashHistory
     高版本浏览器: 通过html5里面的history，对应createBrowserHistory
         实现URL与UI界面的同步。其中在react-router中，URL对应Location对象，
         而UI是由react components来决定的，这样就转变成location与components之间的同步问题。
         react-router在history库的基础上，实现了URL与UI的同步，分为两个层次来描述具体的实现。  
location 是指你当前的位置，将要去的位置，或是之前所在的位置
match 对象包含了 <Route path> 如何与 URL 匹配的信息 
<BrowserRouter> : 一个使用了 HTML5 history API 的高阶路由组件，保证你的 UI 界面和 URL 保持同步 

高阶组件
    高阶组件通过包裹被传入的React组件，经过一系列处理，最终返回一个相对增强的React组件，
    供其他组件调用  可以说跟widthRoute一样的,就是相当于的一个路由的升级版  
    可以不破坏以前路由的效果 并增强效果  相当于判断登录和注册页面的切换（就是权限路由）
    权限路由就是路由跳转时 ,返回一个 三目判断 用来增强route的功能
    高阶组件其实就是处理react组件的函数
    1.属性代理
    2.方向继承
    第一种方法属性代理是最常见的实现方式，将被处理组件的props和新的props一起传递给新组件
     
有四个
        Route    配置
        Link       跳转不能改变样式
        NavLink  跳转用 他有一个默认类 action   
        Switch    包裹用
        Redirect  重定向
exact：
V4路由是包容性的，使用exact参数，可以确保最终只获取一个路由。
    组件层面描述实现过程
在react-router中最主要的component是Router RouterContext Link，history库起到了中间桥梁的作用。

调用 super(props) 的目的是什么

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。
传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props

render函数什么时候会执行？

当this.state 或者 this.props发生改变的时候render函数就会执行

react中如何定义自定义属性，以及限制外部数据的类型

1、自定义属性    

	组件名称.defaultProps= {        key:val    }

2、限制外部数据的类型      

引入propTypes第三方模块    

类型限制        组件名称.propTypes = {            key:propTypes.类型        }