wehub-skill-sync
36 lines
1.1 KiB
Markdown
36 lines
1.1 KiB
Markdown
---
|
|
|
|
## 在渲染期间计算派生状态
|
|
|
|
如果一个值可以从当前的 props/state 计算得出，就不要将其存储在 state 中，也不要在 effect 中更新它。应在渲染期间直接推导该值，以避免多余的渲染和状态漂移。不要仅为了响应 props 变化而在 effect 中设置 state；应优先使用派生值或带 key 的重置方式。
|
|
|
|
**错误做法（冗余的 state 和 effect）：**
|
|
|
|
```tsx
|
|
function Form() {
|
|
const [firstName, setFirstName] = useState('First')
|
|
const [lastName, setLastName] = useState('Last')
|
|
const [fullName, setFullName] = useState('')
|
|
|
|
useEffect(() => {
|
|
setFullName(firstName + ' ' + lastName)
|
|
}, [firstName, lastName])
|
|
|
|
return <p>{fullName}</p>
|
|
}
|
|
```
|
|
|
|
**正确做法（在渲染期间派生）：**
|
|
|
|
```tsx
|
|
function Form() {
|
|
const [firstName, setFirstName] = useState('First')
|
|
const [lastName, setLastName] = useState('Last')
|
|
const fullName = firstName + ' ' + lastName
|
|
|
|
return <p>{fullName}</p>
|
|
}
|
|
```
|
|
|
|
参考链接：[你可能不需要 Effect](https://react.dev/learn/you-might-not-need-an-effect)
|