根据文档:
componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。
componentDidUpdate()
我们可以使用新的useEffect()钩子来模拟componentDidUpdate(),但似乎useEffect()在每次渲染后都被运行,即使是第一次也是如此。如何使它不在初始渲染上运行?
useEffect()
如您在下面的示例中看到的那样,它componentDidUpdateFunction是在初始渲染期间打印的,但componentDidUpdateClass在初始渲染期间没有打印的。
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>
我们可以使用该useRef钩子来存储我们喜欢的任何可变值,因此我们可以使用它来跟踪useEffect函数是否是第一次运行。
useRef
useEffect
如果我们希望效果在与该效果相同的阶段中运行componentDidUpdate,则可以使用useLayoutEffect。
componentDidUpdate
useLayoutEffect
例
const { useState, useRef, useLayoutEffect } = React; function ComponentDidUpdateFunction() { const [count, setCount] = useState(0); const firstUpdate = useRef(true); useLayoutEffect(() => { if (firstUpdate.current) { firstUpdate.current = false; return; } console.log("componentDidUpdateFunction"); }); return ( <div> <p>componentDidUpdateFunction: {count} times</p> <button onClick={() => { setCount(count + 1); }} > Click Me </button> </div> ); } ReactDOM.render( <ComponentDidUpdateFunction />, 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>