面试官问题： 引起 react 组件重新渲染的常见原因有哪些？

答：重新渲染一般有如下几个原因

1. useState 中的 state 发生了更新

2. 父组件发生了更新

3. props 发生了更新

4. 订阅了 useContext，并且 context 的数据发生了更新

我们再来一一分析

一、State 发生更新

这是比较经典的场景了

复制 1import { useState } from 'react'
 2import './App.css'
 3
 4function App() {
 5  const [count, setCount] = useState(0)
 6
 7  console.log('组件重新渲染')
 8  return (
 9    <>
10      <div>当前为 { count }</div>
11      <button onClick={() => {setCount(count + 1)}}>点击加一</button>
12    </>
13  )
14}
15
16export default App

当点击加一时，可以观察到控制台的打印

 

 

到这还算简单，注意听，面试官要发力了。

---

面试官引申问题1：当更新的是一个页面上未使用的无关值时，组件是否会重新渲染呢？

复制 1import { useState } from 'react'
 2import './App.css'
 3
 4function App() {
 5  const [count, setCount] = useState(0)
 6  const [count2, setCount2] = useState(0) 
 7
 8  console.log('组件重新渲染')
 9  return (
10    <>
11      <div>当前为 { count }</div>
12      <button onClick={() => {setCount2(count2 + 1)}}>点击加一</button>
13    </>
14  )
15}
16
17export default App

 

 

答案是依旧会触发重新渲染，React 没有进行“是否使用该状态值”的判断 。

---

面试官引申问题2： React 为什么不会自动进行“是否使用该状态值”的优化判断？

判断一个状态是否在组件中“被使用”其实非常复杂。要做到这一点：

• React 必须追踪所有状态值的依赖关系；
• 分析组件 JSX、hook、甚至副作用中是否使用了该状态；
• 考虑闭包、条件渲染、动态逻辑等情况。

这不仅增加了 React 内部实现的复杂度，而且这种依赖分析本身也是一个性能开销。所以 React 选择了更简单、可预测的模型：

你调用了 setState ，我就重新渲染组件。

注意，重新渲染的是创建这个 state 的组件，而非调用 setState 的组件

---

面试官引申问题3：这种情况下要如何进行优化呢？

两个思路：

1. 拆分组件

将 setCount2 的按钮单独抽成组件，这样重新渲染只会发生在局部代码上

2. 使用 useRef

复制 1import { useRef, useState } from 'react'
 2import './App.css'
 3
 4function App() {
 5  const [count, setCount] = useState(0)
 6  const countRef = useRef(0)
 7  console.log('重新渲染')
 8
 9  return (
10    <>
11      <div>当前为 { countRef.current }</div>
12      <button onClick={() => { countRef.current++ }}>点击加一</button>
13    </>
14  )
15}
16
17export default App

点击加一并观察页面，会发现毫无变化。

---

面试官引申问题4：为什么 useRef 可以不引起变化呢？

可以将 useRef 理解为一个特殊的变量，变量变更时是不会引起重新渲染的，不过这个特殊的变量再重新渲染的时候会被保留，不会出现普通变量值丢失的问题。他们三个对比基本如下：

	变量	useRef	useState
格式	let i = 0;i = i + 1;	const countRef = useRef(0);countRef.current += 1;	const [count, setCount] = useState(0);setCount(count + 1);
是否引起重新渲染	❌	❌	✅
重新渲染后保留	❌	✅	✅

二、父组件发生了更新

先来看这两个组件，很简单的父子嵌套

复制 1export const Child = () => {
 2    console.log('Child 重新渲染')
 3    return <div>
 4        <h1>Child</h1>
 5    </div>;
 6}
 7
 8export const Parent = () => {
 9    console.log('Parent 重新渲染')
10    return <div>
11        <Child />
12    </div>;
13}

我们稍稍融合刚才的代码，给 parent 增加一个引起重新渲染的按钮

复制 1import { useState } from "react";
 2
 3export const Child = () => {
 4    console.log('Child 重新渲染')
 5    return <div>
 6        <h1>Child</h1>
 7    </div>;
 8}
 9
10export const Parent = () => {
11    console.log('Parent 重新渲染')
12    const [count, setCount] = useState(0)
13    return <div>
14        <h1>Parent{count}</h1>
15        <Child />
16        <button onClick={() => setCount(count + 1)}>parent 加一</button>
17    </div>;
18}

 

 

点击后父组件重新渲染，随之带动子组件的重新渲染，即使子组件并没有变化。

---

面试官引申问题5：有什么办法让这种情况的子组件不重新渲染吗？

有的兄弟有的，我们的 memo 可以派上用场了

