年前端react面试打怪升级之路
admin
2024-04-03 15:09:14
0

react和vue的区别

相同点:

  1. 数据驱动页面,提供响应式的试图组件
  2. 都有virtual DOM,组件化的开发,通过props参数进行父子之间组件传递数据,都实现了webComponents规范
  3. 数据流动单向,都支持服务器的渲染SSR
  4. 都有支持native的方法,react有React native, vue有wexx

不同点:

  1. 数据绑定:Vue实现了双向的数据绑定,react数据流动是单向的
  2. 数据渲染:大规模的数据渲染,react更快
  3. 使用场景:React配合Redux架构适合大规模多人协作复杂项目,Vue适合小快的项目
  4. 开发风格:react推荐做法jsx + inline style把html和css都写在js了

vue是采用webpack +vue-loader单文件组件格式,html, js, css同一个文件

对有状态组件和无状态组件的理解及使用场景

(1)有状态组件

特点:

  • 是类组件
  • 有继承
  • 可以使用this
  • 可以使用react的生命周期
  • 使用较多,容易频繁触发生命周期钩子函数,影响性能
  • 内部使用 state,维护自身状态的变化,有状态组件根据外部组件传入的 props 和自身的 state进行渲染。

使用场景:

  • 需要使用到状态的。
  • 需要使用状态操作组件的(无状态组件的也可以实现新版本react hooks也可实现)

总结: 类组件可以维护自身的状态变量,即组件的 state ,类组件还有不同的生命周期方法,可以让开发者能够在组件的不同阶段(挂载、更新、卸载),对组件做更多的控制。类组件则既可以充当无状态组件,也可以充当有状态组件。当一个类组件不需要管理自身状态时,也可称为无状态组件。

(2)无状态组件 特点:

  • 不依赖自身的状态state
  • 可以是类组件或者函数组件。
  • 可以完全避免使用 this 关键字。(由于使用的是箭头函数事件无需绑定)
  • 有更高的性能。当不需要使用生命周期钩子时,应该首先使用无状态函数组件
  • 组件内部不维护 state ,只根据外部组件传入的 props 进行渲染的组件,当 props 改变时,组件重新渲染。

使用场景:

  • 组件不需要管理 state,纯展示

优点:

  • 简化代码、专注于 render
  • 组件不需要被实例化,无生命周期,提升性能。 输出(渲染)只取决于输入(属性),无副作用
  • 视图和数据的解耦分离

缺点:

  • 无法使用 ref
  • 无生命周期方法
  • 无法控制组件的重渲染,因为无法使用shouldComponentUpdate 方法,当组件接受到新的属性时则会重渲染

总结: 组件内部状态且与外部无关的组件,可以考虑用状态组件,这样状态树就不会过于复杂,易于理解和管理。当一个组件不需要管理自身状态时,也就是无状态组件,应该优先设计为函数组件。比如自定义的

);} }

可以看出,React 类组件内部预置了相当多的“现成的东西”等着我们去调度/定制,state 和生命周期就是这些“现成东西”中的典型。要想得到这些东西,难度也不大,只需要继承一个 React.Component 即可。

当然,这也是类组件的一个不便,它太繁杂了,对于解决许多问题来说,编写一个类组件实在是一个过于复杂的姿势。复杂的姿势必然带来高昂的理解成本,这也是我们所不想看到的。除此之外,由于开发者编写的逻辑在封装后是和组件粘在一起的,这就使得类组件内部的逻辑难以实现拆分和复用。

(2)函数组件:函数组件就是以函数的形态存在的 React 组件。早期并没有 React-Hooks,函数组件内部无法定义和维护 state,因此它还有一个别名叫“无状态组件”。以下是一个函数组件:

function DemoFunction(props) {const { text } = propsreturn (

{`函数组件接收的内容:[${text}]`}

); }

相比于类组件,函数组件肉眼可见的特质自然包括轻量、灵活、易于组织和维护、较低的学习成本等。

通过对比,从形态上可以对两种组件做区分,它们之间的区别如下:

  • 类组件需要继承 class,函数组件不需要;
  • 类组件可以访问生命周期方法,函数组件不能;
  • 类组件中可以获取到实例化后的 this,并基于这个 this 做各种各样的事情,而函数组件不可以;
  • 类组件中可以定义并维护 state(状态),而函数组件不可以;

