这篇文章给大家聊聊关于react谷歌浏览器debug，以及react google对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

本文目录

1. 前端经典面试题(包含JS、CSS、React、浏览器等)
2. 在浏览器里用react库 不通过import
3. React如何实现浏览器打印部分内容详析

一、前端经典面试题(包含JS、CSS、React、浏览器等)

误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。

实际上HTTP协议从未规定 GET/POST的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点:

补充补充一个get和post在缓存方面的区别：

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key=> index的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下：

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。

**原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是，有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state。

虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

用 JavaScript对象结构表示 DOM树的结构；然后用这个树构建一个真正的 DOM树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

结构：display:none:会让元素完全从渲染树中消失，渲染的时候不占据任何空间,不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：displaynone:修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden:修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0：修改元素会造成重绘，性能消耗较少

常用的一般为三种.clearfix, clear:both, overflow:hidden;

比较好是.clearfix,伪元素万金油版本,后两者有局限性.

clear:both:若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了,比如相邻容器的包裹层元素塌陷

overflow:hidden:这种若是用在同个容器内,可以形成 BFC避免浮动造成的元素塌陷

概念：将多个小图片拼接到一个图片中。通过 background-position和元素尺寸调节需要显示的背景图案。

1.处于常规流中时，如果 width没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align

1.水平方向上根据 direction依次布局

4. margin/padding在竖直方向上无效，水平方向上有效

5. width/height属性对非替换行内元素无效，宽度由元素内容决定

6.非替换行内元素的行框高由 line-height确定，替换行内元素的行框高由 height, margin, padding, border决定 7.浮动或绝对定位时会转换为 block 8. vertical-align属性生效

(ES6之前)其中5种为基本类型: string, number, boolean, null, undefined,

ES6出来的 Symbol也是原始数据类型，表示独一无二的值

Object为引用类型(范围挺大),也包括数组、函数,

简单的工厂模式可以理解为解决多个相似的问题;

只能被实例化(构造函数给实例添加属性与方法)一次

将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值

就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送,

代码实现逻辑是用数组存贮订阅者,发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。

addEventListener： addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。

那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。

我们发现Function的原型也是Function。

这里来举个栗子，以 Object为例，我们常用的 Object便是一个构造函数，因此我们可以通过它构建实例。

则此时，实例为instance,构造函数为Object，我们知道，构造函数拥有一个 prototype的属性指向原型，因此原型为:

在 JS中，继承通常指的便是原型链继承，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。

在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？

函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。

函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数预置通用参数，供多次重复调用。

call和 apply都是为了解决改变 this的指向。作用都是相同的，只是传参的方式不同。

除了第一个参数外， call可以接收一个参数列表， apply只接受一个参数数组。

bind和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind实现柯里化。

对于实现以下几个函数，可以从几个方面思考

箭头函数其实是没有 this的，这个函数中的 this只取决于他外面的第一个不是箭头函数的函数的 this。在这个例子中，因为调用 a符合前面代码中的第一个情况，所以 this是 window。并且 this一旦绑定了上下文，就不会被任何代码改变。

在函数中，我们首先使用 var关键字声明了 name变量。这意味着变量在创建阶段会被提升（ JavaScript会在创建变量创建阶段为其分配内存空间），默认值为 undefined，直到我们实际执行到使用该变量的行。我们还没有为 name变量赋值，所以它仍然保持 undefined的值。

使用 let关键字（和 const）声明的变量也会存在变量提升，但与 var不同，初始化没有被提升。在我们声明（初始化）它们之前，它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时， JavaScript会抛出一个 ReferenceError。

关于 let的是否存在变量提升，我们何以用下面的例子来验证：

let变量如果不存在变量提升， console.log(name)就会输出 ConardLi，结果却抛出了 ReferenceError，那么这很好的说明了， let也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。

colorChange方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie是一个子级对象，函数不会传递，所以在 freddie实例上不存在 freddie方法：抛出 TypeError。

1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length属性和 splice方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1处的值，故打印为empty，主动 obj[0]获取为 undefined

