常见的前端考试面试题目react，javascript，five

1.说说你对react的理解？有哪些特性？

React，用于构建用户界面的 JavaScript 库，提供了 UI 层面的解决方案

遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效

使用虚拟DOM来有效地操作DOM，遵循从高阶组件到低阶组件的单向数据流

帮助我们将界面成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，构成整体页面

react 类组件使用一个名为 render() 的方法或者函数组件return，接收输入的数据并返回需要展示的内容

特性
React特性有很多，如：
JSX语法

单向数据绑定

虚拟DOM

声明式编程

Component

2.说说Real diff算法是怎么运作的

主要分为3层：tree层、component层、element层
(1)、tree层：tree层对DOM节点的跨层级移动的操作忽略不计，只对相同层级的DOM节点进行比较（即同一个父节点下的所有子节点），一旦发现节点不存在，直接删除掉该节点以及之下的所有子节点
(2)、component层：

遇到同一类型的组件遵循 tree diff，进行层级对比
遇到不同类型的组件，直接将这个不同的组件判断为脏组件，并替换该组件和之下所有的子节点
在同一类型的两个组件中，当知道这个组件的虚拟dom没有任何变化，就可以手动使用shouldComponentUpdate()来判断组件是否需要进行diff，进一步的提升了diff效率和性能
(3)、element层：对同一层级的元素节点进行比较，有三种情况：

面对全新的节点时，执行插入操作
面对多余的节点时，执行删除操作
面对换位的节点时，执行移动操作

3.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

挂载阶段:

constructor() 在 React 组件挂载之前，会调用它的构造函数。
componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用

更新运行阶段:
componentWillReceiveProps： 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低
shouldComponentUpdate() :用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
render(): render() 方法是 class 组件中唯一必须实现的方法。
componentWillUpdate(): shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。
componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期

卸载或销毁阶段

componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。

4.说说你对React中虚拟dom的理解？

虚拟DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其称为VNode，用对象属性来描述节点，实际上它是一层对真实DOM的抽象，最终可以通过渲染操作使这棵树映射到真实环境上，简单来说Virtual DOM就是一个Js对象，是更加轻量级的对DOM的描述，用以表示整个文档。

Virtual DOM是一种编程概念，在这个概念里，UI以一种理想化的，或者说虚拟的表现形式被保存于内存中，并通过如ReactDOM等类库使之与真实的DOM同步，这一过程叫做协调。这种方式赋予了React声明式的API，您告诉React希望让UI是什么状态，React就确保DOM匹配该状态，这样可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

与其将Virtual DOM视为一种技术，不如说它是一种模式，人们提到它时经常是要表达不同的东西。在React的世界里，术语Virtual DOM通常与React元素关联在一起，因为它们都是代表了用户界面的对象，而React也使用一个名为fibers的内部对象来存放组件树的附加信息，上述二者也被认为是React中Virtual DOM 实现的一部分。

5.说说你对react hook的理解？

React Hook是React 16.8版本引入的新特性，它可以让我们在函数组件中使用state和其他React特性，而不需要使用类组件。使用Hook可以使代码更简洁、易于理解和维护。常用的Hook包括useState、useEffect、useContext等，它们可以帮助我们处理组件状态、副作用和全局数据等问题。

6.React组件之间如何通信？

react组件之间可以通过props、context、事件总线等方式进行通信。

1. Props：父组件可以通过props向子组件传递数据和方法，子组件可以通过props接收并使用这些数据和方法。

2. Context：Context可以让我们在组件树中传递数据，而不需要手动地一层层地传递props。使用Context需要创建一个Context对象，然后通过Provider组件向下传递数据，子组件可以通过Consumer组件或useContext Hook来获取数据。

3. 事件总线：事件总线是一种发布-订阅模式，可以让不同组件之间进行通信。我们可以使用第三方库如EventEmitter3或自己实现一个事件总线。

7.说说你对受控组件和非受控组件的理解？应用场景？

由React控制的输入表单元素而改变其值的方式，称为受控组件。
比如，给表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件的state。

非受控组件
非受控组件指的是，表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值。
在非受控组件中，可以使用一个ref来从DOM获得表单值。

8.说说Connect组件的原理是什么？

Connect组件是一个高阶组件，它可以将Redux store中的state和action creator作为props传递给被包裹的组件。Connect组件通过订阅Redux store的变化，来更新被包裹组件的props，从而实现组件与Redux store的连接。Connect组件的原理是使用了React的Context和高阶组件的特性，通过Provider和Consumer组件将Redux store传递给被包裹组件，并使用Redux的subscribe方法订阅store的变化，从而更新被包裹组件的props。

9.说说react 中jsx语法糖的本质？

JSX语法糖是一种JavaScript语法扩展，它可以让我们在JavaScript代码中编写类似HTML的标记，从而更方便地描述UI组件的结构和样式。JSX语法糖本质上是一种语法糖，它会被转换为React.createElement函数调用，从而创建React元素。JSX语法糖的优点是可以提高代码的可读性和可维护性，缺点是需要学习一些新的语法和规则。

10.说说你对redux中间件的理解？常用的中间件有哪些？实现原理？

redux中间件是一种机制，它可以在Redux action被发起之后，到达reducer之前，对action进行拦截、处理和转换。中间件可以用于处理异步操作、日志记录、错误处理、路由跳转等场景。

常用的中间件包括thunk、saga、logger等。

其中，thunk中间件可以让我们在action creator中返回一个函数，从而处理异步操作；saga中间件可以让我们使用Generator函数来处理异步操作和复杂的业务逻辑；logger中间件可以让我们记录Redux action的日志，从而方便调试和排查问题。

中间件的实现原理是基于Redux的applyMiddleware函数和函数式编程的思想。applyMiddleware函数接收一个或多个中间件作为参数，返回一个enhancer函数，该函数接收createStore函数作为参数，返回一个增强版的createStore函数。增强版的createStore函数可以在dispatch action之前，对action进行拦截、处理和转换，然后再将处理后的action传递给下一个中间件或reducer。中间件的处理过程是通过函数柯里化和compose函数来实现的，这样可以让多个中间件按照顺序依次执行，并且让每个中间件只需要关注自己的逻辑，从而提高代码的可读性和可维护性。

11.说说AMD、CMD、commonJS模块化规范的区别？

AMD、CMD、commonJS都是JavaScript模块化规范，它们的主要区别在于模块定义和加载方式的不同。

1. AMD（Asynchronous Module Definition）规范是由RequireJS提出的，它采用异步方式加载模块，可以在页面加载时并行加载多个模块，从而提高页面加载速度。AMD规范的模块定义方式是通过define函数来定义，可以指定模块的依赖关系和导出内容。

2. CMD（Common Module Definition）规范是由SeaJS提出的，它采用同步方式加载模块，可以在需要时按需加载模块，从而提高页面响应速度。CMD规范的模块定义方式是通过define函数来定义，可以指定模块的依赖关系和导出内容。

3. CommonJS规范是由Node.js提出的，它采用同步方式加载模块，可以在服务器端使用。CommonJS规范的模块定义方式是通过module.exports和require函数来定义和加载模块，可以实现模块的复用和封装。

总的来说，AMD和CMD适用于浏览器端的模块化开发，CommonJS适用于服务器端的模块化开发。AMD和CMD的主要区别在于模块的加载方式，AMD采用异步方式加载模块，CMD采用同步方式加载模块。而CommonJS的模块定义和加载方式与AMD和CMD有所不同，它采用module.exports和require函数来定义和加载模块。

12.说说package.json中版本号的规则？

package.json中的版本号遵循语义化版本规范（Semantic Versioning），格式为“主版本号.次版本号.修订号”，例如“1.2.3”。其中，主版本号表示不兼容的API修改，次版本号表示向下兼容的功能性新增，修订号表示向下兼容的问题修复。在package.json中，版本号通常被定义在dependencies、devDependencies、peerDependencies等字段中，用于指定依赖包的版本范围。常用的版本范围包括：精确版本号、波浪号版本号、插入号版本号、X号版本号等。精确版本号表示精确匹配指定版本号，波浪号版本号表示匹配指定版本号及其兼容的更新版本，插入号版本号表示匹配指定版本号及其向下兼容的更新版本，X号版本号表示匹配指定版本号的主版本号和次版本号，忽略修订号。

13.说说React jsx转换成真实DOM的过程？

React 中的 JSX 语法是一种语法糖，在编译时会被转换成真实 DOM 元素。下面是 JSX 转换成真实 DOM 的过程：
编写 JSX 代码：在 React 中通过编写 JSX 代码来描述组件的结构和样式。
解析 JSX 代码：使用 Babel 等工具将 JSX 代码转换为 JavaScript 代码。
创建 React 元素：将解析后的 JS 代码转化为 React 元素，React 元素是一个 JavaScript 对象，包含了组件的类型、属性和子元素。
创建虚拟 DOM：React 使用虚拟 DOM 来描述真实 DOM，将 React 元素转化为虚拟 DOM，虚拟 DOM 是一个纯 JavaScript 对象。
更新虚拟 DOM：当组件的状态发生变化时，React 会更新虚拟 DOM。
比较虚拟 DOM：React 会将新的虚拟 DOM 和旧的虚拟 DOM 进行比较，找出需要更新的部分。
渲染真实 DOM：将需要更新的部分渲染到真实 DOM 上，更新页面的显示。
需要注意的是，React 会尽可能地将需要更新的部分合并在一起，然后一次性更新，从而提高页面渲染的性能。同时，React 还使用了一些优化策略，例如 shouldComponentUpdate 和 PureComponent 等，来尽可能地减少不必要的 DOM 操作，提高应用的性能。

React将JSX语法糖转换为React元素，React元素是一个JavaScript对象，包含了组件的类型、属性和子元素等信息。

例如，下面的JSX代码：
<div className="container">
  <h1>Hello, world!</h1>
</div>
会被转换为以下React元素：
{
  type: 'div',
  props: {
    className: 'container',
    children: {
      type: 'h1',
      props: {
        children: 'Hello, world!'
      }
    }
  }
}

然后，React将React元素转换为真实DOM节点，这个过程称为协调（Reconciliation）。协调的过程是通过比较新旧两个React元素的差异，然后更新真实DOM节点来实现的。协调的过程包括以下几个步骤：

1. 比较类型：如果新旧两个React元素的类型不同，那么需要销毁旧节点，创建新节点。

2. 比较属性：如果新旧两个React元素的属性不同，那么需要更新节点的属性。

3. 比较子元素：如果新旧两个React元素的子元素不同，那么需要递归地协调子元素。

4. 更新状态：如果组件的状态发生了改变，那么需要重新渲染组件，并协调新旧两个组件的差异。

5. 提交更新：最后，React将更新后的DOM节点提交到浏览器中，完成页面的渲染。

总的来说，React将JSX语法糖转换为React元素，然后通过协调的过程将React元素转换为真实DOM节点，从而实现页面的渲染。这个过程是自动化的，开发者只需要关注组件的逻辑和样式，而不需要手动操作DOM节点。

14.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

@reduxjs/toolkit是一个官方提供的Redux工具包，它可以帮助我们更方便地编写Redux代码，减少样板代码的重复，提高开发效率和代码质量。@reduxjs/toolkit提供了以下几个主要的API：

1. configureStore：用于创建Redux store，可以自动集成常用的中间件和开发工具，从而简化了store的创建和配置过程。

2. createSlice：用于创建Redux reducer和action creator，可以自动处理action的类型和payload，从而简化了reducer和action creator的编写和管理。

3. createAsyncThunk：用于创建异步的thunk action，可以自动处理异步操作的状态和结果，从而简化了异步操作的编写和管理。

4. createEntityAdapter：用于创建实体的adapter，可以自动处理实体的CRUD操作，从而简化了实体的管理和操作。

相比于传统的Redux开发方式，@reduxjs/toolkit可以减少样板代码的重复，提高开发效率和代码质量。同时，@reduxjs/toolkit还可以自动处理一些常见的Redux问题，如异步操作、实体管理等，从而让开发者更专注于业务逻辑的实现。与react-redux的区别在于，react-redux是一个与React集成的Redux库，它提供了Provider和connect等API，可以让我们更方便地在React应用中使用Redux。而@reduxjs/toolkit是一个Redux工具包，它提供了一些API，可以让我们更方便地编写Redux代码，减少样板代码的重复，提高开发效率和代码质量。两者的目的不同，但都可以让我们更好地使用Redux。

15.React render方法的原理，在什么时候会触发？

React的render方法是用于将React元素渲染为真实DOM节点的方法。当组件的props或state发生变化时，React会调用render方法重新渲染组件，并将新的React元素与旧的React元素进行比较，从而更新真实DOM节点。如果新旧两个React元素相同，那么React不会重新渲染组件，从而提高性能。render方法的触发时机包括：

1. 组件挂载时：当组件第一次被渲染到页面上时，React会调用render方法生成React元素，并将其转换为真实DOM节点。

2. 组件更新时：当组件的props或state发生变化时，React会调用render方法重新渲染组件，并将新的React元素与旧的React元素进行比较，从而更新真实DOM节点。

3. 强制更新时：当组件调用forceUpdate方法时，React会忽略shouldComponentUpdate方法的返回值，强制调用render方法重新渲染组件。

总的来说，React的render方法是用于将React元素渲染为真实DOM节点的方法，它会在组件挂载、更新和强制更新时被调用。通过比较新旧两个React元素的差异，React可以高效地更新页面，从而提高性能。

16.React性能优化的手段有哪些？

1. 使用PureComponent或shouldComponentUpdate方法来避免不必要的渲染。

2. 使用React.memo来缓存组件的渲染结果。

3. 使用key属性来优化列表渲染。

4. 使用useCallback和useMemo来缓存函数和计算结果。

