Согласно документам:
componentDidUpdate()
вызывается сразу после обновления. Этот метод не вызывается для первоначального рендеринга.
Мы можем использовать новый useEffect()
хук для моделирования componentDidUpdate()
, но похоже, что useEffect()
он запускается после каждого рендеринга, даже в первый раз. Как мне заставить его не запускаться при начальном рендере?
Как вы можете видеть в приведенном ниже примере, componentDidUpdateFunction
он печатается во время первоначального рендеринга, но componentDidUpdateClass
не печатается во время первоначального рендеринга.
function ComponentDidUpdateFunction() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
console.log("componentDidUpdateFunction");
});
return (
<div>
<p>componentDidUpdateFunction: {count} times</p>
<button
onClick={() => {
setCount(count + 1);
}}
>
Click Me
</button>
</div>
);
}
class ComponentDidUpdateClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
componentDidUpdate() {
console.log("componentDidUpdateClass");
}
render() {
return (
<div>
<p>componentDidUpdateClass: {this.state.count} times</p>
<button
onClick={() => {
this.setState({ count: this.state.count + 1 });
}}
>
Click Me
</button>
</div>
);
}
}
ReactDOM.render(
<div>
<ComponentDidUpdateFunction />
<ComponentDidUpdateClass />
</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>
count
?