面试题整理2

最新推荐文章于 2024-10-01 20:12:28 发布

BAIYN_YA

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量37

点赞数

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/BAIYN_YA/article/details/132360755

版权

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

相同点：
	都可以用于描述组件的数据和状态
	都可以触发组件的重新渲染
	在组件内部都可以被访问和使用
不同点：
	来源不同：props是由父组件传递给子组件的，而state是组件自身管理的
	可变性不同：props是只读的，不能在组件内部直接修改，而state可以通过setState方法进行更新
	更新方式不同：props的更新由父组件决定并传递，而state的更新由组件自身触发
	作用范围不同：props可以在整个组件数中传递，而state只存在于组件的本地
关于render方法的执行情况：
在react中，每当组件的状态发生变化时，react将会触发组件的重新渲染。而render方法是用来定义组件的输出JSX结构的方法，他在以下情况下会执行：
	组件首次渲染：当组件首次被挂在到DOM树上时，render方法会被调用进行初始化渲染；
	组件的props发生变化：当组件接收到新的props时，react会比较新旧props差异，如果发现有变化，就会触发组件的重新渲染，进而调用render方法
	组件的state发生变化：当组件的state发生变化的时候，通过setState方法更新状态后，react就会触发组件的重新渲染，进而调用render方法
	父组件进行重新渲染 ：当父组件发生重新渲染时，子组件也会随之重新渲染，并调用render方法
需要注意的是，react使用了虚拟DOM技术，在每次重新弄渲染的时候，并不是真正的将整个DOM树重绘，而只会对发生变化的部分进行更新，以提高性能。

2. shouldComponentUpdate有什么作用？

shouldComponentUpdate 是 React 组件生命周期中的一个钩子方法，它用于控制组件是否应该进行更新。shouldComponentUpdate 方法接收两个参数：nextProps 和 nextState，用于判断下一个 Props 和 State 是否与当前的 Props 和 State 相同。

shouldComponentUpdate 的作用主要有以下几点：
性能优化：通过在 shouldComponentUpdate 中进行适当的判断，可以避免不必要的组件重新渲染，从而提高应用的性能。当 Props 或 State 没有发生变化时，可以返回 false，告诉 React 不需要进行更新。
避免不必要的 DOM 操作：React 的重新渲染会导致真实 DOM 的操作和更新，而这些操作通常是比较昂贵的。通过在 shouldComponentUpdate 中进行判断，可以避免不必要的 DOM 操作，提高性能。
控制组件更新策略：有时候我们希望只在特定的条件下才进行组件更新，而不是每次 Props 或 State 发生变化就立即更新。shouldComponentUpdate 提供了一个机会，在满足特定条件时返回 true，否则返回 false，从而控制组件的更新策略。

需要注意的是，shouldComponentUpdate 方法并不会阻止父组件的重新渲染或子组件的重新渲染。它只能影响到当前组件及其子组件的更新行为。如果你需要完全控制组件的更新，可以考虑使用 React.memo 或 PureComponent 这样的优化技术，或者手动在组件中实现 shouldComponentUpdate 的逻辑判断。

3. 说说react中的虚拟DOM？在虚拟DOM计算的时候diff和key之间有什么关系？

在 React 中，虚拟 DOM（Virtual DOM）是一种用 JavaScript 对象表示的轻量级的 DOM 结构。它是 React 的核心概念之一，用于提高性能和效率。
虚拟 DOM 的工作原理如下：
初始化阶段：当组件首次渲染时，React 会创建一个与真实 DOM 结构对应的虚拟 DOM 树，并通过调用 Render 方法生成初始的虚拟 DOM。
更新阶段：当组件的 Props 或 State 发生变化时，React 会重新调用 Render 方法生成新的虚拟 DOM。然后，React 会使用 diff 算法比较前后两个虚拟 DOM 树的差异。
最小化操作：根据 diff 算法的结果，React 会计算出最小化的 DOM 操作，只对发生变化的部分进行更新，而不是重新渲染整个 DOM 树。
应用更新：React 将计算得到的最小化操作应用到真实 DOM 上，更新页面的显示。