5. 使用虚拟列表或分页加载来优化大数据量的渲染。

6. 使用React.lazy和Suspense来优化组件的懒加载。

7. 使用Webpack或Rollup等工具来优化代码的打包和压缩。

8. 使用CDN或缓存来优化静态资源的加载。

9. 使用SSR来优化首屏加载速度和SEO效果。

10. 使用性能分析工具来定位性能瓶颈并进行优化。

17.如何通过原生js实现一个节流函数和防抖函数

// 节流函数

function throttle(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        fn.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

// 防抖函数

function debounce(fn, delay) {
  let timer = null;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

18.说说你对koa中洋葱模型的理解

Koa中的洋葱模型是一种中间件处理机制，它可以让请求在经过多个中间件的处理后，最终返回响应结果。洋葱模型的处理过程类似于一个洋葱，请求从外层中间件开始，逐层向内传递，经过每个中间件的处理后，再逐层向外返回响应结果。洋葱模型的优点是可以将请求的处理过程拆分为多个独立的中间件，从而提高代码的可读性和可维护性。同时，洋葱模型还可以通过next函数来控制中间件的执行顺序和流程，从而实现更灵活的请求处理。

Koa中的洋葱模型由两个核心概念组成：中间件和上下文。中间件是一个函数，它接收两个参数：ctx和next。ctx是上下文对象，包含了请求和响应的相关信息，next是一个函数，用于调用下一个中间件。中间件的处理过程可以分为三个阶段：前置处理、核心处理和后置处理。前置处理和后置处理可以通过next函数来控制中间件的执行顺序和流程，核心处理则是中间件的主要逻辑。

Koa中的洋葱模型可以通过app.use方法来注册中间件，中间件的执行顺序和流程由next函数来控制。当请求进入Koa应用时，Koa会将请求和响应封装成上下文对象，并将其传递给第一个中间件。第一个中间件可以通过next函数来调用下一个中间件，从而实现请求的逐层处理。当最后一个中间件处理完请求后，Koa会将响应结果返回给客户端。

19.说说如何借助webpack来优化前端性能

Webpack是一个模块打包工具，它可以将多个模块打包成一个或多个文件，从而减少页面的请求次数和文件大小，提高页面的加载速度和性能。Webpack可以通过以下几种方式来优化前端性能：

1. 代码分割：Webpack可以将代码分割成多个小块，从而实现按需加载和并行加载，减少页面的加载时间和文件大小。

2. Tree Shaking：Webpack可以通过静态分析的方式，删除未使用的代码，从而减少文件大小和加载时间。

3. 按需加载：Webpack可以根据需要动态加载模块，从而减少页面的加载时间和文件大小。

4. 缓存优化：Webpack可以通过文件名哈希和chunk哈希等方式，实现文件的缓存和更新，从而减少页面的请求次数和文件大小。

5. 压缩优化：Webpack可以通过UglifyJS等工具，对代码进行压缩和混淆，从而减少文件大小和加载时间。

6. 图片优化：Webpack可以通过url-loader和image-webpack-loader等插件，对图片进行压缩和优化，从而减少文件大小和加载时间。

7. 代码分析：Webpack可以通过webpack-bundle-analyzer等工具，对打包后的文件进行分析和优化，从而提高打包效率和性能。

总的来说，Webpack是一个强大的模块打包工具，它可以通过代码分割、Tree Shaking、按需加载、缓存优化、压缩优化、图片优化和代码分析等方式，优化前端性能，提高页面的加载速度和性能。

20. 说说React中setState执行机制？

React中的setState方法是用于更新组件状态的方法，它可以接收一个对象或一个函数作为参数，用于更新组件的状态。当调用setState方法时，React会将新的状态合并到原有的状态中，并触发组件的重新渲染。setState方法的执行机制可以分为以下几个步骤：

1. 合并状态：当调用setState方法时，React会将新的状态合并到原有的状态中，从而生成一个新的状态对象。

2. 批量更新：当调用setState方法时，React会将更新操作添加到一个更新队列中，而不是立即更新组件状态。这是因为React希望将多个更新操作合并成一个更新操作，从而减少组件的重新渲染次数，提高性能。

3. 触发更新：当更新队列中的所有更新操作都执行完毕后，React会触发组件的重新渲染，并将新的状态传递给组件。

总的来说，React中的setState方法是用于更新组件状态的方法，它可以接收一个对象或一个函数作为参数，用于更新组件的状态。当调用setState方法时，React会将新的状态合并到原有的状态中，并将更新操作添加到一个更新队列中，而不是立即更新组件状态。当更新队列中的所有更新操作都执行完毕后，React会触发组件的重新渲染，并将新的状态传递给组件。这个过程是自动化的，开发者只需要关注状态的更新和组件的渲染，而不需要手动操作DOM节点。

21.说说react的事件机制

react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。
React的事件机制是基于合成事件（SyntheticEvent）的。合成事件是React封装的一种跨浏览器的事件系统，它将浏览器原生事件进行了封装和优化，提供了一些额外的功能和特性。

React的事件机制有以下几个特点：

1. 事件绑定采用驼峰式命名，如onClick、onKeyDown等。

2. 事件处理函数中的this指向组件实例。

3. 事件对象是合成事件对象，而不是浏览器原生事件对象。合成事件对象提供了一些额外的属性和方法，如stopPropagation、preventDefault等。

4. 事件处理函数中的事件对象是异步获取的，即事件处理函数执行时，事件对象可能已经被回收了。

5. 事件处理函数中的事件对象是可复用的，即在事件处理函数中保存事件对象的引用，可以在后续的代码中继续使用。

6. React采用事件委托的方式处理事件，即将事件绑定在组件的根元素上，通过事件冒泡机制来处理子元素的事件。

总的来说，React的事件机制是非常灵活和高效的，可以方便地处理各种事件，并且提供了一些额外的功能和特性，使得开发者可以更加方便地处理事件

我们都知道react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。

22.说说你对fiber架构的理解？解决了什么问题？

是什么？

Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认，React Fiber 在React 16 版本发布

在react中，主要做了以下的操作：

为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务

增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行

dom diff树变成了链表，一个dom对应两个fiber（一个链表），对应两个队列，这都是为找到被中断的任务，重新执行

从架构角度来看，Fiber 是对 React核心算法（即调和过程）的重写

从编码角度来看，Fiber是 React内部所定义的一种数据结构，它是 Fiber树结构的节点单位，也就是 React 16 新架构下的虚拟DOM

一个 fiber就是一个 JavaScript对象，包含了元素的信息、该元素的更新操作队列、类型

如何解决？

Fiber把渲染更新过程拆分成多个子任务，每次只做一小部分，做完看是否还有剩余时间，如果有继续下一个任务；如果没有，挂起当前任务，将时间控制权交给主线程，等主线程不忙的时候在继续执行

即可以中断与恢复，恢复后也可以复用之前的中间状态，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber节点

实现的上述方式的是requestIdleCallback方法

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应

首先 React 中任务切割为多个步骤，分批完成。在完成一部分任务之后，将控制权交回给浏览器，让浏览器有时间再进行页面的渲染。等浏览器忙完之后有剩余时间，再继续之前 React 未完成的任务，是一种合作式调度。

该实现过程是基于 Fiber节点实现，作为静态的数据结构来说，每个 Fiber 节点对应一个 React element，保存了该组件的类型（函数组件/类组件/原生组件等等）、对应的 DOM 节点等信息。

作为动态的工作单元来说，每个 Fiber 节点保存了本次更新中该组件改变的状态、要执行的工作。

23.什么是强缓存和协商缓存

强缓存是根据返回头中的 Expires 或者 Cache-Control 两个字段来控制的，都是表示资源的缓存有效时间。

协商缓存：
协商缓存是由服务器来确定缓存资源是否可用。 主要涉及到两对属性字段，都是成对出现的，即第一次请求的响应头带上某个字, Last-Modified 或者 Etag，则后续请求则会带上对应的请求字段 If-Modified-Since或者 If-None-Match，若响应头没有 Last-Modified 或者 Etag 字段，则请求头也不会有对应的字段。

24.如何使用css实现一个三角形 transparent

.采用的是均分原理
盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分
首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

25.说说webpack中常见的loader？解决了什么问题

用于对模块的源代码进行转换，在 import 或"加载"模块时预处理文件

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中

在webpack内部中，任何文件都是模块，不仅仅只是js文件

默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js文件打包

像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析
当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则

• 关于配置loader的方式有三种：

配置方式（推荐）：在 webpack.config.js文件中指定 loader

内联方式：在每个 import 语句中显式指定 loader

CLI 方式：在 shell 命令中指定它们

• 常见的loader如下：

style-loader: 将css添加到DOM的内联样式标签style里

css-loader :允许将css文件通过require的方式引入，并返回css代码

less-loader: 处理less

sass-loader: 处理sass

postcss-loader: 用postcss来处理CSS

autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss

file-loader: 分发文件到output目录并返回相对路径

url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url

html-minify-loader: 压缩HTML

babel-loader :用babel来转换ES6文件到ES

26.Vue中自定义指令的理解，应用场景有哪些

在vue中提供了一套为数据驱动视图更为方便的操作，这些操作就是vue中自定义的指令

我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令

注册一个自定义指令有全局注册与局部注册

全局注册注册主要是用过Vue.directive方法进行注册

Vue.directive第一个参数是指令的名字（不需要写上v-前缀），第二个参数可以是对象数据，也可以是一个指令函数

局部注册通过在组件options选项中设置directive属性

• 应用场景：

防抖

图片懒加载

一键 Copy的功能

27.大文件如何做断点续传

点续传是一种文件传输技术，可以在文件传输过程中断开连接后自动恢复传输。对于大文件的传输，断点续传技术可以提高传输的可靠性和效率。下面是一些实现断点续传的方法：
HTTP Range 请求
HTTP Range 请求是一种用于请求部分数据的 HTTP 请求，可以用于实现断点续传。在 HTTP Range 请求中，客户端可以指定请求数据的范围，服务器只返回指定范围内的数据。通过多次发送 HTTP Range 请求，可以实现大文件的断点续传。
文件分片
文件分片是一种将大文件分成多个小文件的方法，每个小文件可以独立传输。通过将大文件分成多个小文件，可以实现断点续传和多线程传输，从而提高传输的效率和可靠性。
断点续传协议
断点续传协议是一种专门用于文件传输的协议，例如 BitTorrent 协议。在断点续传协议中，文件被分成多个小块，每个小块可以独立传输，从而实现断点续传和多线程传输。
总之，实现断点续传需要根据具体情况选择合适的方法和技术，例如 HTTP Range 请求、文件分片和断点续传协议等。在实际开发中，需要考虑文件传输的可靠性、效率和安全性等因素，从而选择合适的断点续传方案。

28.原生js如何实现上拉加载下拉刷新

下拉刷新

首先，在页面顶部添加一个下拉刷新的区域，然后监听touchstart、touchmove和touchend等事件。当用户在下拉刷新区域内进行下拉操作时，触发touchmove事件，并判断下拉的距离是否超过一定阈值。如果超过阈值，则触发下拉刷新操作，更新数据并重新渲染页面。

上拉加载

上拉加载的实现方式与下拉刷新类似，也是通过监听滚动事件，并判断滚动到底部时触发相应的操作。

29.说说设备像素、css像素、设备独立像素、dpr、ppi之间的区别

设备像素（Device Pixel）
设备像素是显示器或者移动设备屏幕上最小的物理像素点，也称为物理像素（Physical Pixel）。设备像素的大小是固定的，它们的数量决定了显示器或移动设备屏幕的分辨率。例如，一个 1920x1080 的显示器就有 1920x1080 个设备像素。
CSS 像素（CSS Pixel）
CSS 像素是浏览器中用于渲染页面的基本单位，也称为逻辑像素（Logical Pixel）。CSS 像素的大小是可变的，它们的数量由 CSS 样式表中的像素大小来决定。例如，使用一个 100 像素的 CSS 尺寸，就会在屏幕上显示出 100 个 CSS 像素。
设备独立像素（Device Independent Pixel）
设备独立像素是一个抽象的单位，它与设备的分辨率和大小无关，用于在不同分辨率和大小的设备上显示相同大小的内容。设备独立像素的大小是固定的，通常被定义为 1/96 英寸，也称为点（Point）或密度无关像素（Device Independent Pixel）。在 iOS 设备上，设备独立像素也被称为逻辑像素（Logical Pixel）。
设备像素比（Device Pixel Ratio，DPR）
设备像素比是设备像素和设备独立像素之间的比率，用于描述屏幕分辨率和屏幕大小之间的关系。例如，一个设备像素比为 2 的屏幕，表示每个设备独立像素由 2 个设备像素组成，即每个设备独立像素的大小是 2x2 个设备像素。
像素密度（Pixels Per Inch，PPI）
像素密度是显示器或移动设备屏幕上每英寸显示的像素数量，也称为屏幕密度（Screen Density）。像素密度越高，屏幕显示的内容就越清晰和细腻。在移动设备上，像素密度通常使用 PPI 来描述，而在打印机上通常使用 DPI（Dots Per Inch）来描述。
总之，设备像素、CSS 像素、设备独立像素、设备像素比和像素密度之间存在着一定的区别和联系，了解它们之间的关系可以帮助我们更好地理解屏幕分辨率和显示效果等概念。

30.谈谈你对BFC的理解

BFC是Box Formatting Context的缩写，中文翻译为“块级格式化上下文”。BFC是一种在网页布局中非常重要的概念，它是一个独立的渲染区域，其中元素按照一定的规则进行布局和渲染。
BFC具有以下特性：
BFC中的元素垂直方向上互相影响，即同属于一个BFC的元素在垂直方向上会按照一定规则进行布局，避免相互影响。
BFC中的元素不会超过其容器的边界，即BFC中的元素不会溢出其容器的边界，而是会自动调整其大小和位置。
BFC中的元素可以清除浮动，即BFC中的元素可以包含浮动元素，从而避免由于浮动元素导致的布局问题。
BFC中的元素可以防止margin重叠，即在BFC中，相邻的两个元素的margin不会重叠，从而避免布局上的混乱。
总之，BFC是一种强大的布局工具，它能够帮助我们解决许多常见的布局问题，提高网页布局的可靠性和可维护性。

31.说说TCP为什么需要三次握手和四次握手

TCP需要进行三次握手来建立连接，主要是为了保证数据传输的可靠性和安全性。具体原因如下：
防止已失效的连接请求报文段重复发送造成服务端的错误处理。
防止客户端发送的连接请求报文段在网络中长时间滞留，等待服务端响应，从而浪费网络资源。
防止服务端发送的连接应答报文段在网络中长时间滞留，导致客户端无法及时确认连接状态。
确认双方的接收能力和发送能力正常，确保连接的可靠性和稳定性。
TCP需要进行四次握手来关闭连接，主要是为了确保数据传输的完整性和可靠性。具体原因如下：
防止已失效的数据报文段在连接关闭后重复传输。
确保客户端和服务端都接收到了对方的关闭请求。
确认双方的接收能力和发送能力正常，确保连接的可靠性和稳定性。
防止服务端重复发送数据，导致客户端接收到重复数据。

32.react新出来两个钩子函数是什么？和删掉的will系列有什么区别

react新增的生命钩子

getDerivedStateFromProps：
这个钩子的作用是从props中获取衍生的state

getSnapshotBeforeUpdate：
这个钩子的意思是在组件更新前获取快照，此方法一般结合componentDidUpdate使用，getSnapshotBeforeUpdate中返回的值将作为第三参数传递给componentDidUpdate

react废弃了哪些钩子？为什么？

react一共四个will将来时的钩子，除了componentWillUnmout没有被废弃

componentWillMount、componentWillReceiveProps、componentWillUpdate这三个钩子均被废弃。

说废弃也不是现在直接不能用了，在react 17版本中如果我们用了上述写法，官方会给出警告并推荐我们在这三个钩子前添加UNSAFE_前缀，比如UNSAFE_componentWillMount，且官方强调预计在后续版本可能只支持UNSAFE_前缀写法。

那为什么要废弃这三个呢？？？？？

react中生命周期钩子虽然多，但事实上常用的就那么几个，比如新版废弃的钩子中可能除了componentWillReceiveProps常用一点外，另外两个使用率并不太高。按照官方的说法，这三个钩子很容易被误解和滥用，而且在未来react打算提供异步渲染能力，那么这几个钩子的不稳定很可能被放大，从而带来不可预测的bug。

33.最少说出三种前端清除浮动的方法

使用空元素清除浮动：在浮动元素后面添加一个空的标签，设置clear属性为both，从而清除浮动。

使用overflow属性清除浮动：将浮动元素的父容器设置overflow属性为auto或hidden，从而清除浮动。

使用伪元素清除浮动：在浮动元素后面添加一个伪元素，设置clear属性为both，从而清除浮动。

34.说说你对git rebase 和git merge的理解？区别

git rebase和git merge都是git中用于合并分支的命令，但它们的实现方式和效果有所不同。
git merge是一种常见的合并分支的方法，它将两个分支的历史记录合并成一个新的提交。合并后的提交包含了两个分支的所有更改，形成一个新的分支。git merge会产生一个新的提交历史，包含了两个分支的所有更改，这种提交历史的结构比较简单，但可能会出现分支冲突。
git rebase是一种修改分支历史记录的方法，它将待合并分支的提交逐个应用到目标分支上，形成一个新的提交历史。在这个过程中，git rebase会把待合并分支的所有提交都“移动”到目标分支的最新提交之后，然后再将两个分支合并。这种提交历史的结构比较线性，不会出现分支冲突，但可能会出现提交冲突。
因此，git rebase比git merge更加适合用于处理分支提交历史较为复杂的情况，例如多人协作开发的场景。但是，由于git rebase会修改分支历史记录，因此在多人协作开发时需要注意，避免对他人的提交产生影响。

35.在使用redux过程中，如何防止定义的action-type的常量重复？

在Redux中，定义Action-Type的常量是一种良好的编程习惯，可以提高代码的可读性和可维护性。为了防止定义的Action-Type常量重复，可以使用一些工具来帮助自动生成唯一的常量，例如使用uuid或者shortid等库。

36.调和阶段setState干了什么

React中的调和阶段是指React将组件的变化与DOM的变化匹配的过程，其中setState方法是触发组件重新渲染的重要方式。
调和阶段中，setState方法会触发组件重新渲染，并将更新后的state与之前的state合并得到新的state。然后React会比较新的state和之前的state的差异，通过一系列优化算法，计算出需要更新的DOM节点。
在计算出需要更新的DOM节点后，React会将这些节点标记为“脏节点”，然后进行批量更新，即将所有需要更新的节点一次性更新，而不是每个节点分别更新。这样可以提高性能，减少不必要的DOM操作，避免页面的闪烁。
在批量更新结束后，React会将所有需要更新的节点一次性更新到页面上，完成整个组件渲染的过程。
需要注意的是，setState方法是异步的，这意味着在调用setState方法后并不会立即更新state和DOM，而是将更新任务添加到更新队列中，等待下一次调和阶段时才会执行更新。如果需要在setState更新后立即获取最新的state或DOM，可以使用回调函数或在componentDidUpdate生命周期函数中进行操作。

37.props和state相同点和不同点？render方法在哪些情况下会执行

相同点：

都是用于管理组件的数据和状态。
都可以触发组件的重新渲染。
都是React组件的内部状态，外部无法直接访问和修改。

不同点：

数据来源不同：props通常是由父组件传递给子组件的，而state通常是组件内部自己维护的。
可修改性不同：props是只读的，不能在组件内部直接修改，而state是可读写的，可以在组件内部修改。
更新方式不同：props的更新通常是由父组件触发的，而state的更新通常是由组件自身触发的。
render方法在哪些情况下会执行？

组件第一次挂载时会执行render方法。
组件的props或state发生变化时会执行render方法。
父组件重新渲染时，子组件也会重新渲染，因此render方法也会执行。
强制更新组件时，render方法也会执行。
总之，render方法是React组件中非常重要的一个方法，它用于根据当前组件的props和state生成对应的UI。在组件的生命周期中，render方法会在多个时机被执行，以保证组件的渲染和更新。

38.React的props.children使用map函数来遍历会收到异常显示，为什么？应该如何遍历

在React中，使用map函数来遍历props.children时，可能会收到异常显示。这是因为props.children不一定是数组类型，有可能是字符串、数字、布尔值、null或undefined等非数组类型，如果尝试对非数组类型使用map函数来遍历，就会出现异常。
为了遍历props.children，可以使用React.Children.map函数来遍历。React.Children.map函数可以遍历props.children，并对每个子元素执行指定的回调函数。该函数的语法如下：
React.Children.map(children, function[(thisArg)])
其中，children是要遍历的子元素，function是要执行的回调函数，thisArg是可选的回调函数中的this对象。

39.谈谈你对immutable.js的理解

总之，Immutable.js是一个非常有价值的JavaScript库，它提供了一组不可变数据结构和操作方法，可以用于管理和操作不可变的数据，避免因可变数据引起的问题，同时也可以方便地进行数据缓存、函数式编程等操作。但是，由于Immutable.js的学习曲线较陡峭，开发者在使用时需要花费一些时间去理解和掌握。
Immutable.js的主要应用场景包括：

React应用：由于React中推崇不可变数据的概念，因此Immutable.js可以作为React应用的数据管理工具，避免因可变数据引起的问题。
数据缓存：由于Immutable.js中的数据结构是不可变的，因此可以方便地进行数据缓存，避免重复计算和数据传递。
函数式编程：由于Immutable.js中的操作方法都是纯函数，因此可以方便地进行函数式编程和函数组合。

40.redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的实现原理是什么

Redux本来是同步的，但是在实际应用中，经常需要处理异步数据流，例如网络请求、定时器等，因此Redux提供了一些方便的方式来处理异步数据流，例如使用中间件、使用异步Action等。

实现原理：

使用中间件：Redux中间件是一个函数，它可以对Redux的dispatch方法进行增强，从而实现一些额外的功能，例如异步操作、打印日志、错误处理等。使用中间件可以方便地处理异步操作，例如使用thunk中间件来处理异步Action。
使用异步Action：Redux中的Action本质上是一个JavaScript对象，它描述了应用中发生的事件，例如用户点击按钮、网络请求返回等。但是，Redux并没有限制Action必须是同步的，因此可以使用异步Action来处理异步数据流。异步Action可以返回一个函数，该函数可以在内部执行异步操作，然后再通过dispatch方法来触发真正的Action。

中间件的实现原理：

中间件是一个函数，它接收Redux Store的dispatch方法和getState方法作为参数，并返回一个函数，该函数可以接收一个next参数，表示下一个中间件或者Redux Store的dispatch方法。中间件的实现原理如下：
中间件函数接收dispatch和getState方法作为参数，返回一个函数。
返回的函数接收next参数，表示下一个中间件或者Redux Store的dispatch方法。
返回的函数内部定义一个新的dispatch方法，它可以在原始的dispatch方法前后执行一些额外的逻辑，例如打印日志、处理错误等。
返回的函数最终返回next(action)或者dispatch(action)，表示将action传递给下一个中间件或者Redux Store的dispatch方法。

总之，Redux提供了一些方便的方式来处理异步数据流，例如使用中间件、使用异步Action等。中间件是实现这些功能的关键，它可以对Redux的dispatch方法进行增强，从而实现一些额外的功能，例如异步操作、打印日志、错误处理等。

41.redux中同步action与异步action最大的区别是什么

Redux中同步Action和异步Action最大的区别是：同步Action是一个简单的JavaScript对象，用于描述应用中发生的同步事件，而异步Action是一个函数，它可以执行异步操作，例如网络请求、定时器等，并返回一个Promise对象或者另一个函数来描述异步操作的结果。

具体来说，同步Action和异步Action的区别主要体现在以下几个方面：

数据结构：同步Action是一个简单的JavaScript对象，它包含一个type字段和一些payload数据，用于描述应用中发生的同步事件；异步Action是一个函数，它可以执行异步操作，并返回一个Promise对象或者另一个函数，用于描述异步操作的结果。
执行时机：同步Action是在dispatch方法调用时直接执行的，而异步Action是在dispatch方法调用后异步执行的，例如网络请求、定时器等。
数据流处理：同步Action直接将payload数据传递给Reducer函数，用于更新Store中的状态；异步Action需要先执行异步操作，然后在异步操作完成后再将payload数据传递给Reducer函数，用于更新Store中的状态。
处理方式：同步Action通常是直接在Reducer函数中处理的，而异步Action通常需要使用中间件来处理，例如使用redux-thunk中间件来处理异步Action。

总之，同步Action和异步Action在Redux中具有不同的作用和处理方式。同步Action用于描述应用中发生的同步事件，而异步Action用于执行异步操作，并在操作完成后更新应用的状态。开发者在使用Redux时，需要根据不同的场景选择使用同步Action或异步Action，以便更好地管理和控制数据流。

42.redux-saga和redux-thunk的区别与使用场景

redux-saga和redux-thunk都是Redux中常用的中间件，用于处理异步操作和副作用。它们的区别和使用场景主要包括以下几点：

工作原理

redux-thunk是Redux官方提供的中间件，它通过在action中使用函数来处理异步操作。当dispatch一个函数类型的action时，redux-thunk会将这个函数执行，并将dispatch和getState作为参数传递给这个函数，从而实现异步操作。
redux-saga是一个基于Generator函数的中间件，它通过在saga文件中编写Generator函数来处理异步操作。saga文件包含了一系列的Generator函数，每个Generator函数可以监听一个或多个action，并在监听到相应的action时执行相应的操作。

处理异步操作的能力

redux-thunk只能处理简单的异步操作，例如发送AJAX请求等。当异步操作比较复杂时，redux-thunk的代码可能会变得非常冗长。
redux-saga具有更强大的异步操作处理能力，它可以处理复杂的异步操作，例如异步的流程控制、错误处理、取消操作等。使用redux-saga可以将异步操作的逻辑与组件的逻辑分离开来，使代码更加清晰易于维护。

使用场景

redux-thunk适用于处理简单的异步操作，例如发送AJAX请求、获取数据等。当异步操作比较复杂时，redux-thunk的代码可能会变得非常冗长，不易于维护。
redux-saga适用于处理复杂的异步操作，例如流程控制、错误处理、取消操作等。使用redux-saga可以将异步操作的逻辑与组件的逻辑分离开来，使代码更加清晰易于维护。

总的来说，redux-thunk和redux-saga都是Redux中常用的中间件，用于处理异步操作和副作用。它们的区别在于工作原理、处理异步操作的能力和使用场景。使用redux-thunk适合处理简单的异步操作，而使用redux-saga适合处理复杂的异步操作。

43.CDN的特点及意义

CDN（Content Delivery Network）即内容分发网络，是一种通过在全球范围内部署节点服务器来加速内容传输的技术。CDN的特点和意义主要包括以下几点：
高速访问
CDN可以将网站的静态资源如图片、音视频、JavaScript和CSS等文件缓存在全球各地的节点服务器上，当用户请求访问这些资源时，可以就近从最优的缓存服务器上获取，从而实现更快的访问速度。
提高网站稳定性
CDN可以将网站的访问流量分散到不同的缓存服务器上，从而分散了网站的访问压力。当某个节点服务器因故障或访问量过大时，CDN可以自动切换到其他可用的节点服务器上，从而提高网站的稳定性。
节省带宽成本
CDN可以将网站的内容缓存在全球各地的节点服务器上，当用户请求访问这些资源时，可以就近从最优的缓存服务器上获取，从而减少了网站的带宽消耗，节省了带宽成本。
提高用户体验
CDN可以提高网站的访问速度和稳定性，从而提高用户的访问体验，降低了用户的等待时间，增加了用户的满意度。

总的来说，CDN的特点和意义在于通过在全球范围内部署节点服务器来加速内容传输，提高网站的访问速度和稳定性，节省带宽成本，提高用户体验，从而实现更好的网站性能和更高的用户满意度。

44.为什么for循环比forEach性能高

作用域链

在JavaScript中，每个函数都有一个作用域链，当访问变量时，JavaScript引擎会沿着作用域链逐层查找，直到找到该变量为止。而forEach方法中的回调函数是一个闭包，会在每次循环迭代中创建一个新的作用域，从而影响性能。

函数调用

forEach方法中的回调函数会对每个元素都执行一次，这意味着会进行多次函数调用。而for循环中的代码只需要在循环内部执行一次，从而减少了函数调用的次数，提高了性能。

长度计算

在forEach方法中，需要通过数组的length属性来计算需要迭代的次数。而在for循环中，可以通过将数组的length属性存储在一个变量中来避免重复计算，从而提高性能。

综上所述，for循环比forEach性能高的原因主要是因为for循环避免了闭包、函数调用和重复计算长度等问题。但是，在使用for循环时，需要注意避免出现死循环和无限循环的情况，以避免造成性能问题。

45.谈谈你是如何做移动端适配的

移动端适配是Web开发中非常重要的一环，因为不同的移动设备具有不同的屏幕尺寸、分辨率和像素密度，如果不进行适配，页面可能会出现布局错乱、字体过小、图片模糊等问题。在移动端适配中，我通常采用以下几种方法：

使用Viewport：Viewport是一种显示网页内容的区域，它的大小可以随着设备的屏幕尺寸和方向而变化。在移动端适配中，可以通过设置Viewport的meta标签来控制页面的缩放比例，例如：

这样可以让页面自适应设备的屏幕尺寸，并保持页面的比例不变。

使用媒体查询：媒体查询是CSS3中的一个功能，它可以根据设备的屏幕尺寸和方向来动态改变页面的样式，例如：

@media screen and (max-width: 768px) { /* 在屏幕宽度小于等于768px时应用的样式 */ }
这样可以针对不同的设备尺寸和方向设置不同的样式，从而实现移动端适配。

使用rem布局：rem是相对于根元素（即html元素）的字体大小来计算的单位，它的大小不会受到设备像素密度的影响。在移动端适配中，可以将根元素的字体大小设置为设备宽度的一定比例，例如：

html { font-size: calc(100vw / 7.5); /* 以7.5rem为基准 */ }
这样可以根据设备的屏幕宽度来动态调整字体大小和布局，从而实现移动端适配。

总之，移动端适配是Web开发中非常重要的一环，可以通过使用Viewport、媒体查询和rem布局等方法来实现适配。开发者在使用这些方法时，需要充分了解不同设备的特点和适配方法，以便更好地实现移动端适配。

46.移动端1像素的解决方案

在移动端开发中，1像素的问题是一个比较普遍的问题，可以通过使用CSS3的scale属性、伪元素和viewport单位等方法来解决。开发者在使用这些方法时，需要考虑不同设备的像素密度和适配方法，以便更好地实现1像素效果。

移动端1像素问题是指在高清屏幕下，1像素的边框或线条在显示时会变得模糊或变粗。为了解决这个问题，可以使用以下两种方案：

1. 使用CSS3的scale缩放属性，将元素放大一倍，再缩小一倍，这样1像素就会变成0.5像素，从而达到清晰的效果。

核心代码：

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
    .border-1px {
        position: relative;
    }
    .border-1px::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border: 1px solid #ddd;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
    }
}