除此之外,还有一些其他的不同。通过上面的区别,我们不能说谁好谁坏,它们各有自己的优势。在 React-Hooks 出现之前,类组件的能力边界明显强于函数组件。

实际上,类组件和函数组件之间,是面向对象和函数式编程这两套不同的设计思想之间的差异。而函数组件更加契合 React 框架的设计理念: React 组件本身的定位就是函数,一个输入数据、输出 UI 的函数。作为开发者,我们编写的是声明式的代码,而 React 框架的主要工作,就是及时地把声明式的代码转换为命令式的 DOM 操作,把数据层面的描述映射到用户可见的 UI 变化中去。这就意味着从原则上来讲,React 的数据应该总是紧紧地和渲染绑定在一起的,而类组件做不到这一点。函数组件就真正地将数据和渲染绑定到了一起。函数组件是一个更加匹配其设计理念、也更有利于逻辑拆分与重用的组件表达形式。

为了能让开发者更好的的去编写函数式组件。于是,React-Hooks 便应运而生。

React-Hooks 是一套能够使函数组件更强大、更灵活的“钩子”。

函数组件比起类组件少了很多东西,比如生命周期、对 state 的管理等。这就给函数组件的使用带来了非常多的局限性,导致我们并不能使用函数这种形式,写出一个真正的全功能的组件。而React-Hooks 的出现,就是为了帮助函数组件补齐这些(相对于类组件来说)缺失的能力。

如果说函数组件是一台轻巧的快艇,那么 React-Hooks 就是一个内容丰富的零部件箱。“重装战舰”所预置的那些设备,这个箱子里基本全都有,同时它还不强制你全都要,而是允许你自由地选择和使用你需要的那些能力,然后将这些能力以 Hook(钩子)的形式“钩”进你的组件里,从而定制出一个最适合你的“专属战舰”。

diff算法如何比较?

  • 只对同级比较,跨层级的dom不会进行复用
  • 不同类型节点生成的dom树不同,此时会直接销毁老节点及子孙节点,并新建节点
  • 可以通过key来对元素diff的过程提供复用的线索
  • 单节点diff
  • 单点diff有如下几种情况:
  • key和type相同表示可以复用节点
  • key不同直接标记删除节点,然后新建节点
  • key相同type不同,标记删除该节点和兄弟节点,然后新创建节点

类组件(Class component)和函数式组件(Functional component)之间有何不同

  • 类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态
  • 当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 ‘无状态组件(stateless component)’,可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

React的严格模式如何使用,有什么用处?

StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
可以为应用程序的任何部分启用严格模式。例如:

import React from 'react';
function ExampleApplication() {return (
); }

在上述的示例中,不会对 HeaderFooter 组件运行严格模式检查。但是,ComponentOneComponentTwo 以及它们的所有后代元素都将进行检查。

StrictMode 目前有助于:

  • 识别不安全的生命周期
  • 关于使用过时字符串 ref API 的警告
  • 关于使用废弃的 findDOMNode 方法的警告
  • 检测意外的副作用
  • 检测过时的 context API

何为 Children

在JSX表达式中,一个开始标签(比如)和一个关闭标签(比如)之间的内容会作为一个特殊的属性props.children被自动传递给包含着它的组件。

这个属性有许多可用的方法,包括 React.Children.mapReact.Children.forEachReact.Children.countReact.Children.onlyReact.Children.toArray

setState 是同步异步?为什么?实现原理?

1. setState是同步执行的

setState是同步执行的,但是state并不一定会同步更新

2. setState在React生命周期和合成事件中批量覆盖执行

在React的生命周期钩子和合成事件中,多次执行setState,会批量执行

具体表现为,多次同步执行的setState,会进行合并,类似于Object.assign,相同的key,后面的会覆盖前面的

当遇到多个setState调用时候,会提取单次传递setState的对象,把他们合并在一起形成一个新的
单一对象,并用这个单一的对象去做setState的事情,就像Object.assign的对象合并,后一个
key值会覆盖前面的key值

经过React 处理的事件是不会同步更新 this.state的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。
为了合并setState,我们需要一个队列来保存每次setState的数据,然后在一段时间后执行合并操作和更新state,并清空这个队列,然后渲染组件。

Redux 中间件是怎么拿到store 和 action? 然后怎么处理?