diff 和 key 的关系:
key 是 React 中用于标识虚拟 DOM 元素的属性。在进行虚拟 DOM 的 diff 算法时，React 使用每个元素的 key 值来判断其在前后两个虚拟 DOM 树中是否是相同的元素。
在进行虚拟 DOM 的比较时，React 会遍历新旧虚拟 DOM 树的节点，通过比较节点的类型和 key 值来确定它们是否相同。如果两个节点的类型不同，React 会直接删除旧节点并添加新节点；如果类型相同但 key 不同，React 会替换旧节点为新节点；如果类型和 key 都相同，React 则会更新节点的属性。
因此，key 在虚拟 DOM 的 diff 过程中起到了非常重要的作用。通过正确地设置和使用 key，可以帮助 React 更准确地定位并识别不同的元素，提高 diff 算法的效率，避免不必要的重新渲染。同时，key 还能够帮助维护组件状态，确保在列表元素的新增、删除或重新排序时，每个元素都能正确地保持自己的状态。

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

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

在 React 中，对于使用 props.children 属性传递的子组件或内容，如果直接使用 map 函数进行遍历会收到异常显示。这是因为 props.children 的类型并不总是一个数组，它可以是单个组件、字符串、数字等多种类型。

如果要遍历 props.children，可以使用 React 提供的 React.Children.map 方法来遍历子元素。这个方法可以处理 props.children 的不同类型，确保能够正确地遍历和操作每个子元素。

以下是使用 React.Children.map 方法来遍历 props.children 的示例：

import React from 'react';

const ParentComponent = (props) => {
  return (
    <div>
      {React.Children.map(props.children, (child, index) => {
        // 对每个子元素进行操作
        return <div key={index}>{child}</div>;
      })}
    </div>
  );
};

export default ParentComponent;

在上面的示例中，React.Children.map 方法接收两个参数：第一个参数是 props.children，第二个参数是一个回调函数，用于处理每个子元素。在回调函数中，你可以对每个子元素进行需要的操作，并返回相应的 JSX。
使用 React.Children.map，你可以安全地遍历和操作 props.children，而不需要担心不同类型子元素引起的异常显示问题。

React组件之间如何通信？
1. react组件之间可以通过props、context、事件总线等方式进行通信。
2. Props：父组件可以通过props向子组件传递数据和方法，子组件可以通过props接收并使用这些数据和方法。
3. Context：Context可以让我们在组件树中传递数据，而不需要手动地一层层地传递props。使用Context需要创建一个Context对象，然后通过Provider组件向下传递数据，子组件可以通过Consumer组件或useContext Hook来获取数据。
4. 事件总线：事件总线是一种发布-订阅模式，可以让不同组件之间进行通信。我们可以使用第三方库如EventEmitter3或自己实现一个事件总线。
5. redux
谈谈你对immutable.js的理解？
Immutable.js采用了持久化数据结构，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，且通过结构共享等方式大幅提高性能
redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的实现原理是什么？

使用异步处理中间件，例如redux-thunk，redux-saga等
中间件的实现原理：
react中间件是一个对redux store的拦截器，通过对store的请求进行拦截，react中间件可以捕获并处理redux store的操作，然后再将请求传递给redux，这个拦截器过程实际上就是react中间件的实现原理

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

同步： Redux的教程中反复使用todo列表的例子，那就是个典型的同步action，每当disptach action时，state就会被立即更新[当然setState是异步的]
异步： 一般异步处理都会使用中间件，比如redux-thunk或者redux-saga，他们做的事情是包装dispatch，request action由view触发，receive action由这些中间件触发

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

redux-thunk：通过执行action中的函数实现业务逻辑，没有拓展API
redux-saga：通过定义saga函数进行监控，同时提供一些常用的API
redux-thunk将部分异步处理业务逻辑写在action中，redux-sagasaga则是放在监控的函数中。