2. 使用viewport的meta标签设置缩放比例，将1像素的边框或线条放大到2像素，然后再通过CSS缩小到1像素，从而达到清晰的效果。

核心代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
    .border-1px {
        border: 1px solid #ddd;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        -webkit-transform-origin: top;
        transform-origin: top;
    }
</style>

47.弹性盒中的缩放机制是怎样的

弹性盒提供了一种强大的缩放机制，可以根据容器的大小和子元素的大小进行缩放和分配。在弹性盒中，可以通过设置flex属性、min-width和max-width属性、对齐方式等来控制项目的大小和对齐方式。

48.说说redux的实现原理是什么，写出核心代码

Redux 的实现原理可以分为三个部分：store、action 和 reducer。
Store：Store 是应用程序中存储状态的地方。它是一个 JavaScript 对象，包含所有应用程序状态的唯一来源。Redux 中的 Store 可以通过 createStore 方法创建。
Action：Action 是一个普通的 JavaScript 对象，用于描述发生了什么事件。它包含一个 type 属性和一些其他数据，用于更新应用程序状态。在 Redux 中，Action 可以通过 createAction 方法创建。
Reducer：Reducer 是一个纯函数，它接收当前状态和 Action 作为参数，并返回新的状态。它描述了如何处理 Action 并更新应用程序状态。在 Redux 中，Reducer 可以通过 createReducer 方法创建。

