续篇：展开聊下 state 与渲染树中位置的关系

奋飛

发布于 2024-05-25 19:23:26

820

发布于 2024-05-25 19:23:26

文章被收录于专栏：Super 前端

🐾 上篇的结尾处，提到了 => 为了提升性能， React 仅在渲染之间存在差异时才会更改 DOM 节点。

本篇，✓ 🇨🇳 展开聊下 state 与渲染树中位置的关系

📢📢📢 状态与渲染树中的位置相关

✊ 相同位置的相同组件会使得 state 被保留下来
✌️ 相同位置的不同组件会使 state 重置

只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的 state。 如果它被移除，或者一个不同的组件被渲染在相同的位置，那么 React 就会丢掉它的 state。

下述举例说明

// 子组件 Counter，用于记分
function Counter ({name}: { name: string }) {
    const [score, setScore] = useState(0);
    return (
        <div>
            <span>{name}</span>
            <p>Score: {score}</p>
            <button onClick={() => setScore(score + 1)}>加分</button>
        </div>
    )
}

状态与渲染树中的位置相关

React 通过组件在渲染树中的位置将它保存的每个状态与正确的组件关联起来。

export default () => {
    return (
        <>
            <Counter name="李刚"></Counter>
            <Counter name="奋飛"></Counter>
        </>
    )
}

这是两个独立的 counter，因为它们在树中被渲染在了各自的位置。

相同位置的相同组件会使得 state 被保留下来

name 由 “奋飛” 改为 “李刚”，记分器 state 并没有被重置！

export default () => {
    const [name, setName] = useState('奋飛');
    return (
        <>
            <input type="text"  value={name} onChange={(e: any) => setName(e.target.value)} />
            <Counter name={name}></Counter>
        </>
    )
}

它是位于相同位置的相同组件，所以对 React 来说，它是同一个记分器。

⚠️ 对 React 来说重要的是组件在 UI 树中的位置，而不是在 JSX 中的位置！

React 不知道函数里是如何进行条件判断的，它只会“看到”返回的树。

export default () => {
    const [status, setStatus] = useState(true);
    return (
        <>
            <input type="checkbox" checked={status} onChange={(e: any) => setStatus(e.target.checked)} />
            {status ? <Counter name="奋飛"></Counter> : <Counter name="李刚"></Counter>}
        </>
    )
}

⚡ 勾选复选框的时候 state 未被重置，因为 两个 <Counter /> 标签被渲染在了相同的位置。

⭐ 结论：通过上述的分析得知，一个组件被渲染在 UI 树的相同位置，React 就会保留它的 state。那么如何重置呢？

解决（state 重置）

使用不同的组件渲染
将组件渲染在不同的位置
使用 key 赋予每个组件一个明确的身份

方案1：使用不同的组件渲染

export default () => {
    const [status, setStatus] = useState(true);
    return (
        <>
            <input type="checkbox" checked={status} onChange={(e: any) => setStatus(e.target.checked)} />
            {status ? <div><Counter name="奋飛"></Counter></div> : <Counter name="李刚"></Counter>}
        </>
    )
}

第一个子组件从 div 变成了 Counter。当子组件 div 从 DOM 中被移除的时候，它底下的整棵树（包含 Counter 以及它的 state）也都被销毁了。

方案2：将组件渲染在不同的位置

export default () => {
    const [status, setStatus] = useState(true);
    return (
        <>
            <input type="checkbox" checked={status} onChange={(e: any) => setStatus(e.target.checked)} />
            {status && <Counter name="奋飛"></Counter>}
            {!status && <Counter name="李刚"></Counter>}
        </>
    )
}

初始化 status 的值是 true：第一个位置是 Counter ，第二个位置是 空 的；
切换 status 值为 false：第一个位置是 空 的，第二个位置是 Counter。

方案3：使用 `key`1 赋予每个组件一个明确的身份

export default () => {
    const [status, setStatus] = useState(true);
    return (
        <>
            <input type="checkbox" checked={status} onChange={(e: any) => setStatus(e.target.checked)} />
            {status ? <Counter name="奋飛" key="fly"></Counter> : <Counter name="李刚" key="lg"></Counter>}
        </>
    )
}

指定一个 key 能够让 React 将 key 本身而非它们在父组件中的顺序作为位置的一部分。

‼️ key 不是全局唯一的。它们只能指定 父组件内部 的顺序。

延伸

不应该把组件函数的定义嵌套起来

export default function MyComponent() {
  const [counter, setCounter] = useState(0);

  function MyTextField() {
    const [text, setText] = useState('');

    return (
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
    );
  }

  return (
    <>
      <MyTextField />
      <button onClick={() => {
        setCounter(counter + 1)
      }}>点击了 {counter} 次</button>
    </>
  );
}

每次点击按钮，输入框的 state 都会消失！这是因为每次 MyComponent 渲染时都会创建一个不同的 MyTextField 函数。

在相同位置渲染的是不同的组件，所以 React 将其下所有的 state 都重置了。

这样会导致 bug 以及性能问题。为了避免这个问题， 永远要将组件定义在最上层并且不要把它们的定义嵌套起来。

// 修复，将 MyTextField 组件抽离
function MyTextField() {
  const [text, setText] = useState('');

  return (
    <input
      value={text}
      onChange={e => setText(e.target.value)}
    />
  );
}

export default function MyComponent() {
  const [counter, setCounter] = useState(0);
	return (<> ... </>)
}