redux中间件本质就是一个函数柯里化。redux applyMiddleware Api 源码中每个middleware 接受2个参数, Store 的getState 函数和dispatch 函数,分别获得store和action,最终返回一个函数。该函数会被传入 next 的下一个 middleware 的 dispatch 方法,并返回一个接收 action 的新函数,这个函数可以直接调用 next(action),或者在其他需要的时刻调用,甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store的 dispatch 方法作为 next 参数,并借此结束调用链。所以,middleware 的函数签名是({ getState,dispatch })=> next => action。

在 Redux 中,何为 store

Store 是一个 javascript 对象,它保存了整个应用的 state。与此同时,Store 也承担以下职责:

  • 允许通过 getState() 访问 state
  • 运行通过 dispatch(action) 改变 state
  • 通过 subscribe(listener) 注册 listeners
  • 通过 subscribe(listener) 返回的函数处理 listeners 的注销

相关内容

热门资讯

狗能吃萝卜吗白萝卜 狗能吃萝卜吗白萝卜狗狗当然可以吃萝卜啦,不管是白萝卜还是胡萝卜都可以吃的,只不过狗狗一般不太喜欢吃这...
CAD画图分解后怎么再合并啊 CAD画图分解后怎么再合并啊CAD画图分解后怎么再合并啊多线段:命令:PE-M-选择图-合并J块:命...
大排畸检查时,为什么宝宝最爱捂... 大排畸检查时,为什么宝宝最爱捂脸不让看?有些胎儿有缺陷,求生欲很强的 [捂脸]我的四维照就是捂脸的...
不死之药赞扬了什么? 不死之药赞扬了什么?概括一下内容和这篇文章赞扬了什么?速度~不死之药赞扬了古代人们追求一种永久的生存...
求推荐几本心理学入门的书 求推荐几本心理学入门的书书名就行基础心理学吧。这是最基本的东西。不知道您只是猎奇,还是想学心理学而选...
翻译英语:我们太久没有聊天了,... 翻译英语:我们太久没有聊天了,有很多的话不知道怎么开口说起,真怀念那时无话不说的时候虽然后来才知道那...
unconditional l... unconditional love是什么意思无条件的爱;为你痴情(电影名)Unconditiona...
宇宙有始有终还是无始无终?如果... 宇宙有始有终还是无始无终?如果宇宙有开始和结束请问那分别是什么?开始时诞生,结束是毁灭.毁灭又是另一...
小鸭子过马路的作文怎么写 小鸭子过马路的作文怎么写小鸭子过马路的作文怎么写?参考如下:过马路是一只小鸭子的一次冒险经历,这是一...
23要结婚是不是太早了?男女朋... 23要结婚是不是太早了?男女朋友可以一起上下班吗从你的描述看,你们现在处于新鲜清拍期,这才是刚刚开尺...
爱一个人真的难么?都说等待是最... 爱一个人真的难么?都说等待是最长情告白这句话对么?爱一个人其稿尘实确实比较难的,因为感情是两个人的事...
孩子是否一定要睡午觉,是否有什... 孩子是否一定要睡午觉,是否有什么危害?睡午觉怎么会有危害呢,其实下午小睡一下有助于孩子发育,只要不是...
甲壳虫乐队的经典歌曲 甲壳虫乐队的经典歌曲我非常喜欢In my life和yesterday他们还有没有像这样的歌曲? ...
老泪纵横什么意思?出处是哪里... 老泪纵横什么意思?出处是哪里?【出处】:无 【释义】:纵横:交错。老人泪流满面,形容极度悲伤或...
古代祭天地的礼仪称作 什么 古代祭天地的礼仪称作 什么祭祀,拜祭天地是祭祀的一种形式有一种叫:“封禅”
宝贝用韩语怎么说 宝贝用韩语怎么说宝贝用韩语怎么说韩语的宝贝:보배【名词】宝贝。宝物。短语:1、기보배 奇甫倍2、한보...
滑头鬼之孙陆生名言,看漫画的人... 滑头鬼之孙陆生名言,看漫画的人,脑海中有没有几句啊。我要成为魑魅魍魉之主,让百鬼夜行在我的身后
姓陈女孩五行缺木取名 姓陈女孩五行缺木取名陈佳琳,(最好取三个字的名字,其中要包含木字)。
有什么好看的动画片的电影爱情片 有什么好看的动画片的电影爱情片要哪种?咖你号,多少.需要什么给什么 不免
收集和星星、宇宙有关的优美文案 收集和星星、宇宙有关的优美文案 ☄ 1. 大约150亿年前,宇宙是个体积无限小,密度无数大的...