javascript componentDidMount 等效于 React 函数/Hooks 组件吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53945763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
componentDidMount equivalent on a React function/Hooks component?
提问by jeyko
Are there ways to simulate componentDidMountin React functional components via hooks?
有没有办法componentDidMount通过钩子在 React 功能组件中进行模拟？
回答by Mertcan Diken
For the stable version of hooks (React Version 16.8.0+)
对于钩子的稳定版本（React 版本 16.8.0+）
For componentDidMount
为了 componentDidMount
useEffect(() => {
// Your code here
}, []);
For componentDidUpdate
为了 componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);
For componentWillUnmount
为了 componentWillUnmount
useEffect(() => {
// componentWillUnmount
return () => {
// Your code here
}
}, [yourDependency]);
So in this situation, you need to pass your dependency into this array. Let's assume you have a state like this
所以在这种情况下，你需要将你的依赖传递到这个数组中。假设你有这样的状态
const [count, setCount] = useState(0);
const [count, setCount] = useState(0);
And whenever count increases you want to re-render your function component. Then your useEffectshould look like this
每当计数增加时，您都想重新渲染您的功能组件。那么你useEffect应该看起来像这样
useEffect(() => {
// <div>{count}</div>
}, [count]);
This way whenever your count updates your component will re-render. Hopefully this will help a bit.
这样，每当您的计数更新时，您的组件都会重新渲染。希望这会有所帮助。
回答by markmoxx
You want to use useEffect(), which, depending on how you use the function, can act just like componentDidMount().
您想使用useEffect()，根据您使用函数的方式，它可以像 componentDidMount() 一样起作用。
Eg. you could use a custom loadedstate property which is initially set to false, and switch it to true on render, and only fire the effect when this value changes.
例如。您可以使用loaded最初设置为 false的自定义状态属性，并在渲染时将其切换为 true，并且仅在此值更改时触发效果。
回答by Yangshun Tay
There's no componentDidMounton functional components, but React Hooks provide a way you can emulate the behavior by using the useEffecthook.
没有componentDidMount功能组件，但是 React Hooks 提供了一种可以通过使用useEffect钩子来模拟行为的方法。
Pass an empty array as the second argument to useEffect()to run only the callback on mount only.
将一个空数组作为第二个参数传递useEffect()给仅在 mount 上运行回调。
Please read the documentation on useEffect.
请阅读 上的文档useEffect。
function ComponentDidMount() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('componentDidMount');
}, []);
return (
<div>
<p>componentDidMount: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<div>
<ComponentDidMount />
</div>,
document.querySelector("#app")
);<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>回答by Patrick Hund
Yes, life cycle methods like componentDidMount are only available in class components.
是的，像 componentDidMount 这样的生命周期方法只在类组件中可用。
Class components should not be considered deprecated, even after the advent of hooks, they will remain a substantial part of React.
类组件不应被视为已弃用，即使在钩子出现之后，它们仍将是 React 的重要组成部分。