首先，a和b同时引用了{n:2}对象，接着执行到a.x= a={n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x={n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为{n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。

在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript检查对象是否具有对内存中相同位置的引用。

我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。

这就是为什么{ age: 18}==={ age: 18}和{ age: 18}=={ age: 18}返回 false的原因。

所有对象键（不包括 Symbols）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（'1'）也返回 true。

上面的说法不适用于 Set。在我们的 Set中没有“1”： set.has（'1'）返回 false。它有数字类型 1， set.has（1）返回 true。

这题考察的是对象的键名的转换。

catch块接收参数 x。当我们传递参数时，这与变量的 x不同。这个变量 x是属于 catch作用域的。

之后，我们将这个块级作用域的变量设置为 1，并设置变量 y的值。现在，我们打印块级作用域的变量 x，它等于 1。

在 catch块之外， x仍然是 undefined，而 y是 2。当我们想在 catch块之外的 console.log(x)时，它返回 undefined，而 y返回 2。

二、在浏览器里用react库 不通过import

1、在浏览器里用react库不通过import的解释如下：

2、import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，跟react没什么关系的。如果你的from只写了文件名，也可以写一个配置文件，在配置文件里面写上这个文件的路径，js解析器如果在from里面的路径找不到文件的话，就去配置文件下面找的。

三、React如何实现浏览器打印部分内容详析

近期着手项目任务的打印功能，在此作个记录，本文介绍基于React的一种调用浏览器打印页面指定内容的方法。

整体思路：通过构建一个隐藏的元素（该元素包裹需打印的内容），当打印行为触发时，将页面其他的一些不需要打印的元素隐藏，然后将需打印的元素追加到body中，打印完成后，再恢复初始状态即可。浏览器打印的本质还是将web页面中的元素打印出来而已。

在页面中构建一个display为none的元素，里面的内容为你需要打印的内容。我们还需要设置包裹打印内容的元素的ref属性，以便于后面获取到元素。

<div style={{ display:'none'}}>

<div ref={el=>(this.printRef= el)}>

预览界面关闭后，将待打印元素从body中移除，将原始页面恢复。

let printView= this.state.printRef//获取待打印元素

document.querySelector('#root').className='print-hide'//将根元素隐藏

document.body.appendChild(printView)//将待打印元素追加到body中

window.print()//调用浏览器的打印预览

document.body.removeChild(printView)//将待打印元素从body中移除

document.querySelector('#root').className=''//将原始页面恢复

visibility: hidden!important;

其中，@page中的size可以自己设置纸张的大小，如果是A4纸可以直接设置值为A4，媒体查询@media print中设置的是打印时的样式，因为打印设备知道其输出区域的物理大小，所以使用厘米（cm）、毫米（mm）、英寸（in）等作为打印设计的单位完全可行。

直接替换body的内容为要打印的内容，之后再重新刷新页面。

const old= window.document.body.innerHTML//备份原来的页面

window.document.body.innerHTML=''

window.document.body.appendChild(/*将你要打印的内容附加到这*/)

window.print()//调用print()函数时，会跳出打印预览的界面，以下的代码被阻塞，关闭预览界面后继续执行

window.document.body.innerHTML= old

window.location.reload()//重新加载旧页面

打开一个新窗口，将打印内容放到新窗口打印，打印结束后关闭新窗口

const newWindow= window.open("打印窗口","_blank")

const docStr='<div>test</div>'//需要打印的内容

newWindow.document.write(docStr)

const styles= document.createElement("style")

styles.setAttribute('type','text/css')//media="print"

newWindow.document.getElementsByTagName('head')[0].appendChild(styles)

以上两种方法可能会造成CSS样式应用无效的问题。

第二小节的步骤2中的意思是：将页面中所有不需要打印的元素隐藏，特别注意像模态窗Model这些元素，也要为它们加上'print-hide'className属性。

如果需要在特定位置强制分页打印，可以尝试在对应元素上设置page-break-before：always!important、page-break-after：always!importantCSS属性，该属性只对块级元素有效。

进入打印预览后，我们无法获知用户最终是选择了打印，还是选择了取消。这里若有人知道解决方法的话，欢迎留言。

好了，文章到这里就结束啦，如果本次分享的react谷歌浏览器debug和react google问题对您有所帮助，还望关注下本站哦！