面试官:说说对 Node 中的 process 的理解?有哪些常用方法?
面试官:说说对 Node 中的 process 的理解?有哪些常用方法?
一、是什么process 对象是一个全局变量,提供了有关当前 Node.js 进程的信息并对其进行控制,作为一个全局变量
我们都知道,进程计算机系统进行资源分配和调度的基本单位,是操作系统结构的基础,是线程的容器
当我们启动一个js文件,实际就是开启了一个服务进程,每个进程都拥有自己的独立空间地址、数据栈,像另一个进程无法访问当前进程的变量、数据结构,只有数据通信后,进程之间才可以数据共享
由于JavaScript是一个单线程语言,所以通过node xxx启动一个文件后,只有一条主线程
二、属性与方法关于process常见的属性有如下:
process.env:环境变量,例如通过 `process.env.NODE_ENV 获取不同环境项目配置信息
process.nextTick:这个在谈及 EventLoop 时经常为会提到
process.pid:获取当前进程id
process.ppid:当前进程对应的父进程
process.cwd():获取当前进程工作目录,
process.platform: ...
面试官:说说 Node 文件查找的优先级以及 Require 方法的文件查找策略?
面试官:说说 Node 文件查找的优先级以及 Require 方法的文件查找策略?
一、模块规范NodeJS对CommonJS进行了支持和实现,让我们在开发node的过程中可以方便的进行模块化开发:
在Node中每一个js文件都是一个单独的模块
模块中包括CommonJS规范的核心变量:exports、module.exports、require
通过上述变量进行模块化开发
而模块化的核心是导出与导入,在Node中通过exports与module.exports负责对模块中的内容进行导出,通过require函数导入其他模块(自定义模块、系统模块、第三方库模块)中的内容
二、查找策略require方法接收一下几种参数的传递:
原生模块:http、fs、path等
相对路径的文件模块:./mod或../mod
绝对路径的文件模块:/pathtomodule/mod
目录作为模块:./dirname
非原生模块的文件模块:mod
require参数较为简单,但是内部的加载却是十分复杂的,其加载优先级也各自不同,如下图:
从上图可 ...
面试官:React事件绑定的方式有哪些?区别?
面试官:React事件绑定的方式有哪些?区别?
一、是什么在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick
最简单的事件绑定如下:
123456789class ShowAlert extends React.Component { showAlert() { console.log("Hi"); } render() { return <button onClick={this.showAlert}>show</button>; }}
从上面可以看到,事件绑定的方法需要使用{}包住
上述的代码看似没有问题,但是当将处理函数输出代码换成console.log(this)的时候,点击按钮,则会发现控制台输出undefined
二、如何绑定为了解决上面正确输出this的问题,常见的绑定方式有如下:
render方法中使用bind
render方法中使用箭头函数
construct ...
面试官:React构建组件的方式有哪些?区别?
面试官:React构建组件的方式有哪些?区别?
一、是什么组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式
在React中,一个类、一个函数都可以视为一个组件
在之前文章中,我们了解到组件所存在的优势:
降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快速完成需求,例如输入框,可以替换为日历、时间、范围等组件作具体的实现
调试方便,由于整个系统是通过组件组合起来的,在出现问题的时候,可以用排除法直接移除组件,或者根据报错的组件快速定位问题,之所以能够快速定位,是因为每个组件之间低耦合,职责单一,所以逻辑会比分析整个系统要简单
提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级
二、如何构建在React目前来讲,组件的创建主要分成了三种方式:
函数式创建
通过 React.createClass 方法创建
继承 React.Component 创建
函数式创建在React Hooks出来之前,函数式组件可以视为无状态组件,只负责根据传入的props来展示视图,不涉及对stat ...
面试官:说说对Fiber架构的理解?解决了什么问题?
面试官:说说对Fiber架构的理解?解决了什么问题?
一、问题JavaScript 引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待
如果 JavaScript 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿
而这也正是 React 15 的 Stack Reconciler 所面临的问题,当 React 在渲染组件时,从开始到渲染完成整个过程是一气呵成的,无法中断
如果组件较大,那么js线程会一直执行,然后等到整棵VDOM树计算完成后,才会交给渲染的线程
这就会导致一些用户交互、动画等任务无法立即得到处理,导致卡顿的情况
二、是什么React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化,是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认,React Fiber 在React 16 版本发布
在react中,主要做了以下的操作:
为每个增加了优先级,优先级高的任务可以 ...
面试官:说说对高阶组件的理解?应用场景?
面试官:说说对高阶组件的理解?应用场景?
一、是什么高阶函数(Higher-order function),至少满足下列一个条件的函数
接受一个或多个函数作为输入
输出一个函数
在React中,高阶组件即接受一个或多个组件作为参数并且返回一个组件,本质也就是一个函数,并不是一个组件
1const EnhancedComponent = highOrderComponent(WrappedComponent);
上述代码中,该函数接受一个组件WrappedComponent作为参数,返回加工过的新组件EnhancedComponent
高阶组件的这种实现方式,本质上是一个装饰者设计模式
二、如何编写最基本的高阶组件的编写模板如下:
12345678910import React, { Component } from 'react';export default (WrappedComponent) => { return class EnhancedComponent extends Component { ...
面试官:说说 React 性能优化的手段有哪些?
面试官:说说 React 性能优化的手段有哪些?
一、是什么React凭借virtual DOM和diff算法拥有高效的性能,但是某些情况下,性能明显可以进一步提高
在前面文章中,我们了解到类组件通过调用setState方法, 就会导致render,父组件一旦发生render渲染,子组件一定也会执行render渲染
当我们想要更新一个子组件的时候,如下图绿色部分:
理想状态只调用该路径下的组件render:
但是react的默认做法是调用所有组件的render,再对生成的虚拟DOM进行对比(黄色部分),如不变则不进行更新
从上图可见,黄色部分diff算法对比是明显的性能浪费的情况
二、如何做在React中如何避免不必要的render中,我们了解到如何避免不必要的render来应付上面的问题,主要手段是通过shouldComponentUpdate、PureComponent、React.memo,这三种形式这里就不再复述
除此之外, 常见性能优化常见的手段有如下:
避免使用内联函数
使用 React Fragments 避免额外标记
使用 Immutable
懒加 ...
面试官:说说React Jsx转换成真实DOM过程?
面试官:说说React Jsx转换成真实DOM过程?
一、是什么react通过将组件编写的JSX映射到屏幕,以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上
在前面文章了解中,JSX通过babel最终转化成React.createElement这种形式,例如:
1234<div> < img src="avatar.png" className="profile" /> <Hello /></div>
会被bebel转化成如下:
123456789React.createElement( "div", null, React.createElement("img", { src: "avatar.png", className: "profile" }), React.createElement(Hello, null));
在转化过程中,babe ...
面试官:说说对React Hooks的理解?解决了什么问题?
面试官:说说对React Hooks的理解?解决了什么问题?
一、是什么Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
至于为什么引入hook,官方给出的动机是解决长时间使用和维护react过程中常遇到的问题,例如:
难以重用和共享组件中的与状态相关的逻辑
逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state 时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面
类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题
由于业务变动,函数组件不得不改为类组件等等
在以前,函数组件也被称为无状态的组件,只负责渲染的一些工作
因此,现在的函数组件也可以是有状态的组件,内部也可以维护自身的状态以及做一些逻辑方面的处理
二、有哪些上面讲到,Hooks让我们的函数组件拥有了类组件的特性,例如组件内的状态、生命周期
最常见的hooks有如下:
useState
useEffect
其他
useState首先给出一个例子,如下:
12345678 ...
面试官:说说React Router有几种模式?实现原理?
面试官:说说React Router有几种模式?实现原理?
一、是什么在单页应用中,一个web项目只有一个html页面,一旦页面加载完成之后,就不用因为用户的操作而进行页面的重新加载或者跳转,其特性如下:
改变 url 且不让浏览器像服务器发送请求
在不刷新页面的前提下动态改变浏览器地址栏中的URL地址
其中主要分成了两种模式:
hash 模式:在url后面加上#,如http://127.0.0.1:5500/home/#/page1
history 模式:允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录
二、使用React Router对应的hash模式和history模式对应的组件为:
HashRouter
BrowserRouter
这两个组件的使用都十分的简单,作为最顶层组件包裹其他组件,如下所示
12345678910111213141516171819202122232425262728// 1.import { BrowserRouter as Router } from "react-router-dom" ...