续篇：展开聊下 state 与 渲染树中位置的关系
🐾 上篇的结尾处，提到了 => 为了提升性能， 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：使用 key1 赋予每个组件一个明确的身份
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 (<> ... </>)
} - https://react.docschina.org/learn/rendering-lists#why-does-react-need-keys React 中为什么需要key？ ↩︎