我使用普通状态变量而不是 ref。
const [didMount, setDidMount] = useState(false)
useEffect(() => { setDidMount(true) }, [])
const [count, setCount] = useState(0)
useEffect(() => {
if (didMount) document.title = `You clicked ${count} times`
}, [count])
我们可以将didMount逻辑重构为自定义hook,像这样。
function useDidMount() {
const [didMount, setDidMount] = useState(false)
useEffect(() => { setDidMount(true) }, [])
return didMount
}
最后,我们可以像这样在我们的组件中使用它。
const didMount = useDidMount()
const [count, setCount] = useState(0)
useEffect(() => {
if (didMount) document.title = `You clicked ${count} times`
}, [count])
更新 使用useRef hook以避免额外的重新渲染(感谢@TomEsterez的建议)
这次,我们的自定义hook返回一个函数,该函数返回我们ref的当前值。您也可以直接使用ref,但我更喜欢这个。
function useDidMount() {
const mountRef = useRef(false);
useEffect(() => { mountRef.current = true }, []);
return () => mountRef.current;
}
使用方法
const MyComponent = () => {
const didMount = useDidMount();
useEffect(() => {
if (didMount())
else
})
return (
<div>something</div>
);
}
顺便提一下,我从来没有使用过这个钩子,可能有更好的方法来处理这个问题,这些方法更符合React编程模型。
React.useMemo
吗? - Pankaj Parag