使用像useEffect这样的React钩子的componentDidMount、componentDidUpdate和componentWillUnmount生命周期钩子的类似功能是什么？
使用像useEffect这样的React钩子的componentDidMount、componentDidUpdate和componentWillUnmount生命周期钩子的类似功能是什么？
组件安装将空数组作为第二个参数传递给useEffect()，以便仅在装载时运行回调.
function ComponentDidMount() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log('组件安装');
}, []);
return (
<div>
<p>组件安装: {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/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>组件更新更新发生后立即调用组件更新().初始渲染时不调用此方法.useEffect在每个渲染上运行，包括第一个渲染.因此，如果你想有一个严格的类似功能组件更新，你必须使用useRef来确定组件是否安装过一次.如果你想更加严格，可以使用useLayoutEffect()，但它会同步触发.在大多数情况下，useEffect()就足够了.
这answer is inspired by Tholle美元，全归功于他.
function ComponentDidUpdate() {
const [count, setCount] = React.useState(0);
const isFirstUpdate = React.useRef(true);
React.useEffect(() => {
if (isFirstUpdate.current) {
isFirstUpdate.current = false;
return;
}
console.log('组件更新');
});
return (
<div>
<p>组件更新: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<ComponentDidUpdate />,
document.getElementById("app")
);<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>组件将卸载在useEffect的callback参数中返回一个回调，在卸载之前将调用它.
function ComponentWillUnmount() {
function ComponentWillUnmountInner(props) {
React.useEffect(() => {
return () => {
console.log('组件将卸载');
};
}, []);
return (
<div>
<p>组件将卸载</p>
</div>
);
}
const [count, setCount] = React.useState(0);
return (
<div>
{count % 2 === 0 ? (
<ComponentWillUnmountInner count={count} />
) : (
<p>No component</p>
)}
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
ReactDOM.render(
<div>
<ComponentWillUnmount />
</div>,
document.querySelector("#app")
);<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>