componentDidMount 等效于 React 函数/Hooks 组件?
2022-08-30 00:43:24
有没有办法通过钩子在 React 函数组件中进行模拟?componentDidMount
有没有办法通过钩子在 React 函数组件中进行模拟?componentDidMount
对于钩子的稳定版本(React 版本 16.8.0+)
为componentDidMount
useEffect(() => {
// Your code here
}, []);
为componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);
为componentWillUnmount
useEffect(() => {
// componentWillUnmount
return () => {
// Your code here
}
}, [yourDependency]);
因此,在这种情况下,您需要将依赖项传递到此数组中。让我们假设你有一个这样的状态
const [count, setCount] = useState(0);
每当计数增加时,您都希望重新呈现函数组件。那么你应该看起来像这样useEffect
useEffect(() => {
// <div>{count}</div>
}, [count]);
这样,每当计数更新时,组件就会重新呈现。希望这会有所帮助。
在 react hooks 中,componentDidMount
没有完全相同的等价物。
根据我的经验,react hooks在开发时需要不同的思维方式,一般来说,你不应该把它与类方法进行比较,比如.componentDidMount
话虽如此,您可以通过多种方式使用钩子来产生与 类似的效果。componentDidMount
解决方案 1:
useEffect(() => {
console.log("I have been mounted")
}, [])
解决方案 2:
const num = 5
useEffect(() => {
console.log("I will only run if my deps change: ", num)
}, [num])
解决方案3(带功能):
useEffect(() => {
const someFunc = () => {
console.log("Function being run after/on mount")
}
someFunc()
}, [])
解决方案 4(使用回拨):
const msg = "some message"
const myFunc = useCallback(() => {
console.log(msg)
}, [msg])
useEffect(() => {
myFunc()
}, [myFunc])
解决方案5(发挥创意):
export default function useDidMountHook(callback) {
const didMount = useRef(null)
useEffect(() => {
if (callback && !didMount.current) {
didMount.current = true
callback()
}
})
}
值得注意的是,只有当其他解决方案都不适用于您的用例时,才应真正使用解决方案5。如果您决定需要解决方案5,那么我建议您使用这种预制的钩子使用安装。
Source (包含更多详细信息):在 react 钩子中使用 componentDidMount