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

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

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

useState 中的 state 发生了更新
父组件发生了更新
props 发生了更新
订阅了 useContext，并且 context 的数据发生了更新

我们再来一一分析

一、State 发生更新

这是比较经典的场景了

js 复制代码

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 ：当更新的是一个页面上未使用的无关值时，组件是否会重新渲染呢？

js 复制代码

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：这种情况下要如何进行优化呢？

两个思路：

拆分组件

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

使用 useRef

js 复制代码

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

二、父组件发生了更新

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

js 复制代码

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

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

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

js 复制代码

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 可以派上用场了

js 复制代码

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

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

三、Props 发生了更新

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

js 复制代码

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 的作用

js 复制代码

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 发生了更新

js 复制代码

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 行不行