我的react面试题笔记整理（附答案）

shouldComponentUpdate有什么用？为什么它很重要？

组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。在生命周期方法 should ComponentUpdate中，允许选择退出某些组件（和它们的子组件）的和解过程。
和解的最终目标是根据新的状态，以最有效的方式更新用户界面。如果我们知道用户界面的某一部分不会改变，那么没有理由让 React弄清楚它是否应该更新渲染。通过在 shouldComponentUpdate方法中返回 false, React将让当前组件及其所有子组件保持与当前组件状态相同。

react 最新版本解决了什么问题，增加了哪些东西

React 16.x的三大新特性 Time Slicing、Suspense、 hooks

• Time Slicing（解决CPU速度问题）使得在执行任务的期间可以随时暂停，跑去干别的事情，这个特性使得react能在性能极其差的机器跑时，仍然保持有良好的性能
• Suspense （解决网络IO问题） 和lazy配合，实现异步加载组件。 能暂停当前组件的渲染， 当完成某件事以后再继续渲染，解决从react出生到现在都存在的「异步副作用」的问题，而且解决得非的优雅，使用的是 T异步但是同步的写法，这是最好的解决异步问题的方式
• 提供了一个内置函数componentDidCatch，当有错误发生时，可以友好地展示 fallback 组件; 可以捕捉到它的子元素（包括嵌套子元素）抛出的异常; 可以复用错误组件。

（1）React16.8 加入hooks，让React函数式组件更加灵活，hooks之前，React存在很多问题：

• 在组件间复用状态逻辑很难
• 复杂组件变得难以理解，高阶组件和函数组件的嵌套过深。
• class组件的this指向问题
• 难以记忆的生命周期

hooks很好的解决了上述问题，hooks提供了很多方法

• useState 返回有状态值，以及更新这个状态值的函数
• useEffect 接受包含命令式，可能有副作用代码的函数。
• useContext 接受上下文对象（从 React.createContext返回的值）并返回当前上下文值，
• useReducer useState 的替代方案。接受类型为 （state，action）=> newState的reducer，并返回与dispatch方法配对的当前状态。
• useCalLback 返回一个回忆的memoized版本，该版本仅在其中一个输入发生更改时才会更改。纯函数的输入输出确定性 o useMemo 纯的一个记忆函数 o useRef 返回一个可变的ref对象，其Current 属性被初始化为传递的参数，返回的 ref 对象在组件的整个生命周期内保持不变。
• useImperativeMethods 自定义使用ref时公开给父组件的实例值
• useMutationEffect 更新兄弟组件之前，它在React执行其DOM改变的同一阶段同步触发
• useLayoutEffect DOM改变后同步触发。使用它来从DOM读取布局并同步重新渲染

（2）React16.9

• 重命名 Unsafe 的生命周期方法。新的 UNSAFE_前缀将有助于在代码 review 和 debug 期间，使这些有问题的字样更突出
• 废弃 javascrip:形式的 URL。以javascript:开头的URL 非常容易遭受攻击，造成安全漏洞。
• 废弃"Factory"组件。 工厂组件会导致 React 变大且变慢。
• act（）也支持异步函数，并且你可以在调用它时使用 await。
• 使用 进行性能评估。在较大的应用中追踪性能回归可能会很方便

（3）React16.13.0

• 支持在渲染期间调用setState，但仅适用于同一组件
• 可检测冲突的样式规则并记录警告
• 废弃 unstable_createPortal，使用CreatePortal
• 将组件堆栈添加到其开发警告中，使开发人员能够隔离bug并调试其程序，这可以清楚地说明问题所在，并更快地定位和修复错误。

对React中Fragment的理解，它的使用场景是什么？

在React中，组件返回的元素只能有一个根元素。为了不添加多余的DOM节点，我们可以使用Fragment标签来包裹所有的元素，Fragment标签不会渲染出任何元素。React官方对Fragment的解释：

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

import React, {
    Component, Fragment } from 'react'

// 一般形式
render() {
   
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
// 也可以写成以下形式
render() {
   
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

hooks 常用的

useEffct使用：
如果不传参数：相当于render之后就会执行
传参数为空数组：相当于componentDidMount
如果传数组：相当于componentDidUpdate
如果里面返回：相当于componentWillUnmount
会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。React 会在执行当前 effect 之前对上一个 effect 进行清除。

useLayoutEffect:
useLayoutEffect在浏览器渲染前执行
useEffect在浏览器渲染之后执行

当父组件引入子组件以及在更新某一个值的状态的时候，往往会造成一些不必要的浪费，
而useMemo和useCallback的出现就是为了减少这种浪费，提高组件的性能，
不同点是：useMemo返回的是一个缓存的值，即memoized 值，而useCallback返回的是一个memoized 回调函数。


useCallback
父组件更新子组件会渲染,针对方法不重复执行，包装函数返回函数；

useMemo:
const memoizedValue =useMemo(callback,array)
callback是一个函数用于处理逻辑
array 控制useMemo重新执⾏行的数组，array改变时才会 重新执行useMemo
不传数组，每次更新都会重新计算
空数组，只会计算一次
依赖对应的值，当对应的值发生变化时，才会重新计算(可以依赖另外一个 useMemo 返回的值)
不能在useMemo⾥面写副作⽤逻辑处理，副作用的逻辑处理放在 useEffect内进行处理

自定义hook
自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook，
自定义 Hook 是一种自然遵循 Hook 设计的约定，而并不是 React 的特性
在我看来，自定义hook就是把一块业务逻辑单独拿出去写。

 const [counter, setCounter] = useState(0);
 const counterRef = useRef(counter);  // 可以保存上一次的变量

useRef 获取节点
function App() {
    const inputRef = useRef(null);

    return 

        
         inputRef.current.focus()}>focus
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

参考：前端react面试题详细解答

在 React 中，refs 的作用是什么

Refs 可以用于获取一个 DOM 节点或者 React 组件的引用。何时使用 refs 的好的示例有管理焦点/文本选择，触发命令动画，或者和第三方 DOM 库集成。你应该避免使用 String 类型的 Refs 和内联的 ref 回调。Refs 回调是 React 所推荐的。

React-Router 4的Switch有什么用？

Switch 通常被用来包裹 Route，用于渲染与路径匹配的第一个子 或 ，它里面不能放其他元素。

假如不加 ：

import {
    Route } from 'react-router-dom'

<Route path="/" component={
   Home}></Route>
<Route path="/login" component={
   Login}></Route>

1
2
3
4
5
6
7
8

Route 组件的 path 属性用于匹配路径，因为需要匹配 / 到 Home，匹配 /login 到 Login，所以需要两个 Route，但是不能这么写。这样写的话，当 URL 的 path 为 “/login” 时，和 都会被匹配，因此页面会展示 Home 和 Login 两个组件。这时就需要借助 来做到只显示一个匹配组件：

import {
    Switch, Route} from 'react-router-dom'

<Switch>
    <Route path="/" component&#
1
2
3
4