只在更新时运行 effect
这是个比较罕见的使用场景。如果你需要的话，你可以 使用一个可变的 ref 手动存储一个布尔值来表示是首次渲染还是后续渲染，然后在你的 effect 中检查这个标识。（如果你发现自己经常在这么做，你可以为之创建一个自定义 Hook。）
function Example () {
const [count, setCount] = useState(0);
const prevCountRef = useRef(false);
useEffect(() => {
if (prevCountRef.current) {
console.log('只在更新时候执行')
} else {
prevCountRef.current = true
}
});
return (
<div>
<div>{count}</div>
<button onClick={() => {setCount(count+1)}}>+</button>
</div>
)
}
这或许有一点错综复杂，但你可以把它抽取成一个自定义 Hook：
function Example () {
const [count, setCount] = useState(0);
const update = useUpdate()
console.log(update, '是否更新')
return (
<div>
<div>{count}</div>
<button onClick={() => {setCount(count+1)}}>+</button>
</div>
)
}
function useUpdate () {
const ref = useRef(false)
useEffect(() => {
ref.current = true
})
return ref.current
}
获取上一轮的 props 或 state
目前，你可以 通过 ref 来手动实现：
function Example () {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count
});
const prevCount = prevCountRef.current
console.log(prevCount, count, '之前的状态和现在的状态')
return (
<div>
<div>{count}</div>
<button onClick={() => {setCount(count+1)}}>+</button>
</div>
)
}
这或许有一点错综复杂，但你可以把它抽取成一个自定义 Hook：
function Example () {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count)
console.log(prevCount, count, '之前的状态和现在的状态')
return (
<div>
<div>{count}</div>
<button onClick={() => {setCount(count+1)}}>+</button>
</div>
)
}
function usePrevious (value) {
const ref = useRef()
useEffect(() => {
ref.current = value
})
return ref.current
}
函数中看到陈旧的 props 和 state
组件内部的任何函数，包括事件处理函数和 effect，都是从它被创建的那次渲染中被「看到」的。
function Example () {
const [count, setCount] = useState(0);
function handleAlertClick () {
setTimeout(() => {
console.log(count)
}, 3000)
}
function increment () {
let newCount = count + 1;
setCount(newCount)
}
return (
<div>
<div>{count}</div>
<button onClick={increment}>+</button>
<button onClick={handleAlertClick}>点击</button>
</div>
)
}
如果你刻意地想要从某些异步回调中读取 最新的 state，你可以用 一个 ref 来保存它，修改它，并从中读取。
function Example () {
const [count, setCount] = useState(0);
const ref = useRef(0)
function handleAlertClick () {
setTimeout(() => {
console.log(ref.current)
}, 3000)
}
function increment () {
let newCount = count + 1;
setCount(newCount)
ref.current = newCount
}
return (
<div>
<div>{count}</div>
<button onClick={increment}>+</button>
<button onClick={handleAlertClick}>点击</button>
</div>
)
}
请记住，当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。
————————————————
版权声明：本文为CSDN博主「前端精髓」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wu_xianqiang/article/details/100037632