复制 1export const Child = memo(() => {
 2    console.log('Child 重新渲染')
 3    return <div>
 4        <h1>Child</h1>
 5    </div>;
 6})

 

 

只需要用 memo 包裹一下子组件即可令其缓存，这样子组件就不会重复渲染了

三、Props 发生了更新

继续上面那个例子，但是将对象向下传递

复制 1import { memo, useState } from "react";
 2
 3export const Child = memo(({ info }: { info: { name: string } }) => {
 4  console.log("Child 重新渲染");
 5
 6  return (
 7    <div>
 8      <h1>Child-{info.name}</h1>
 9    </div>
10  );
11});
12
13export const Parent = () => {
14  const [count, setCount] = useState(0);
15  const userInfo = { name: "张三" };
16
17  console.log("Parent 重新渲染");
18  return (
19    <div>
20      <h1>Parent{count}</h1>
21      <button onClick={() => setCount(count + 1)}>parent 加一</button>
22      <Child info={userInfo} />
23    </div>
24  );
25};

此时点击加一，会观察到即使使用了 memo 包裹，依旧出现了重新渲染的问题

 

 

主要还是因为 props 发生了变更。

有的不太清楚的同学就要问了，不对啊，props 哪里变了，不还是那个对象吗，我们并没有对其进行修改啊？

但我们需要知道，我们定义的 userInfo 是一个普通变量，普通变量在重新渲染的时候会重新生成，所以引用地址发生了更改，自然就产生了变更。

---

面试官引申问题6：你这里是对象，假如是一个字符串，会引起子组件重新渲染吗？

不会，具体逻辑是：

• 基本类型（如 string、number、boolean）直接比较值；
• 对于引用类型（对象、数组、函数），比较的是 引用地址是否相同。

由于值没变，所以是不会引发重新渲染的。

---

面试官引申问题7：那如何解决这种对象没变化，但重新渲染的问题？

首先将整个子组件用 memo 包裹，接着对所有的传入的 props 做处理：

• 如果是普通对象，我们使用 useMemo 进行包裹
• 如果是函数，我们使用 useCallback 进行包裹

useMemo 几乎是 useCallback 的超集，完全可以替代掉useCallback，只能说更有语义化吧。

这样就能起到缓存 props 的作用

复制 1import { memo, useMemo, useState } from "react";
 2
 3export const Child = memo(({ info }: { info: { name: string } }) => {
 4  console.log("Child 重新渲染");
 5
 6  return (
 7    <div>
 8      <h1>Child-{info.name}</h1>
 9    </div>
10  );
11});
12
13export const Parent = () => {
14  const [count, setCount] = useState(0);
15  const userInfo = useMemo(() => ({ name: "张三" }), []);
16
17  console.log("Parent 重新渲染");
18  return (
19    <div>
20      <h1>Parent{count}</h1>
21      <button onClick={() => setCount(count + 1)}>parent 加一</button>
22      <Child info={userInfo} />
23    </div>
24  );
25};

面试官引申问题8：是否需要把大部分这类代码都用 useMemo 和 useCallback 进行包裹？

关于这个问题的讨论还是比较多的，但大多数是持反对意见

我挑出了一篇比较有代表性的：juejin.cn/post/725180…

简单说一下缺点：

• 代码复杂性提高

• 仅在 memo 了组件 + useMemo 了 props 的情况下，才会在重绘阶段有提速

• 若是嵌套了多层的数据，一旦在某一层忘了 memo，整条线路的 memo 都是无用功

• memo 并非毫无代价！其本身也会消耗性能

四、context 发生了更新

复制 1export const Context = createContext({
 2  count: 0,
 3  setCount: (value: number) => {},
 4});
 5
 6function App() {
 7  const [count, setCount] = useState(0);
 8  console.log("祖节点重新渲染");
 9
10  return (
11    <Context.Provider value={{ count, setCount }}>
12      <div>
13        <h1>祖节点-{count}</h1>
14        <button onClick={() => setCount(count + 1)}>祖节点加一</button>
15      </div>
16      <Parent />
17    </Context.Provider>
18  );
19}
20
21export const Child = () => {
22  const { count } = useContext(Context);
23  console.log("Child 重新渲染");
24
25  return (
26    <div>
27      <h1>Child-{count}</h1>
28    </div>
29  );
30};
31
32export const Parent = () => {
33  console.log("Parent 重新渲染");
34  return (
35    <div>
36      <h1>Parent</h1>
37      <Child />
38    </div>
39  );
40};

当 App 中的 count 发生更新时，由于【父组件更新，子组件随之更新的原则】，所有的子组件都会发生更新，不过如果你用 memo 包裹了中间层，则会跳过这层，只有订阅的子组件才会发生更新。