React面试题汇总 ---1

1.React的严格模式如何使用，有什么用处？

React中StrictMode严格模式_react.strictmode_前端精髓的博客-CSDN博客当我们使用 npx create-react-app my-app 创建一个项目的时候。项目中有一段如下所示的代码：ReactDOM.render( , document.getElementById('root'));React.StrictMode 组件是什么？StrictMode 是一个用来检查项目中潜在问题的工具。与 Fragment 一样，Shttps://blog.csdn.net/wu_xianqiang/article/details/113521191严格模式在开发环境带来的问题解决

React18的useEffect会执行两次-腾讯云开发者社区-腾讯云前段时间在本地启了一个 React Demo 项目，在编码的过程中遇到一个很奇怪的“Bug”。其中简化版的代码如下所示。https://cloud.tencent.com/developer/article/2110645

2.在React中遍历的方法有哪些？

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致（两者的主要区别是一个 for-in 循环还会枚举其原型链上的属性）。Object.values()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，遍历时需添加key值。

forEach() 方法按照原始数组元素顺序依次处理元素。

map用法：

//用法1:Object.values()获取值进行遍历
Object.values(obj).map(item => item.length)


// 用法2:数据遍历
regionList.map(item => ({
   text: item.title,
   value: item.value
}))


// 用法3:标签循环遍历

3.在React中页面重新加载时怎样保留数据

如果您要在浏览器中保存数据，您可以选择以下选项：

本地存储
IndexedDB
饼干
redux 持久化

Client-side storage
对于react，你也可以找到像useLocalStorage（像useState）这样的东西来简化上面的用法，

localStorage写法：

const { username } = JSON.parse(localStorage.getItem("token"))

也可以通过redux持久化进行数据存储

4.React必须使用JSX吗。什么是 JSX ？

不一定，也可以使用React.createElement()

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签

JSX是什么？ - 简书一、JSX是什么？ JSX 是 JavaScript 的扩展语法，这种标签的写法就是 JSX。JSX 编写的组件通...https://www.jianshu.com/p/8fffa523f8ffreact判断一个元素是HTML元素还是react 组件的原则就是看第一个字母是否大写。

5. 为什么使用jsx的组件中没有看到使用react却需要引入react？

本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。

所谓的JSX其实就是JavaScript 对象，所以使用React 和JSX的时候一定要经过编译的过程：

JSX → 使用 React 构造组件，bable 进行编译 → JavaScript 对象 → ReactDOM.render() →DOM元素→插入页面

react为什么要使用jsx_为什么react会引入jsx_Meme_xp的博客-CSDN博客jsxhttps://blog.csdn.net/qq_52563729/article/details/127786788

6. 在React(18)中怎么使用async/await？

在useEffect内的用法：

useEffect(() => {
    async function fetchData() {
      const res = await axios.get("/xxxxx");
      const list = res.data;
      setdataSource(list)
    }
    fetchData()
  }, [])

7. React.Children.map和js的map有什么区别？

JavaScript中的map不会对为null或者undefined的数据进行处理，而React.Children.map中的map可以处理React.Children为null或者undefined的情况。

React.Children.map 能够处理未知数据类型，即使 React.children 是 null 和 undefined 也能够正确处理。
React.Children.forEach 一样的原理。

    var children = null
    chidren.map(i => {return i}) // => VM370:1 Uncaught TypeError: Cannot read property 'map' of null
    React.Children.map(children, i => {return i;}) // return null

8.React 中的高阶组件运用了什么设计模式？（有问题）

高阶组件如下方的withRouter(对组件内容添加props参数)：React Router 6 函数式组件withRouter 路由属性配置_DOM曼珠沙华的博客-CSDN博客

React的高阶组件详解_react高阶组件_学全栈的灌汤包的博客-CSDN博客什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先，高阶组件本身不是一个组件，而是一个函数;https://blog.csdn.net/m0_71485750/article/details/126694889

9.React中的state和props有什么区别

props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的 props 属性进行传递，因此 props 是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口 state。根据对外接口 props 和对内接口 state，组件计算出对应界面的UI。

10.React 中 keys 的作用是什么？

涉及到diff算法

key的取值可以分为三种，不定值、索引值、确定且唯一值

在使用key时，要保证key的唯一和确定性，如果key的值为math.random()，可能造成组件重新构建，使之前对元素的操作失效
在渲染页面时，尽量不要操作真实的dom，使用state来更新页面

11.React17 中对 Ref 的正确使用方式有哪些？

react中ref的使用方式_react中ref的用法_别放弃我还在努力的博客-CSDN博客react中ref的全部使用方式：包括在类组件中和函数组件中https://blog.csdn.net/oLylia/article/details/127010004

12.在 React 中如何处理事件

React（类/函数）组件及内部方法使用_DOM曼珠沙华的博客-CSDN博客创建组件及组件分类可以查看内容的第一部分。https://blog.csdn.net/a18792627168/article/details/125946114?spm=1001.2014.3001.5502