// createStore 方法用于创建 Store
function createStore(reducer, initialState) {
  let state = initialState;
  let listeners = [];

  function getState() {
    return state;
  }

  function subscribe(listener) {
    listeners.push(listener);
    return function unsubscribe() {
      const index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };
  }

  function dispatch(action) {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
    return action;
  }

  dispatch({ type: '@@redux/INIT' });

  return {
    getState,
    subscribe,
    dispatch,
  };
}

// createAction 方法用于创建 Action
function createAction(type, payload) {
  return { type, payload };
}

// createReducer 方法用于创建 Reducer
function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action);
    } else {
      return state;
    }
  };
}

48.为什么react元素有一个$$type属性

React元素有一个$$type属性，这是React内部用来标识组件类型的属性，它与type属性不同。
元素的type属性是一个字符串，用于表示元素的类型，可以是原生DOM元素的标签名，也可以是自定义组件的类型，例如“div”、“span”MyComponent”等。
而$$type属性是React内部用来区分不同类型组件的属性，它是一个内部属性，用户通常不需要使用它。$$type属性的值是一个Symbol类型的值，它可以确保在不同的JavaScript环境中具有唯一性。React使用‘$$type`属性来进行组件类型比较和优化，例如在shouldComponentUpdate生命周期方法中，React会比较新旧组件的$$type属性，来确定是否需要进行更新操作。在一些高级应用场景下，用户也可以使用$$type属性来自定义组件的类型，以实现更高级的功能。
需要注意的是，由于$$type属性是React内部使用的属性，用户不应该直接使用它来判断组件类型或进行其他操作，而应该使用React提供的API来进行操作。

49.说说你对事件循环event loop的理解

事件循环（Event Loop）是JavaScript运行时（runtime）中的一种执行模型，用于处理异步任务和事件回调。JavaScript是单线程语言，只能在一个事件循环中执行一个任务，所以事件循环的机制非常重要。
事件循环的流程如下：
JavaScript引擎首先从执行栈中取出当前要执行的任务，执行该任务。
如果当前任务中包含异步任务（如setTimeout、setInterval、Promise等），则将这些任务挂起，并注册对应的回调函数，然后继续执行后续的任务。
当异步任务完成时，将该任务对应的回调函数放入任务队列（Task Queue）中。
当执行栈中所有的任务都执行完毕后，JavaScript引擎会检查任务队列是否有任务，如果有，则将队列中的第一个任务取出，并放入执行栈中执行。
重复上述步骤，不断循环执行，直到任务队列为空或程序被终止。
需要注意的是，任务队列分为宏任务（Macrotask）和微任务（Microtask）两种类型。宏任务包括所有的异步任务、定时器任务和事件回调任务等，而微任务则包括Promise的resolve、reject、finally等回调函数。
在事件循环中，微任务具有高优先级，会优先于宏任务执行。也就是说，当执行栈中的任务执行完毕后，JavaScript引擎会先执行所有的微任务，然后再执行宏任务。这种机制保证了JavaScript代码的执行顺序和可靠性，避免了异步任务执行的不确定性。

50.前端跨域的解决方案

jsonp

jsonp的原理就是利用了script标签不受浏览器同源策略的限制，然后和后端一起配合来解决跨域问题的。
具体的实现就是在客户端创建一个script标签，然后把请求后端的接口拼接一个回调函数名称作为参数传给后端，并且赋值给script标签的src属性，然后把script标签添加到body中，当后端接收到客户端的请求时，会解析得到回调函数名称，然后把数据和回调函数名称拼接成函数调用的形式返回，客户端解析后会调用定义好的回调函数，然后在回调函数中就可以获取到后端返回的数据了。

cors

cors是跨域资源共享，是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。服务端设置了Access-Control-Allow-Origin就开启了CORS，所以这种方式只要后端实现了CORS，就解决跨域问题，前端不需要配置。

搭建Node代理服务器解决跨域

因为同源策略是浏览器限制的，所以服务端请求服务器是不受浏览器同源策略的限制的，因此我们可以搭建一个自己的node服务器来代理访问服务器。
大概的流程就是：我们在客户端请求自己的node代理服务器，然后在node代理服务器中转发客户端的请求访问服务器，服务器处理请求后给代理服务器响应数据，然后在代理服务器中把服务器响应的数据再返回给客户端。客户端和自己搭建的代理服务器之间也存在跨域问题，所以需要在代理服务器中设置CORS。

Nginx反向代理解决跨域

nginx通过反向代理解决跨域也是利用了服务器请求服务器不受浏览器同源策略的限制实现的。

postMessage方式解决跨域

window.postMessage() 方法可以安全地实现跨源通信，此方法一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

主要的用途是实现多窗口，多文档之间通信：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的 iframe 消息传递

Websocket方式解决跨域

使用Websocket也可以解决跨域问题，因为WebSocket本身不存在跨域问题，所以我们可以利用webSocket来进行非同源之间的通信，
WebSocket 规范定义了一个在 Web 浏览器和服务器之间建立“套接字”连接的 API。 简单来说：客户端和服务器之间存在持久连接，双方可以随时开始发送数据。

51.数组常用方法及作用，至少15个

JavaScript中数组是一种非常常用的数据结构，提供了丰富的方法来操作和处理数组元素。以下是15个常用的数组方法及其作用：
push()：向数组末尾添加一个或多个元素，并返回新的数组长度。
pop()：从数组末尾移除并返回一个元素。
unshift()：向数组开头添加一个或多个元素，并返回新的数组长度。
shift()：从数组开头移除并返回一个元素。
slice()：返回一个数组的一部分，不会改变原数组。
splice()：向或从数组中添加或移除元素，会改变原数组。
concat()：将两个或多个数组合并成一个新数组，不会改变原数组。
join()：将数组中的所有元素转换为字符串，并连接在一起。
reverse()：将数组中的元素顺序颠倒，会改变原数组。
sort()：将数组中的元素按照指定的顺序排序，会改变原数组。
indexOf()：返回数组中某个元素的索引，如果不存在则返回-1。
lastIndexOf()：返回数组中某个元素最后出现的位置的索引，如果不存在则返回-1。
map()：对数组中的每个元素进行操作，并返回一个新的数组。
filter()：从数组中筛选出符合条件的元素，并返回一个新的数组。
reduce()：将数组中的元素累加或合并成一个值，并返回该值。
需要注意的是，数组的方法有些会改变原数组，有些则会返回新的数组或其他值，使用时需要根据实际情况选择适合的方法。

52. 说说你对vue中mixin的理解

在Vue中，Mixin是一种混入模式，用于组件之间的代码复用和逻辑抽象。Mixin可以定义一些可复用的选项、组件、方法等，然后将其混入到组件中使用，以实现代码的复用和共享。
具体来说，Mixin的作用如下：
实现代码复用：Mixin可以将多个组件中的相同代码抽象成一个Mixin，然后将Mixin混入到这些组件中，以实现代码的复用和共享。
提高代码可维护性：Mixin可以将组件中的公共逻辑抽象出来，使得组件的代码更加简洁、清晰，提高了代码的可维护性。
功能扩展：Mixin可以通过添加新的选项、组件、方法等，扩展组件的功能。

53.for…in循环和for…of循环的区别

for…in循环和for…of循环都是用于遍历数组或对象的语句，但它们的作用和用法有所不同。

在使用上，for…in循环需要使用对象的属性名作为循环变量，而for…of循环需要使用对象的元素值作为循环变量。此外，for…in循环可以遍历对象的原型链上的属性，而for…of循环只能遍历对象的自身属性。
总的来说，for…in循环和for…of循环的作用和用法有所不同，需要根据实际情况选择适合的循环语句。如果需要遍历对象的属性，应该使用for…in循环；如果需要遍历数组或其他可迭代对象的元素，应该使用for…of循环。

54.Js数据类型判断都有哪几种方式？至少说出5种？它们的区别是什么

JavaScript中判断数据类型的方式有很多种，以下是5种常用的方式：
typeof：用于判断基本数据类型（如number、string、boolean、undefined）和函数类型，不能判断复杂数据类型（如Object、Array、null等）。
instanceof：用于判断对象是否为某个类的实例，不能判断基本数据类型和函数类型。
Object.prototype.toString.call()：用于判断数据类型，可以判断基本数据类型、函数类型和复杂数据类型。
Array.isArray()：用于判断是否为数组类型。
===：用于值和类型的比较，可以判断基本数据类型和null/undefined，不能判断复杂数据类型。

它们的区别如下：
typeof只能判断基本数据类型和函数类型，不能判断复杂数据类型。
instanceof只能判断对象是否为某个类的实例，不能判断基本数据类型和函数类型。
Object.prototype.toString.call()可以判断基本数据类型、函数类型和复杂数据类型，但需要使用较为繁琐的写法。
Array.isArray()只能判断是否为数组类型。
===可以判断基本数据类型和null/undefined，但不能判断复杂数据类型。
综上所述，不同的数据类型判断方式各有优缺点，需要根据实际情况选择适合的判断方法。在实际开发中，通常会结合多种判断方式来判断数据类型，以保证判断的准确性和兼容性。

55.说说你对Object.defineProperty()的理解

Object.defineProperty() 是 JavaScript 提供的一个方法，用来定义对象属性。该方法可以定义一个对象的新属性，或者修改一个对象的现有属性，以及设置属性的特性（也称为属性描述符）。
Object.defineProperty() 方法接受三个参数：要定义属性的对象、要定义或修改的属性的名称、以及描述符对象。描述符对象包含属性的特性，如可写性、可枚举性、可配置性、以及属性的值等。

56.从浏览器地址栏输入url到显示页面的步骤

从浏览器地址栏输入URL到显示页面的过程可以分为以下几个步骤：
DNS解析
当用户在浏览器中输入URL后，浏览器首先会检查本地缓存中是否存在该域名的DNS解析结果。如果本地缓存中不存在，则会向本地DNS服务器发起请求，获取域名的IP地址。
建立TCP连接
在获取到域名的IP地址后，浏览器会根据该IP地址和端口号向服务器发起TCP连接请求。在建立TCP连接时，会进行三次握手，确认双方可以进行通信。
发送HTTP请求
在建立TCP连接后，浏览器会向服务器发送HTTP请求。在发送HTTP请求时，会包含请求头、请求方法、请求参数等信息。
服务器处理请求并返回响应
服务器在接收到HTTP请求后，会根据请求的信息进行处理，并返回响应结果。在返回响应时，会包含响应头、响应状态码、响应体等信息。
浏览器解析和渲染页面
在接收到服务器返回的响应结果后，浏览器会进行页面解析和渲染。在页面解析和渲染时，会根据HTML、CSS、JavaScript等内容来构建页面并显示。
关闭TCP连接
在页面显示完成后，浏览器会关闭TCP连接，释放资源。
需要注意的是，以上步骤并非一成不变，可能会因不同的网络环境、浏览器类型和服务器配置等因素而略有不同。但总体来说，以上步骤反映了从浏览器地址栏输入URL到显示页面的大致过程。

57.介绍一下你对浏览器内核的理解

浏览器内核是指浏览器所采用的渲染引擎和JavaScript解释器，它们共同组成了浏览器的核心部分，负责解析和渲染网页内容，实现网页的布局、样式和交互等功能。

Webkit内核：主要用于Safari、Chrome等浏览器，是一种基于C 的开源渲染引擎，它支持HTML、CSS、JavaScript等各种Web技术。
Gecko内核：主要用于Firefox等浏览器，是一种基于C 的开源渲染引擎，它支持HTML、CSS、JavaScript等各种Web技术。
Trident内核：主要用于IE浏览器，是一种基于C 的闭源渲染引擎，它支持HTML、CSS等Web技术，但对JavaScript的支持较弱。
Blink内核：主要用于Chrome等浏览器，是一种基于C 的开源渲染引擎，它是Webkit的分支，支持HTML、CSS、JavaScript等各种Web技术。

浏览器内核的作用是将网页的HTML、CSS、JavaScript等代码解析成可视化的网页，实现网页的布局、样式和交互等功能。不同的浏览器内核有着不同的特点和优缺点，开发者在开发网站时需要考虑不同内核的兼容性问题，以确保网站在各种浏览器中都能够正常访问。

58.如果需要手动写动画，你认为最小时间间隔是多久，为什么

如果需要手动写动画，最小时间间隔应该是16.67毫秒，即每秒60帧。这是因为：
人眼的视觉暂留效应：人眼的视觉暂留效应是指，如果两个画面之间的时间间隔小于16.67毫秒，人眼就会将它们视为连续的画面，而不是两个独立的画面。因此，如果时间间隔小于16.67毫秒，就无法保证动画的流畅性和连续性。
浏览器渲染机制：浏览器渲染机制是基于帧的，每个帧的时间间隔是16.67毫秒。如果时间间隔小于16.67毫秒，浏览器也无法保证正常的渲染和动画效果。
因此，最小时间间隔应该是16.67毫秒，这样可以保证动画的流畅性和连续性，同时也符合人眼视觉暂留效应和浏览器渲染机制的要求。当然，对于一些高帧率的动画，可以适当降低时间间隔，但是需要根据具体情况进行调整和优化。

59.SPA（单页应用）首屏加载速度慢怎么解决

SPA（Single Page Application）是一种基于 AJAX 和 HTML5 技术的应用程序，通常只有一个页面，通过动态加载数据和页面来实现用户交互。由于 SPA 只需要加载一次页面，因此可以提高用户的体验和性能。但是，SPA 的首屏加载速度慢是一个普遍存在的问题，下面是一些解决方案：
代码优化：可以通过压缩、合并、懒加载等优化技术来减小代码的体积，从而提高加载速度。
图片优化：优化图片大小、格式、质量等参数，可以减少图片加载时间，从而提高页面的加载速度。
缓存静态资源：使用缓存技术来缓存静态资源，例如使用 HTTP 缓存、浏览器缓存、CDN 缓存等技术，可以减少网络请求和加载时间。
服务器端渲染（SSR）：使用服务器端渲染技术可以在服务器端生成 HTML 页面，从而提高首屏加载速度。
骨架屏（Skeleton Screen）：在页面加载时，先显示一个简单的骨架屏，然后再加载真实内容，从而提高用户的体验。
使用第三方库或框架：使用一些优秀的第三方库或框架，例如 React、Vue、Angular 等，可以提高开发效率和性能。
总之，针对 SPA 首屏加载速度慢的问题，需要综合运用上述的优化技术和解决方案，才能够提高页面的加载速度和用户体验。

60.bind、call、apply 区别？如何实现一个bind

bind
bind方法会创建一个新的函数，并将这个函数的执行上下文绑定到指定的对象上。bind方法返回的是一个函数对象，需要手动调用才会执行。

call
call方法会立即执行函数，并将函数的执行上下文绑定到指定的对象上。call方法可以接受多个参数，第一个参数是要绑定的对象，后面的参数是函数的参数。

apply
apply方法与call方法类似，也是立即执行函数，并将函数的执行上下文绑定到指定的对象上。不同的是，apply方法的第二个参数是一个数组，数组中的元素是函数的参数。

如何实现一个bind？

可以通过原型链来实现一个bind方法，其实现原理如下：
创建一个新函数，将要绑定的函数作为新函数的原型。
返回新函数。
调用新函数时，将新函数的执行上下文绑定到指定的对象上。

61.VUE路由的原理

Vue路由是通过Vue Router实现的，它是Vue.js官方提供的一种路由管理方式。
Vue Router的原理是通过监听URL的变化来实现页面的切换。当URL发生变化时，Vue Router会根据URL匹配到对应的路由，然后渲染相应的组件。
具体来说，Vue Router的实现原理包括以下几个方面：
路由配置：Vue Router需要在应用程序中配置路由，包括路由的路径和对应的组件。
路由匹配：当URL发生变化时，Vue Router会根据路由配置进行匹配，找到与当前URL匹配的路由。
组件渲染：当找到匹配的路由时，Vue Router会根据路由配置中指定的组件来渲染页面。
导航守卫：Vue Router支持通过导航守卫来控制路由的跳转，可以在路由跳转前、路由跳转后、路由更新前等不同阶段进行拦截和处理。
在实际开发中，可以使用Vue Router来实现单页面应用程序（SPA），通过路由的切换来实现页面之间的跳转和刷新。Vue Router还提供了丰富的API和扩展功能，可以满足不同的开发需求。

62.说说你对keep-alive的理解

keep-alive是Vue.js内置的一个抽象组件，用于缓存路由组件或其他组件的状态。通过使用keep-alive组件，可以将组件状态缓存到内存中，避免组件的反复创建和销毁，从而提高应用程序的性能。
具体来说，keep-alive组件可以缓存有状态的组件，例如包含表单数据、滚动位置等状态的组件。当这些组件被缓存后，下次再次使用时，就可以直接从内存中读取组件的状态，而不需要重新创建和初始化组件。
在使用keep-alive组件时，需要注意以下几点：
keep-alive组件是一个抽象组件，不能直接使用，需要使用其内置的include和exclude属性来指定需要缓存的组件。
缓存的组件会被包裹在一个标签中，并且需要设置一个唯一的key属性来标识缓存的组件。
当缓存的组件被激活时，会触发activated生命周期钩子函数；当缓存的组件被停用时，会触发deactivated生命周期钩子函数。
使用keep-alive组件时，需要注意缓存的组件状态可能会影响应用程序的性能和内存占用，需要根据实际情况进行优化和控制。
在实际开发中，可以使用keep-alive组件来提高应用程序的性能和用户体验，避免因组件的反复创建和销毁而导致应用程序的卡顿和加载时间的延长。

63.什么是响应式设计？响应式设计的基本原理是什么？如何做

响应式设计（Responsive Design）是一种设计理念，旨在通过灵活的网页设计，使网页在各种设备上呈现出最佳的用户体验。响应式设计的基本原理是使用 CSS3 媒体查询技术，根据设备的视口大小和方向等特性，自适应地调整网页的布局、字体、图片和其他元素，使其在不同的设备上呈现出最佳的效果。
响应式设计的优点如下：
提高用户体验：响应式设计可以让网页在不同的设备上呈现出最佳的效果，从而提高用户的满意度和体验。
节省开发成本：响应式设计可以减少开发成本，因为只需要开发一个网页即可兼容不同的设备。
提高 SEO：响应式设计可以提高网站的搜索引擎排名，因为搜索引擎更倾向于优先展示响应式网站的搜索结果。
响应式设计的实现方法如下：
使用 CSS3 媒体查询：根据设备的屏幕大小、分辨率、方向等特征，使用 CSS3 媒体查询技术来调整网页的布局和样式。
使用流式布局：使用百分比和 em 等相对单位来布局网页，从而使网页在不同的设备上具有相同的比例。
图片优化：使用响应式图片来适应不同设备的分辨率，或者使用图片压缩等技术来减小网页的加载时间。
使用视口（viewport）：使用视口来控制网页的缩放比例和布局，从而使网页在不同的设备上呈现出最佳的效果。
总之，响应式设计是一种非常重要的设计理念，可以提高网页的兼容性、性能和用户体验。在实际开发中，需要根据具体情况灵活运用响应式设计的方法和技术，为用户提供更好的体验。

64.说说react router有几种模式？实现原理

React Router 是一个基于 React 的路由库，用于实现单页应用程序（SPA）中的路由功能。React Router 有三种路由模式：HashRouter、BrowserRouter 和 MemoryRouter。
HashRouter
HashRouter 使用 URL 的 hash 值来作为路由信息，例如：http://example.com/#/path/to/page。HashRouter 的实现原理是监听 URL 的 hash 值变化，然后根据 hash 值来匹配对应的路由信息，从而加载相应的组件。
BrowserRouter
BrowserRouter 使用 HTML5 History API 来管理路由信息，例如：http://example.com/path/to/page。BrowserRouter 的实现原理是使用 History API 来监听 URL 的变化，然后根据 URL 来匹配对应的路由信息，从而加载相应的组件。BrowserRouter 需要后端服务器的支持，因为它需要在服务器上配置一些规则，以便在用户请求时正确地返回页面。
MemoryRouter
MemoryRouter 是一种不需要使用 URL 来管理路由信息的路由模式，它使用内存中的数据来管理路由信息，因此不会影响 URL 的变化。MemoryRouter 的实现原理是使用内存中的数据来匹配路由信息，然后根据路由信息来加载相应的组件。
不同的路由模式适用于不同的场景，例如：如果需要支持浏览器前进后退功能，可以使用 BrowserRouter；如果不需要改变 URL，可以使用 MemoryRouter；如果需要在旧浏览器中支持路由功能，可以使用 HashRouter。
React Router 的实现原理是通过监听 URL 变化，然后根据 URL 匹配对应的路由信息，从而加载相应的组件。React Router 使用一些核心组件，例如 Route、Switch、Link、Redirect 等，来实现路由功能。在使用 React Router 时，需要先定义路由信息，然后将路由信息与组件进行关联，最后通过 Link 组件来实现页面的跳转。

65.说JavaScript中的数据类型？存储上的差别

JavaScript 中有七种基本数据类型和一种复杂数据类型，具体如下：
基本数据类型：
Number：表示数字，包括整数和浮点数。
String：表示字符串，使用单引号、双引号或反引号来表示。
Boolean：表示布尔值，只有 true 和 false 两个取值。
Null：表示空值，只有一个取值 null。
Undefined：表示未定义值，只有一个取值 undefined。
Symbol：表示唯一的标识符，用于对象的属性名。
BigInt：表示任意精度的整数，用于处理大整数。
复杂数据类型：
Object：表示对象，是一种无序的键值对集合。

在存储上，JavaScript 中的基本数据类型和复杂数据类型有所不同：
基本数据类型的值被存储在栈内存中，它们的值被直接存储在变量所在的内存空间中。
复杂数据类型的值被存储在堆内存中，变量存储的是一个指向堆内存地址的指针。当变量复制时，复制的是指针，而不是实际的值。
需要注意的是，在 JavaScript 中，基本数据类型是按值传递的，而复杂数据类型是按引用传递的。当将基本数据类型的值传递给函数时，传递的是实际的值；而当将复杂数据类型的值传递给函数时，传递的是指向堆内存地址的指针。

总之，JavaScript 中的数据类型包括七种基本数据类型和一种复杂数据类型，它们在存储上有所不同，需要根据实际情况选择适当的数据类型和存储方式。

66.说说Real DOM和Virtual DOM的区别？优缺点？

Real DOM（真实DOM）和Virtual DOM（虚拟DOM）是两种不同的DOM处理方案。
Real DOM是指浏览器中真实的DOM树，由浏览器引擎解析HTML文档生成的，每次更新都会重新生成整个DOM树，再与旧的DOM树进行比较，找出差异，最后才进行渲染。这种处理方式比较消耗性能，因为每次更新都要重新生成整个DOM树，渲染也需要较多的时间，这样会导致页面加载速度变慢。
Virtual DOM是一种轻量级的、存在于内存中的虚拟DOM树，由框架或库通过JS对象模拟真实的DOM，每次更新只需要比较新旧虚拟DOM树的差异，然后只对差异进行操作，最后再将差异渲染到真实的DOM树上。这种处理方式可以减少比较和渲染的次数，提高页面的加载速度和性能。
Virtual DOM的优点包括：
提高页面性能，减少DOM操作次数
提高开发效率，可以通过JS对象来操作DOM，而不需要直接操作真实的DOM
跨平台，可以在不同的平台上运行，如浏览器、移动端等
Virtual DOM的缺点包括：
需要额外的内存开销，因为需要在内存中维护一个虚拟DOM树
初次渲染需要较多的时间，因为需要将虚拟DOM树转换为真实的DOM树
可能会导致一些性能问题，因为虚拟DOM的比较算法可能会比真实DOM的操作更复杂
综上所述，Virtual DOM和Real DOM各有优缺点，具体使用哪种方式取决于应用场景和个人偏好。

67.说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

React组件生命周期分为三个阶段：Mounting、Updating和Unmounting。下面分别介绍每个阶段对应的方法和功能。
Mounting（挂载阶段）：组件第一次被创建和插入到DOM中。在这个阶段中，组件可以访问props和state，并可以在组件中进行一些初始化操作。Mounting阶段包括以下方法：
constructor：组件构造函数，在组件创建时调用，用于初始化组件的状态和属性。
getDerivedStateFromProps：在组件创建时和更新时都会被调用，用于根据新的props计算state的值，返回一个新的state对象。
render：用于渲染组件的UI，这是Mounting阶段最重要的方法。
componentDidMount：在组件挂载后立即调用，常用于进行异步数据请求或DOM操作等副作用操作。
Updating（更新阶段）：组件在接收到新的props或state时被重新渲染。在这个阶段中，组件可以根据新的props或state进行重新渲染，并可以执行一些副作用操作。Updating阶段包括以下方法：
getDerivedStateFromProps：在组件创建时和更新时都会被调用，用于根据新的props计算state的值，返回一个新的state对象。
shouldComponentUpdate：在组件即将更新前被调用，用于判断组件是否需要重新渲染。默认情况下，组件每次更新都会重新渲染，但可以通过该方法实现性能优化。
render：用于渲染组件的UI。
getSnapshotBeforeUpdate：在组件更新前被调用，用于获取当前DOM状态，返回一个值作为componentDidUpdate的第三个参数。
componentDidUpdate：在组件更新后被调用，常用于执行一些更新后的操作。
Unmounting（卸载阶段）：组件从DOM中被移除。在这个阶段中，组件可以进行一些清理操作，如清除定时器、取消订阅等。Unmounting阶段包括以下方法：
componentWillUnmount：在组件卸载前被调用，用于清理组件的副作用操作，如定时器、订阅等。
React还提供了一些其他的生命周期方法，如错误处理相关的生命周期方法和新的生命周期方法（如getDerivedStateFromError、getSnapshotBeforeUpdate等），这些方法都有特定的用途，可以根据需要进行使用。

68.说说React中setState和replaceState的区别？

在React中，setState和replaceState都是用于更新组件状态的方法，它们的区别在于更新状态的方式和效果。
setState的作用是将新的状态合并到原有的状态中，仅更新需要改变的状态属性，同时保留原有的状态。setState方法接受一个对象或函数作为参数，对象中包含需要更新的状态属性和对应的值，函数的返回值也是一个状态对象。setState方法会在更新状态后重新渲染组件。
replaceState的作用是用新的状态替换原有的状态，新的状态会完全覆盖原有的状态。replaceState方法接受一个对象作为参数，对象中包含所有需要更新的状态属性和对应的值。replaceState方法会在更新状态后重新渲染组件。
因此，setState和replaceState的区别可以总结为：
setState是将新状态合并到原有状态中，而replaceState是用新状态替换原有状态。
setState会保留原有状态，只更新需要改变的状态属性，而replaceState会完全覆盖原有状态。
setState接受一个对象或函数作为参数，而replaceState只接受一个对象作为参数。
在React中，建议使用setState方法来更新组件状态。因为它不会完全替换原有状态，可以避免一些状态丢失的问题。同时，使用函数作为参数可以避免状态更新时的竞态问题。replaceState已经被标记为过时的方法，不建议使用。

69.说说react的事件机制？

React的事件机制是基于合成事件（SyntheticEvent）的。合成事件是React封装的一种事件对象，它是对浏览器原生事件的封装，提供了跨浏览器的一致性，同时也有更好的性能和可靠性。

React的事件机制包括以下几个方面：

事件注册：React使用类似HTML的方式来注册事件，通过在组件的JSX中添加事件属性（如onClick、onKeyDown等）来注册事件。
事件处理：当组件的事件被触发时，React会封装一个合成事件对象，通过调用事件处理函数并传递合成事件对象来处理事件。
事件冒泡：React的合成事件对象与浏览器原生事件对象类似，支持事件冒泡和阻止冒泡的机制。
事件委托：React的事件机制也支持事件委托，即将事件处理函数注册在父组件上，然后通过事件冒泡来处理子组件的事件。
需要注意的是，React的合成事件机制与浏览器原生事件机制有所不同，例如合成事件对象是不可变的，无法进行异步操作，也不能使用stopPropagation方法来阻止事件冒泡等。因此，在使用React的事件机制时，需要注意这些差异，并根据实际情况选择合适的事件处理方式。

70.说说react diff的原理是什么？

React diff是React框架中用于比较前后两个虚拟DOM树的算法，它的原理是通过对比新旧虚拟DOM树的结构，找出需要更新的部分并进行最小化的更新，从而实现高效的更新UI。
React diff算法的具体流程如下：
首先比较两个根节点，如果节点类型不同，则直接替换整个节点及其子节点。
如果节点类型相同，则比较节点的属性，如果属性不同，则更新该节点的属性。
如果节点类型和属性都相同，则比较节点的子节点。
对于子节点，React diff算法采用了三种策略：
a. 如果子节点数量不同，则直接替换整个子节点列表。
b. 如果子节点类型不同，则直接替换该子节点及其子节点。
c. 如果子节点类型相同，则递归地对比子节点。
在比较子节点时，React diff算法会采用一些优化措施，例如给每个子节点添加唯一的key属性，以方便React diff算法进行快速查找和比较，从而减少不必要的更新。
总之，React diff算法通过对比虚拟DOM树的结构和属性，以及采用一些优化策略，实现了高效的更新UI，从而提高了React应用的性能和用户体验。

71.说说javascript内存泄漏的几种情况？

JavaScript内存泄漏是指不再使用的内存没有被及时释放，导致内存占用过高，最终导致程序运行缓慢或崩溃。常见的几种情况如下：
全局变量：在全局作用域中声明的变量没有及时释放，导致占用内存过高。解决方法是使用let或const关键字声明变量，避免变量污染全局作用域。
闭包：在函数内部使用闭包时，如果没有及时释放引用，会导致内存泄漏。解决方法是在函数执行完毕后，手动解除引用，或使用let关键字声明变量。
定时器：在使用setTimeout或setInterval等定时器时，如果没有及时清除定时器，会导致内存泄漏。解决方法是在定时器执行完毕后，手动清除定时器。
DOM元素：在使用document.createElement等DOM操作时，如果没有及时清除DOM元素，会导致内存泄漏。解决方法是在不需要使用DOM元素时，手动清除DOM元素。
循环引用：在对象之间存在循环引用时，如果没有及时解除引用，会导致内存泄漏。解决方法是使用WeakMap等内置对象来避免循环引用。
总之，要避免JavaScript内存泄漏，需要注意内存管理和垃圾回收机制，及时释放不再使用的内存，避免占用过高的内存空间。

72.说说React生命周期中有哪些坑？如何避免？

React生命周期中常见的坑包括以下几点：
不正确地使用shouldComponentUpdate：shouldComponentUpdate返回false时，React将不会重新渲染组件。但是，当不正确地使用shouldComponentUpdate时，可能会导致组件不更新或不渲染。应该确保在shouldComponentUpdate中正确地比较props和state，以便在必要时返回true。
不正确地使用componentDidUpdate：componentDidUpdate在组件更新后调用。但是，在不正确地使用它时，可能会导致无限循环或其他问题。应该确保在componentDidUpdate中添加一个条件，以避免无限循环。
不恰当地使用componentDidMount：componentDidMount在组件挂载后调用，但是在使用它时，可能会导致渲染延迟或其他问题。例如，如果在componentDidMount中进行异步操作，可能会导致组件迟迟不渲染。应该确保在componentDidMount中使用异步操作时，使用取消操作或其他技术来确保组件正确渲染。
为了避免这些坑，可以采取以下措施：
理解和正确使用React生命周期方法。
在shouldComponentUpdate和componentDidUpdate中添加正确的条件。
避免在componentDidMount中进行耗时的异步操作，如果必须使用，应该使用取消操作或其他技术来确保组件正确渲染

73.React合成事件的原理？

React合成事件是React中处理原生DOM事件的一种方式，它是基于浏览器的事件模型封装的一层抽象，提供了一种跨浏览器的事件处理机制。
React合成事件的原理如下：
React在顶层上注册了事件处理程序，处理所有的事件，并且在事件处理程序中处理了所有的异常，防止事件的异常中断了整个应用程序的运行。
当浏览器触发一个事件时，React会在事件池中创建一个合成事件对象，并将原生事件封装到合成事件对象中。
合成事件对象中包含了原生事件对象的所有信息，例如事件类型、目标元素、鼠标位置、按键状态等。
React会将合成事件对象传递给事件处理程序，而不是直接将原生事件对象传递给事件处理程序。
在事件处理程序中，可以通过访问合成事件对象来获取事件的信息，而不需要关心浏览器的差异性。
React使用事件委托的方式来处理事件，即将事件绑定在顶层元素上，然后通过事件冒泡机制在组件树中传递，这样可以减少绑定事件的数量，提高性能。
总的来说，React合成事件的原理是通过封装原生事件对象来提供一种跨浏览器的事件处理机制，并使用事件委托的方式来处理事件，提高性能。

74.说说你对webSocket的理解？

WebSocket是一种基于TCP协议的全双工通信协议，可以在客户端和服务器之间建立实时的双向数据通信。与HTTP协议不同的是，WebSocket协议不需要像HTTP一样每次都建立新的连接，而是可以在客户端和服务器之间建立一次连接，然后保持连接状态，实现实时数据的双向传输。
WebSocket的特点包括以下几点：
双向通信：WebSocket可以实现实时的双向数据通信，客户端和服务器可以随时发送和接收数据。
长连接：WebSocket建立连接后可以保持连接状态，避免了HTTP协议中每次请求都需要建立新的连接的缺点。
实时性：WebSocket可以实时地传输数据，能够满足实时性要求的应用场景。
轻量级：WebSocket协议是一种轻量级的通信协议，数据传输的开销相对较小，对服务器的负载也较小。
WebSocket的应用场景比较广泛，例如在线聊天、实时游戏、股票行情等需要实时通信的应用。在实际开发中，可以使用WebSocket技术来实现这些应用的实时通信功能，提高用户体验和应用的实用性。

75.什么是垂直外边距合并？说说合并后的几种情况？

垂直外边距合并是指当两个盒子垂直方向上发生重叠时，它们之间的垂直外边距会合并成一个较大的外边距，而不是简单地相加。
在垂直方向上，当两个盒子相邻时，它们之间的垂直外边距会发生合并。合并后的结果取两者之间的最大值作为新的外边距。
具体来说，垂直外边距合并会有以下几种情况：
相邻兄弟元素之间的垂直外边距会合并。这种情况下，合并后的外边距取两者之间的最大值。
父元素和第一个子元素之间的垂直外边距会合并。这种情况下，合并后的外边距取两者之间的最大值。
空元素的上下边距会合并。这种情况下，合并后的外边距为这个空元素的上下边距的值。
需要注意的是，在CSS中，有一些属性可以影响垂直外边距的合并情况，例如设置了边框、内边距、高度、最小高度、浮动、绝对定位以及display为inline-block的元素等，都可以避免垂直外边距的合并。

76.useEffect的依赖为引用类型如何处理？

在React中，useEffect的依赖项是一个数组，用于指定哪些状态变量发生变化时会触发useEffect中的回调函数。当依赖项是引用类型时，需要注意以下几点：
不要直接修改引用类型。因为直接修改引用类型，即使值没有发生变化，也会被视为发生了变化。正确的做法是使用不可变性的方式来更新引用类型，例如使用扩展运算符或concat方法来创建新的数组或对象。
如果引用类型的值会发生变化，可以使用useState等Hook来创建新的引用类型来触发useEffect的回调函数。例如，可以使用useState来创建一个标记变量，当引用类型的值发生变化时，修改标记变量的值来触发useEffect的回调函数。
如果引用类型的值是不可变的，可以使用JSON.stringify方法将其转换为字符串，然后将字符串作为依赖项。这样可以确保只有值发生变化时才会触发useEffect的回调函数。但需要注意，这种方法对于大型数据结构或频繁发生变化的数据结构可能会影响性能。
综上所述，处理引用类型的依赖项需要注意避免直接修改引用类型，使用不可变性的方式更新引用类型，并选择合适的依赖项来触发useEffect的回调函数。

77.知道react里面的createPortal么，说说其使用场景？

createPortal是React提供的一个API，用于将组件渲染到指定的DOM节点上。在React中，组件的渲染通常是从父组件逐级传递到子组件，最终渲染到DOM树上。而使用createPortal可以实现跨组件层级渲染，将组件渲染到DOM树上的某个指定节点上，而不是从父组件逐级传递到子组件。
createPortal的使用场景比较广泛，常见的如：
模态框：将模态框组件渲染到body节点上，避免被其他组件的样式影响。
悬浮组件：将悬浮组件渲染到特定的节点上，如固定在页面右下角的悬浮按钮。
通知组件：将通知组件渲染到特定的节点上，如右上角的消息提示框。
画布组件：将画布组件渲染到特定的节点上，如游戏画布或音视频播放器。
总之，createPortal的使用场景主要是在需要跨组件层级渲染组件时使用，能够提高组件的灵活性和可复用性。

78.Provider和connect的底层原理实现，写出其核心代码？

Provider和connect是React-Redux中的两个核心API，用于实现状态管理和组件的连接。其底层原理基于React的context机制，实现了全局状态的传递和组件的订阅更新。

Provider的核心代码如下

class Provider extends Component {
  getChildContext() {
    return { store: this.props.store };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: PropTypes.object.isRequired
};

Provider组件通过getChildContext方法将store传递到子组件的context中，从而实现全局状态的传递。同时，Provider要求其子组件必须声明contextTypes，以便获取store。

connect的核心代码如下

function connect(mapStateToProps, mapDispatchToProps) {
  return function(WrappedComponent) {
    return class extends Component {
      static contextTypes = {
        store: PropTypes.object.isRequired
      };
      constructor(props, context) {
        super(props, context);
        this.state = mapStateToProps(context.store.getState(), props);
      }
      componentDidMount() {
        this.unsubscribe = context.store.subscribe(() => {
          this.setState(mapStateToProps(context.store.getState(), this.props));
        });
      }
      componentWillUnmount() {
        this.unsubscribe();
      }
      render() {
        return (
          <WrappedComponent
            {...this.props}
            {...mapStateToProps(context.store.getState(), this.props)}
            {...mapDispatchToProps(context.store.dispatch, this.props)}
          />
        );
      }
    }
  }
}

connect函数返回一个高阶组件，用于将组件连接到store中。它通过订阅store的更新，获取最新的state并更新组件的props，从而实现组件的订阅更新。同时，connect通过mapStateToProps和mapDispatchToProps将store的state和dispatch映射到组件的props中，方便组件使用。
总之，Provider和connect是React-Redux中的两个核心API，其底层原理基于React的context机制和组件的订阅更新实现了全局状态的传递和组件的连接

79.你了解vue的diff算法吗？说说看？

Vue 的 diff 算法是用来比较新旧 VNode 之间的差异，从而更新真实 DOM 的。Vue 的 diff 算法是基于 Snabbdom 库实现的，具体过程如下：
首先对比新旧 VNode 的标签名，如果不同则直接替换。
如果标签名相同，则对比新旧 VNode 的属性列表，分别判断属性是否相同，如果不同则更新属性。
接着对比新旧 VNode 的子节点，分以下几种情况处理：
新旧 VNode 都没有子节点，则直接返回。
新 VNode 没有子节点，旧 VNode 有子节点，则移除旧 VNode 的子节点。
新 VNode 有子节点，旧 VNode 没有子节点，则添加新 VNode 的子节点。
新旧 VNode 都有子节点，则对比子节点，使用双指针的方式进行比较。在比较过程中，为了尽可能地复用已有的 DOM，Vue 采用了一些优化策略，例如设置 key 值、移动节点等。
通过以上的过程，Vue 的 diff 算法可以在最小的代价下更新真实 DOM，提高了页面的渲染性能和用户体验。同时，Vue 还提供了一些优化策略，例如异步更新、nextTick、keep-alive 等，可以进一步提高页面的性能和可维护性。

80.如何优化webpack打包速度？

Webpack是一款强大的模块打包工具，但在处理大型项目时，由于需要处理大量的文件和依赖关系，可能会导致打包速度变慢。以下是几种优化Webpack打包速度的方法：
使用DllPlugin和DllReferencePlugin
DllPlugin和DllReferencePlugin是Webpack内置的插件，可以将第三方库和框架打包成单独的文件，并缓存起来。使用DllPlugin和DllReferencePlugin可以避免每次打包时都重新编译第三方库和框架，从而提高打包速度。
使用HappyPack
HappyPack是一个Webpack插件，可以将任务分解成多个子进程并行处理，从而提高打包速度。通过使用HappyPack，可以将Webpack的loader和插件的处理过程放在子进程中执行，从而避免Webpack的单线程限制。
使用Tree Shaking
Tree Shaking是Webpack 2.x版本及以上的一个新特性，它可以通过静态分析代码的引用关系来删除未引用的代码。通过使用Tree Shaking，可以避免将未使用的代码打包到最终的输出文件中，从而减小文件体积，提高打包速度。
使用Code Splitting
Code Splitting是Webpack的另一个优化打包速度的方法，它可以将代码分割成多个模块，按需加载。通过使用Code Splitting，可以将应用程序中的代码分割成多个小模块，从而提高文件的加载速度和执行效率。
合理使用缓存
缓存是提高Webpack打包速度的另一个重要因素。可以通过使用cache-loader和hard-source-webpack-plugin等插件来实现缓存。使用缓存可以避免每次重新编译和打包代码，从而提高打包速度。
需要注意的是，以上方法并非适用于所有的项目和场景，需要根据实际情况进行选择和使用。同时，还需要合理配置Webpack的loader和插件，避免不必要的文件解析和处理，从而提高打包速度。

81.说说对React Hooks的理解？解决了什么问题？

React Hooks是React 16.8版本引入的新特性，它可以让我们在不编写class组件的情况下，使用state和其他React特性。React Hooks的引入解决了以下几个问题：
解决了组件逻辑复用的问题
在React之前，组件逻辑的复用通常是通过高阶组件、render props等方式来实现。而使用Hooks后，可以将组件逻辑封装成自定义Hook，然后在多个组件中进行复用，从而避免了高阶组件和render props等方式带来的代码冗余和复杂性。
解决了类组件的问题
类组件在处理复杂逻辑时，往往需要使用生命周期方法和state等特性，而这些特性在使用时需要考虑作用域、绑定this等问题。而使用Hooks后，可以在函数组件中使用state、生命周期方法等特性，避免了类组件的一些问题。
解决了代码复杂度的问题
在React之前，组件的业务逻辑通常被拆分成多个生命周期方法和方法之间的调用，从而导致代码复杂度的增加。而使用Hooks后，可以将组件的逻辑拆分成多个自定义Hook，从而避免了组件之间的耦合和代码冗余。
总的来说，React Hooks的引入可以让我们更方便地编写React应用程序，提高代码的复用性和可维护性。同时，Hooks还可以提高代码的可测试性，从而让我们更容易地编写高质量的React代码。

82.说说你对promise的了解？

Promise 是一种用于异步编程的对象，它可以让异步操作更加方便和可读。Promise 通过链式调用的方式，将异步操作和回调函数分离开来，从而使代码更加清晰和易于维护。
Promise 对象有三种状态：Pending、Fulfilled 和 Rejected。当 Promise 对象处于 Pending 状态时，表示异步操作正在进行中，还没有得到结果；当 Promise 对象状态变为 Fulfilled 时，表示异步操作已经成功完成，可以获取到异步操作的结果；当 Promise 对象状态变为 Rejected 时，表示异步操作出现了错误或异常，无法得到异步操作的结果。
Promise 对象有两个重要的方法：then() 和 catch()。then() 方法用于处理异步操作成功后的结果，catch() 方法用于处理异步操作失败时的错误信息。then() 和 catch() 方法可以通过链式调用的方式进行调用，从而实现异步操作和回调函数的分离。
Promise 还有一些其他的方法，例如 all()、race() 和 finally() 等。其中 all() 方法用于处理多个异步操作的结果，race() 方法用于处理多个异步操作中最快完成的结果，finally() 方法用于在异步操作结束后执行一些清理工作。
总之，Promise 是一种非常重要的异步编程技术，可以使异步操作更加方便和可读。在实际开发中，需要根据实际情况灵活使用 Promise，从而提高代码的可维护性和性能。

83.Vue组件之间的通信方式都有哪些？

Vue组件之间的通信方式有以下几种：
1.Props/Events
Props是一种从父组件向子组件传递数据的方式，通过在子组件上设置props属性，可以实现数据的单向流动。而Events是一种从子组件向父组件传递数据的方式，通过在子组件上使用$emit方法触发事件，可以将数据传递给父组件。

2.$parent/$children Vue组件实例上提供了$parent和$children两个属性，可以分别访问父组件和子组件的实例。通过访问$parent和$children，可以实现跨级组件之间的通信。

3.$refs
$refs是Vue组件实例上提供的一个属性，可以用来访问子组件实例或DOM元素。通过使用$refs，可以在父组件中访问子组件的属性和方法。

4.EventBus
EventBus是一种基于事件的组件通信方式。通过在全局创建一个EventBus实例，可以在不同的组件中通过触发和监听事件来实现数据的传递和共享。

5.Vuex
Vuex是Vue.js官方提供的状态管理库，可以用来管理应用程序中的共享状态。通过使用Vuex，可以实现组件之间的数据共享和通信，从而避免了通过props和events等方式手动传递数据的繁琐和复杂性。
需要根据实际情况选择合适的组件通信方式，避免过度使用全局事件和状态共享等方式带来的性能和维护性问题。

6.使用$attrs和$listeners实现高阶组件传递数据
7.使用provide和inject实现祖先组件向后代组件传递数据

84.说说你对栈、队列的理解？应用场景？

栈和队列都是数据结构中的基础概念。

栈是一种线性数据结构，它按照后进先出（LIFO）的原则存储和访问数据。也就是说，最后插入的数据最先被取出。栈的应用场景很多，例如浏览器的前进和后退功能就可以用栈来实现。在前进时，将当前页面压入栈中，后退时则从栈中取出上一个页面。另外，函数调用栈也是栈的一种应用，每当一个函数被调用时，就将其压入栈中，函数执行完毕后再将其弹出。

队列是一种线性数据结构，它按照先进先出（FIFO）的原则存储和访问数据。也就是说，最先插入的数据最先被取出。队列的应用场景也很多，例如计算机操作系统中的任务调度就可以用队列来实现。每个任务都被放入队列中，然后按照一定的优先级和调度算法进行处理。另外，消息队列也是队列的一种应用，例如在分布式系统中，可以使用消息队列来进行异步通信，提高系统的性能和可靠性。
总之，栈和队列是两种非常基础和重要的数据结构，它们在计算机科学中具有广泛的应用场景。

85.什么是闭包，应用场景是什么？

闭包是指在函数内部创建一个新的作用域，并且该作用域可以访问函数外部的变量。简单来说，闭包就是函数和函数内部能访问到的变量的组合。

闭包的应用场景有很多，其中一些比较常见的包括：

封装变量：由于闭包可以访问函数外部的变量，因此可以使用闭包来封装私有变量，避免变量被外部访问和修改，从而保证程序的安全性和稳定性。
实现模块化：由于闭包可以创建独立的作用域，因此可以用闭包来实现模块化的开发方式，将变量和方法封装在一个闭包中，从而避免命名冲突和变量污染。
延迟执行：由于闭包可以访问函数外部的变量，因此可以用闭包来实现某些需要延迟执行的操作，例如setTimeout等。
缓存变量：由于闭包可以访问函数外部的变量，因此可以用闭包来缓存一些计算结果，避免重复计算，提高程序的性能。
实现回调函数：由于闭包可以访问函数外部的变量，因此可以用闭包来实现一些回调函数的功能，例如事件处理函数等。

总之，闭包是一种非常重要的JavaScript特性，它可以用于实现很多常见的编程需求，例如封装变量、实现模块化、实现回调函数等。但是，由于闭包会占用内存和资源，因此开发者在使用闭包时需要注意内存管理和性能优化。

86.说说你对useEffect的理解，可以模拟哪些生命周期？

useEffect是React的一个Hook，用于处理组件的副作用（如数据请求、DOM操作等）。它会在组件渲染完成后执行，可以模拟类组件中的componentDidMount、componentDidUpdate和componentWillUnmount生命周期函数。
useEffect的基本用法是接收两个参数，第一个参数是一个函数，该函数会在组件渲染完成后执行，第二个参数是一个数组，用于控制useEffect的执行时机。
当第二个参数为空数组时，useEffect只会在组件挂载和卸载时执行，模拟componentDidMount和componentWillUnmount生命周期函数。
当第二个参数包含依赖项时，useEffect会在组件挂载和依赖项发生变化时执行，模拟componentDidMount和componentDidUpdate生命周期函数。
当第二个参数为undefined时，useEffect会在组件挂载和每次更新时都执行，模拟componentDidMount和componentDidUpdate生命周期函数。
除了上述基本用法，useEffect还可以返回一个清除函数，用于清除副作用。在执行下一次useEffect之前，会先执行清除函数。这个功能模拟了componentWillUnmount生命周期函数，用于清除不需要的资源或事件监听。
总之，useEffect是React中非常重要的一个Hook，它可以帮助我们更好地处理组件的副作用，模拟类组件的生命周期函数，优化渲染性能。

87.说说react中onClick绑定后的工作原理？

React 中的 onClick 事件绑定是一种用于处理用户交互的常见方法。它的工作原理如下：
首先，在 React 组件中，开发人员定义一个 onClick 事件处理函数，该函数将在用户单击元素时被调用。
然后，使用 JSX 语法将该函数与 DOM 元素绑定。例如，可以在一个按钮上添加 onClick 属性并将其设置为处理函数的名称。
当用户单击该按钮时，浏览器会触发一个 click 事件。
React 将该事件传递给 onClick 处理函数，并调用该函数。
处理函数可以执行一些操作，例如更新组件的状态或调用其他函数。
总的来说，onClick 事件绑定的工作原理是通过将事件处理函数绑定到 DOM 元素上来实现的。当用户与该元素交互时，浏览器会触发事件并将其

88.React中”栈调和”Stack Reconciler过程是怎样的？

在React中，“栈调和”（Stack Reconciler）是指React的虚拟DOM（Virtual DOM）和渲染引擎之间的协作过程，用于更新DOM树。它的过程如下：

1. React通过调用组件的render方法，生成一个虚拟DOM树。
2. React将新的虚拟DOM树和旧的虚拟DOM树进行比较，找出需要更新的部分。
3. React将需要更新的部分转换成DOM操作，然后将它们添加到一个更新队列中。
4. React通过调用requestIdleCallback等待浏览器空闲时间，然后开始执行更新队列中的DOM操作。
5. React将更新队列中的DOM操作按照顺序依次执行，更新DOM树。

在这个过程中，React使用了一种叫做“协调”（Reconciliation）的算法，用于比较新旧虚拟DOM树的差异。这个算法的核心思想是，将虚拟DOM树转换成一个树形结构，然后递归地比较每个节点的属性和子节点，找出需要更新的部分。这个算法的时间复杂度是O(n)，其中n是虚拟DOM树的节点数。

总的来说，“栈调和”是React的核心机制之一，它保证了React的高效性和可靠性，使得React能够快速地更新DOM树，同时保持应用程序的正确性。

89.什么是发布订阅模式，写出其核心实现代码？

发布订阅模式是一种消息通信模式，也称为观察者模式。在该模式中，发布者（或称为主题）维护一个订阅者列表，并在状态发生变化时通知所有订阅者进行更新。这种模式可以实现松耦合，让发布者和订阅者之间的关系更加灵活。

以下是发布订阅模式的核心实现代码：

// 发布者
class Publisher {
  constructor() {
    this.subscribers = [];
  }

  // 添加订阅者
  addSubscriber(subscriber) {
    this.subscribers.push(subscriber);
  }

  // 删除订阅者
  removeSubscriber(subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  }

  // 发布消息
  publish(message) {
    this.subscribers.forEach(subscriber => {
      subscriber.update(message);
    });
  }
}

// 订阅者
class Subscriber {
  constructor(name) {
    this.name = name;
  }

  // 更新消息
  update(message) {
    console.log(`${this.name} received message: ${message}`);
  }
}

// 使用示例
const publisher = new Publisher();
const subscriber1 = new Subscriber('Subscriber 1');
const subscriber2 = new Subscriber('Subscriber 2');

publisher.addSubscriber(subscriber1);
publisher.addSubscriber(subscriber2);

publisher.publish('Hello, world!');

publisher.removeSubscriber(subscriber2);

publisher.publish('Goodbye, world!');

在上面的代码中，Publisher 类表示发布者，维护了一个订阅者列表 subscribers，并提供了添加、删除和发布消息的方法。Subscriber 类表示订阅者，具有一个 update 方法用于接收消息。在使用示例中，我们创建了一个发布者和两个订阅者，添加了订阅者后发布了一条消息，然后删除了一个订阅者并再次发布了一条消息。

90.以下代码的执行结果是什么并解释其原因？

执行结果如下：
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

解释：
1.第一条console.log()语句输出”script start”。
2.async()被调用，所以下一个输出是”async1 start”
3.await async2()在内遇到async1()，这意味着该函数将暂停执行并等待async2()完成再继续。因此，打印输出async2
4.接下来，Promise创建对象new Promise()并console.log()打印语句”promise1”
5.使用打印”promise2”的回调函数调用Promise对象的方法then()
6.代码中的下一个语句是console.log(’script end’)，所以这是下一个输出。
7.async1()恢复执行并打印”async1 end”
8.最后，setTimeout()使用回调函数调用该函数，该回调函数在最短延迟 0 毫秒后输出”setTimeout”
因此，输出的顺序由每个异步函数完成执行的顺序决定

91.说说reduce方法的作用？自己手动封装一个reduce，写出其核心代码？

reduce方法是JavaScript中的一个高阶函数，用于对数组中的元素进行累加或者累乘等操作，最终返回一个值。

reduce方法的语法如下：

array.reduce(callback[, initialValue])

其中，callback是一个回调函数，它可以接受四个参数：

• accumulator：累加器，它存储着上一次回调函数的返回值，或者是initialValue（如果有的话）。
• currentValue：当前元素的值。
• currentIndex：当前元素的索引。
• array：原始数组。

initialValue是可选的，它表示累加器的初始值。如果没有提供initialValue，则累加器的初始值为数组的第一个元素。

下面是一个使用reduce方法计算数组元素之和的例子：

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator   currentValue);
console.log(sum); // 15

手动封装一个reduce方法的核心代码如下：

function myReduce(arr, callback, initialValue) {
  let accumulator = initialValue !== undefined ? initialValue : arr[0];
  for (let i = initialValue !== undefined ? 0 : 1; i < arr.length; i  ) {
    accumulator = callback(accumulator, arr[i], i, arr);
  }
  return accumulator;
}

这个函数接受三个参数：数组arr、回调函数callback和可选的初始值initialValue。它首先根据initialValue是否存在来确定累加器的初始值，然后使用for循环遍历数组，每次调用回调函数来更新累加器的值。最后返回累加器的值。

92.大文件的断点续传如何实现，写出其核心思路代码，前后端都要写？

大文件的断点续传可以通过前后端配合实现。以下是其核心思路代码：

前端：

1. 将文件分块，每个块的大小可以根据实际情况设置，一般为1MB或者2MB。

2. 通过ajax将每个块上传到后端，同时传递块的序号和文件名等信息。

3. 如果上传失败，则记录上传的块号，下次继续上传该块。

4. 如果上传成功，则记录已上传的块号，继续上传下一个块。

5. 当所有块上传完成后，通知后端进行文件合并。

后端：

1. 接收前端传递的块数据，将其保存到临时文件中。

2. 如果上传失败，则记录上传的块号，下次继续上传该块。

3. 如果上传成功，则记录已上传的块号，继续接收下一个块。

4. 当所有块上传完成后，将所有块合并成一个完整的文件。

5. 返回上传成功的信息给前端。

核心代码：

前端：

//分块上传
function uploadChunk(file, chunkIndex) {
  var formData = new FormData();
  formData.append('file', file.slice(chunkIndex * chunkSize, (chunkIndex   1) * chunkSize));
  formData.append('chunkIndex', chunkIndex);
  formData.append('fileName', file.name);
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
      if (data.code === 0) {
        uploadedChunks.push(chunkIndex);
        if (uploadedChunks.length === totalChunks) {
          mergeChunks(file.name);
        } else {
          uploadNextChunk(file);
        }
      } else {
        uploadChunk(file, chunkIndex);
      }
    },
    error: function () {
      uploadChunk(file, chunkIndex);
    }
  });
}

//上传下一个块
function uploadNextChunk(file) {
  for (var i = 0; i < totalChunks; i  ) {
    if (uploadedChunks.indexOf(i) === -1 && uploadingChunks.indexOf(i) === -1) {
      uploadingChunks.push(i);
      uploadChunk(file, i);
      break;
    }
  }
}

//合并块
function mergeChunks(fileName) {
  $.ajax({
    url: '/merge',
    type: 'POST',
    data: {
      fileName: fileName
    },
    success: function (data) {
      if (data.code === 0) {
        alert('上传成功');
      } else {
        alert('上传失败');
      }
    },
    error: function () {
      alert('上传失败');
    }
  });
}

后端：

#保存块
@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    chunkIndex = int(request.form['chunkIndex'])
    fileName = request.form['fileName']
    filePath = os.path.join(app.config['UPLOAD_FOLDER'], fileName)
    chunkPath = os.path.join(app.config['UPLOAD_FOLDER'], fileName   '_'   str(chunkIndex))
    file.save(chunkPath)
    return jsonify({'code': 0})

#合并块
@app.route('/merge', methods=['POST'])
def merge():
    fileName = request.form['fileName']
    filePath = os.path.join(app.config['UPLOAD_FOLDER'], fileName)
    with open(filePath, 'wb') as f:
        for i in range(totalChunks):
            chunkPath = os.path.join(app.config['UPLOAD_FOLDER'], fileName   '_'   str(i))
            with open(chunkPath, 'rb') as chunk:
                f.write(chunk.read())
            os.remove(chunkPath)
    return jsonify({'code': 0})

93.React的路由的原理是什么，写出其实现的核心代码？

React的路由原理是通过监听URL的变化，根据不同的URL匹配对应的组件进行渲染，从而实现页面的切换和跳转。

React路由的实现核心代码如下：

1. 安装react-router-dom

npm install react-router-dom

2. 在App.js中引入BrowserRouter和Route组件

import { BrowserRouter, Route } from 'react-router-dom';

3. 在BrowserRouter中定义路由规则，使用Route组件匹配对应的组件

<BrowserRouter>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</BrowserRouter>

4. 在组件中使用Link组件进行页面跳转

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

5. 在组件中使用history对象进行编程式导航

import { useHistory } from 'react-router-dom';

const history = useHistory();

history.push('/about');

94.Vuex的实现原理是什么，写出其实现的核心代码？

Vuex是一个基于Vue.js的状态管理库，它的实现原理主要是通过将应用中的状态（state）集中存储到一个全局的store对象中，然后通过定义mutations、actions、getters等方法来修改和获取状态。当状态发生变化时，Vuex会自动更新视图。

Vuex的核心代码主要包括以下部分：

1. 定义store对象

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count  
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

2. 在Vue组件中使用store对象

new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
})

3. 实现store对象的核心方法

class Store {
  constructor(options) {
    this.state = options.state
    this.mutations = options.mutations
    this.actions = options.actions
    this.getters = options.getters
    this.subscribers = []
  }

  commit(type, payload) {
    const mutation = this.mutations[type]
    mutation(this.state, payload)
    this.subscribers.forEach(sub => sub({ type, payload }, this.state))
  }

  dispatch(type, payload) {
    const action = this.actions[type]
    action({ commit: this.commit, state: this.state }, payload)
  }

  subscribe(sub) {
    this.subscribers.push(sub)
  }
}

以上代码仅为示例，Vuex的实现原理还包括一些细节和优化，如模块化、严格模式等，具体可参考Vuex官方文档。

95.ReactDOM.render是如何串联渲染链路的？

ReactDOM.render是React中最常用的API之一，它用于将React元素渲染到DOM中。在渲染过程中，ReactDOM.render会串联渲染链路，以确保组件按正确的顺序进行渲染。

具体来说，ReactDOM.render会执行以下步骤：

1. 创建根节点：首先，ReactDOM.render会创建一个根节点，它是React应用的入口点。

2. 构建组件树：接下来，ReactDOM.render会根据传入的React元素构建组件树。这个过程是递归的，每个组件都会被实例化并添加到组件树中。

3. 计算差异：一旦组件树构建完成，ReactDOM.render会计算出前后两次渲染之间的差异。这个过程叫做“协调”。

4. 应用更新：根据计算出的差异，ReactDOM.render会更新DOM树。这个过程是递归的，每个组件都会被更新。

5. 触发副作用：最后，ReactDOM.render会触发副作用，比如调用生命周期方法、执行事件处理程序等。

在整个渲染过程中，ReactDOM.render会通过Fiber架构来管理渲染链路。Fiber是React 16中引入的一种新的渲染机制，它将渲染过程分解为多个小任务，可以中断和恢复，从而提高渲染性能和交互响应性。通过Fiber，ReactDOM.render可以更好地管理渲染链路，确保组件按正确的顺序进行渲染。

96.说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关系？

React中的虚拟DOM是指用JavaScript对象来表示真实DOM的结构和属性，通过对虚拟DOM的操作来更新真实DOM，从而实现页面的更新。虚拟DOM的优势在于可以避免频繁的DOM操作，提高页面的性能。

在虚拟DOM计算的时候，diff算法是用来比较新旧虚拟DOM的差异，从而确定需要更新的部分。而key是用来帮助diff算法更准确地比较新旧虚拟DOM的差异的。如果没有key，diff算法只能通过遍历子节点来比较差异，这样会导致性能问题。而有了key，diff算法就可以通过key来判断哪些节点是相同的，从而更快速地比较差异。因此，key在虚拟DOM计算中扮演了重要的角色。

97.shouldComponentUpdate有什么作用？

shouldComponentUpdate是React生命周期方法之一，它的作用是控制组件是否需要重新渲染。当组件的props或state发生变化时，React会默认重新渲染组件，但是有时候我们希望避免不必要的渲染，以提高性能。

通过在shouldComponentUpdate中返回一个布尔值，我们可以告诉React是否需要重新渲染组件。如果返回false，React将不会重新渲染组件，否则将会重新渲染。

通常情况下，我们可以在shouldComponentUpdate中比较当前props和state与下一次更新的props和state是否相同，如果相同则返回false，否则返回true。这样可以避免不必要的渲染，提高组件的性能。

这篇好文章是转载于：学新通技术网