11.在使用redux过程中，如何防止定义的action-type的常量重复？
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。 Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象 Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

12.CDN的特点及意义？
什么是CDN

CDN 意为内容分发网络，是基于现有网络的智能虚拟网络，分布在世界各地的边缘服务器上。基本思路是避免互联网上可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快更稳定。

CDN 表示将数据从原始服务器复制到其他服务器。当用户访问时，他们可以在复制了数据内容的服务器上进行访问。其目的是使用户能够更快更好地获取所需内容，解决网络拥塞情况，提高用户访问网站的响应速度。CDN 加速成本低，速度快，适合访问量比较大的网站。

CDN 具有以下主要功能

1.节省骨干网带宽，降低带宽需求；

2.提供服务器端加速，解决大量用户访问导致的服务器过载问题；

3.服务提供商可以利用Web Cache技术将用户访问的网页和对象缓存在本地，这样对相同对象的访问就不需要占用骨干网的出口带宽，相应的用户访问网页的时间要求也增加了；

4.可以克服网站分布不均的问题，降低网站自身的建设和维护成本；

5.减少“通信风暴”的影响，提高网络访问的稳定性。

CDN 的特点

1.本地缓存加速:提高了企业网站(尤其是包含大量图片和静态页面的网站)的访问速度，大大提高了上述网站的稳定性。

2.镜像服务:消除了不同运营商之间互联瓶颈带来的影响，实现了跨运营商的网络加速，保证了不同网络的用户都能获得良好的接入质量。

3.远程加速:远程访问用户根据DNS负载均衡技术智能自动选择缓存服务器，选择最快的缓存服务器加速远程访问。

4.带宽优化:自动生成服务器的远程镜像缓存服务器。远程用户访问时，可以从缓存服务器读取数据，减少远程访问的带宽，分担网络流量，减轻原WEB服务器的负载。

5.集群抗攻击:广泛分布的CDN 节点加上节点间的智能冗余机制，可以有效防止黑客入侵，降低各种D.D.o.S攻击对网站的影响，同时保证更好的服务质量。

13.为什么for循环比forEach性能高？
for( )循环

通过下标，对循环中的代码反复执行，功能强大，可以通过index取得元素。在处理比较复杂的处理的时候较为方便

forEach( )循环

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。foreach有的也叫增强for循环，foreach其实是for循环的一个特殊简化版。注意，forEach() 对于空数组是不会执行回调函数的

for和forEach的区别

遍历

for循环按顺序遍历，forEach使用iterator迭代器遍历

数据结构

for循环是随机访问元素，foreach是顺序链表访问元素

性能上

对于arraylist，是顺序表，使用for循环可以顺序访问，速度较快；使用foreach会比for循环稍慢一些。

对于linkedlist，是单链表，使用for循环每次都要从第一个元素读取next域来读取，速度非常慢；使用foreach可以直接读取当前结点，数据较快；

如何选择

foreach相对于for循环，代码减少了，但是foreach依赖IEnumerable。在运行的时候效率低于for循环。当然了，在处理不确定循环次数的循环，或者循环次数需要计算的情况下。使用foreach比较方便。而且foreach的代码经过编译系统的代码优化后，和for循环的循环类似。

可以说，foreach语句是for语句的特殊简化版本，在遍历数组、集合方面，foreach为开发人员提供了极大的方便。在复杂的循环设计时，还是应该使用for循环更加的灵活。

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

Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，使用 Redux Toolkit 都可以优化你的代码，使其更可维护

react-redux：

react官方推出的redux绑定库，react-redux将所有组件分为两大类：UI组件和容器组件，其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API函数，UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法

15.React render方法的原理，在什么时候会触发？
在类组件和函数组件中，render函数的形式是不同的。

在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件。

在render函数中的jsx语句会被编译成我们熟悉的js代码

在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树

触发机制：

类组件调用 setState 修改状态
函数组件通过useState hook修改状态。函数组件通过useState这种形式更新数据，当数组的值不发生改变了，就不会触发render

总结：

render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM

在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render

组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state

在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染

所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染