面试官：这套 react 夺命连环问你接得住吗

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

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

1. useState 中的 state 发生了更新

2. 父组件发生了更新

3. props 发生了更新

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

我们再来一一分析

一、State 发生更新

这是比较经典的场景了

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  console.log('组件重新渲染')
  return (
    <>
      <div>当前为 { count }</div>
      <button onClick={() => {setCount(count + 1)}}>点击加一</button>
    </>
  )
}

export default App

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

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

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [count2, setCount2] = useState(0) // 增加一个 count2

  console.log('组件重新渲染')
  return (
    <>
      <div>当前为 { count }</div>
      <button onClick={() => {setCount2(count2 + 1)}}>点击加一</button>
    </>
  )
}

export default App

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

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

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

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

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

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

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

---

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

两个思路：

1. 拆分组件

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

2. 使用 useRef

import { useRef, useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const countRef = useRef(0)
  console.log('重新渲染')

  return (
    <>
      <div>当前为 { countRef.current }</div>
      <button onClick={() => { countRef.current++ }}>点击加一</button>
    </>
  )
}

export 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);
是否引起重新渲染	❌	❌	✅
重新渲染后保留	❌	✅	✅

二、父组件发生了更新

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

export const Child = () => {
    console.log('Child 重新渲染')
    return <div>
        <h1>Child</h1>
    </div>;
}

export const Parent = () => {
    console.log('Parent 重新渲染')
    return <div>
        <Child />
    </div>;
}

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

import { useState } from "react";

export const Child = () => {
    console.log('Child 重新渲染')
    return <div>
        <h1>Child</h1>
    </div>;
}

export const Parent = () => {
    console.log('Parent 重新渲染')
    const [count, setCount] = useState(0)
    return <div>
        <h1>Parent{count}</h1>
        <Child />
        <button onClick={() => setCount(count + 1)}>parent 加一</button>
    </div>;
}

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

---

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

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

export const Child = memo(() => {
    console.log('Child 重新渲染')
    return <div>
        <h1>Child</h1>
    </div>;
})

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

三、Props 发生了更新

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

import { memo, useState } from "react";

export const Child = memo(({ info }: { info: { name: string } }) => {
  console.log("Child 重新渲染");

  return (
    <div>
      <h1>Child-{info.name}</h1>
    </div>
  );
});

export const Parent = () => {
  const [count, setCount] = useState(0);
  const userInfo = { name: "张三" };

  console.log("Parent 重新渲染");
  return (
    <div>
      <h1>Parent{count}</h1>
      <button onClick={() => setCount(count + 1)}>parent 加一</button>
      <Child info={userInfo} />
    </div>
  );
};

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

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

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

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

---

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

不会，具体逻辑是：

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

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

---

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

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

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

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

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

import { memo, useMemo, useState } from "react";

export const Child = memo(({ info }: { info: { name: string } }) => {
  console.log("Child 重新渲染");

  return (
    <div>
      <h1>Child-{info.name}</h1>
    </div>
  );
});

export const Parent = () => {
  const [count, setCount] = useState(0);
  const userInfo = useMemo(() => ({ name: "张三" }), []);

  console.log("Parent 重新渲染");
  return (
    <div>
      <h1>Parent{count}</h1>
      <button onClick={() => setCount(count + 1)}>parent 加一</button>
      <Child info={userInfo} />
    </div>
  );
};

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

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

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

简单说一下缺点：

• 代码复杂性提高

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

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

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

四、context 发生了更新

export const Context = createContext({
  count: 0,
  setCount: (value: number) => {},
});

function App() {
  const [count, setCount] = useState(0);
  console.log("祖节点重新渲染");

  return (
    <Context.Provider value={{ count, setCount }}>
      <div>
        <h1>祖节点-{count}</h1>
        <button onClick={() => setCount(count + 1)}>祖节点加一</button>
      </div>
      <Parent />
    </Context.Provider>
  );
}

export const Child = () => {
  const { count } = useContext(Context);
  console.log("Child 重新渲染");

  return (
    <div>
      <h1>Child-{count}</h1>
    </div>
  );
};

export const Parent = () => {
  console.log("Parent 重新渲染");
  return (
    <div>
      <h1>Parent</h1>
      <Child />
    </div>
  );
};

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

---

面试官引申问题9：非常优秀，公司现金流紧张，月薪给你开 3000 行不行