13.在构造函数调用 `super` 并将 `props` 作为参数传入的作用是啥？（没理解）

(在构造函数中)调用 super(props) 的目的是什么_构造方法为什么要调用一下super_祥哥的说的博客-CSDN博客

【React 进阶】props 和 state 的区别详解_props和state的区别_八了个戒的博客-CSDN博客

14.什么是受控组件

React 组件的受控与非受控 - 知乎曾经，我每次面试时几乎都会问一个问题：antd 中的 Input 组件是受控组件还是非受控组件？有些人会毫不犹豫的回答：是受控组件，因为有 value 和 onChange，而另外也有一些人会比较犹豫，因为的确似乎说 Input 是…https://zhuanlan.zhihu.com/p/536322574

15.使用 React Hooks 好处是啥

在React中函数组件是没有React state 、生命周期这些功能的。在React16.8之前的模式是 class 组件(提供状态) + 函数组件(展示内容) ；React16.8之后，React提供了Hooks钩子函数，它使函数组件提供了状态、生命周期等原本在Class 组件中才提供的功能。

Hooks带来的好处：

函数本身比较简单，提供了Hooks的函数组件可以更好的胜任根据状态来渲染UI这件事
hooks让函数组件内部有了维护状态的能力
hooks带来了组件的逻辑复用能力

具体也可以查看这篇内容 React Hooks的定义及使用

16.合成事件

理解 React合成事件与JavaScript原生事件_合成事件和原生事件的区别_。烦啦的博客-CSDN博客1. 原生事件原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。在react中即使有自己的一套事件机制（见下面合成事件），但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件，需要在点击非弹窗区域时关掉弹窗，此时我们只能针对document进行原生点击事件监听。由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作，并且注意要在componenthttps://blog.csdn.net/qq_43293207/article/details/116669245

17.函数组件和类组件怎么选择？

看API的使用

18. 什么是 React Fiber?

【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行_react fiber_行星飞行的博客-CSDN博客我在[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?一文中，介绍了虚拟的概念，以及中虚拟的使用场景。那么按照之前的约定，本文来聊聊中另一个非常重要的概念，也就是。那么通过阅读本文，你将了解到如下几个知识点：同样，若文中涉及到的源码部分，我依然会使用的版本，保证文章的结论不会过于老旧；其次，的概念理解起来其实比较枯燥，但我会尽量描述的通俗易懂一点，那么本文开始。我们学习任何东西，一定会经历两个阶段，一是这个东西是什么？二是这个东西有什么用（解https://blog.csdn.net/echolunzi/article/details/125586636React的新引擎—React Fiber是什么？ - 掘金当浏览器的主线程长时间忙于运行一些事情时，关键任务的执行可以能被推迟。为了展示这个问题，我做了一个demo，为了使星球一直转动，主线程需要每16ms被调用一次，因为animation是跑在主线程上的。如果主线程被其他事情占用，假如占用了200ms，你会发现animation会…https://juejin.cn/post/6844903700717109261

19. Hooks会取代 `render props` 和高阶组件吗？

包子铺这是河狸兽的包子铺https://wangxinyang.xyz/article/60ec6184e8477312e204a364

20. 如何避免组件的重新渲染？

如何避免 React 组件重渲染的方法-51CTO.COM在 ShouldComponentUpdate 或 PureComponent 中进行 Props 和State 的浅比较，如果没有变化，则返回 False，防止不必要的重渲染。https://www.51cto.com/article/751240.html

React 组件重渲染可能会导致应用性能下降，以下是一些避免重渲染的方法和实战经验：

1、使用 shouldComponentUpdate 或 PureComponent

在 shouldComponentUpdate 或 PureComponent 中进行 props 和 state 的浅比较，如果没有变化，则返回 false，防止不必要的重渲染。

2、使用 React.memo

对于函数组件，可以使用 React.memo 高阶组件对组件的 props 进行浅比较，如果没有变化，则返回缓存的组件。

const MyComponent = React.memo((props) => {
  // ...
});

3、使用 useMemo 和 useCallback

对于需要传递给子组件的 props，可以使用 useMemo 缓存计算结果，避免在每次渲染时重新计算。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

对于需要传递给子组件的回调函数，可以使用 useCallback 缓存函数实例，避免在每次渲染时重新创建函数实例。

const handleClick = useCallback(() => {
  // ...
}, [a, b]);

4、避免更新整个 state

在使用 setState 更新 state 时，确保只更新必要的部分，而不是整个 state 对象。例如，如果只需要更新 state 中的一个属性，可以使用对象的展开语法：

this.setState({ count: this.state.count + 1 });

5、避免在 render 方法中创建新的对象或数组

在 render 方法中创建新的对象或数组会导致组件重渲染，可以将它们提取到组件外部的变量中。

const options = [{ value: 'foo', label: 'Foo' }, { value: 'bar', label: 'Bar' }];

function MyComponent() {
  return