useEffect的使用
componentDidMount()组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
componentWillUnmount ()在此处完成组件的卸载和数据的销毁。
- clear你在组建中所有的setTimeout,setInterval
- 移除所有组建中的监听 removeEventListener
componentDidUpdate组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title id="title">useEffect的使用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
const researchToSelect = React.createElement(() => {
const { useEffect, useRef, useState } = window.React;
const [count,setCount] = useState(0)
useEffect(()=>{
// 相当于 componentDidMount
console.log(document.getElementById('btn'),1)
return ()=>{
// 相当于 componentWillUnmount,在这个阶段，该dom节点将销毁， 下面的不会打印
console.log(document.getElementById('btn'),2)
}
//不打印
console.log(document.getElementById('btn'),3)
},[])
const btnClick = ()=>{
console.log(count)
}
useEffect(()=>{
// 相当于 componentDidUpdate
document.getElementById('num').innerHTML = count
})
return <div className="content">
<button id="btn" onClick={btnClick}>
点击
<span id="num">{count}</span>
</button>
</div>
})
ReactDOM.render(researchToSelect,document.getElementById("example"));
</script>
</body>
</html>