componentDidMount
传递一个空数组作为第二个参数，
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/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>componentDidUpdate
componentDidUpdate()更新发生后立即调用。初始渲染不调用此方法。
useEffect在每个渲染（包括第一个）上运行。因此，如果要使用严格等同于
componentDidUpdate，则必须使用
useRef确定组件是否已安装一次。如果您想要更严格，请使用
useLayoutEffect()，但它会同步触发。在大多数情况下，
useEffect()应该足够了。
这个答案受到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('componentDidUpdate'); }); return ( <div> <p>componentDidUpdate: {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>componentWillUnmount
在useEffect的callback参数中返回一个回调，它将在卸载之前被调用。
function ComponentWillUnmount() { function ComponentWillUnmountInner(props) { React.useEffect(() => { return () => { console.log('componentWillUnmount'); }; }, []); return ( <div> <p>componentWillUnmount</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>
