ReactuseEffect的理解与使⽤
⽬录
避免重复循环渲染
关于副作⽤的清除
React16.8新增的useEffec这个hook函数就是处理副作⽤的。
所谓的“副作⽤”，举个通俗⼀点的例⼦，假如感冒了本来吃点药就没事了，但是吃了药发现⾝体过敏了，⽽这个“过敏”就是副作⽤。
放到React中，本来只是想渲染DOM展⽰到页⾯上，但除了DOM之外还有数据，⽽这些数据必须从外部的数据源中获取，这个“获取外部数据源”的过程就是副作⽤。
useEffect怎么⽤可以参考官⽹给出的例⼦，这⾥主要针对使⽤useEffect过程中遇到的问题进⾏总结。
避免重复循环渲染
利⽤useEffect接收⼀个数组作为第⼆个参数，将第⼆个参数作为dependence，每次渲染完DOM执⾏副作
⽤函数时都会浅⽐较dependence渲染前后的值是否⼀致，不⼀致就执⾏副作⽤，反之就不执⾏；
如果该dependence为⼀个空数组[]，即没有传⼊⽐较变化的变量，则⽐较结果永远都保持不变，那么副作⽤逻辑就只能执⾏⼀次。
useEffect(() => {
setTimeout(() => {
setCounter(counter + 1);
}, 300)
}, []);
初此之外，如果我们还想通过点击刷新按钮实现获取外部数据但⼜不想造成死循环，那么可以通过⼀个变量作为“开关”，在实现⽬的的同时做到避免循环渲染DOM。
画动图太⿇烦，各位看注释脑补
function App() {  const [count, setCount] = useState(0);  const [loading, setLoading] = useState(true); //
loading作为开关  useEffect(() => {    if (loading) { // 注意这⾥只有当loading为true时才执⾏      setTimeout(() => {        setCount(count + 1);        setLoading(!l  // 第⼀次DOM渲染完成后，loading为true，执⾏副作⽤函数，count值变为1，loading变为false，由于
// 改变了state的值，会update，组件会再次render，但此时loading为false，不会执⾏setTimeout，
// 避免了循环
// 当点击Refresh刷新，loading由上⼀次的false变为了true，函数执⾏⼀次update
// DOM更新完后执⾏useEffect，因为loading已经为true了，所以副作⽤函数可执⾏，count从1变为2，
// loading⼜从true变为false，就这样交替进⾏。。。
return (    <div>      <h3>{count}</h3>      <button        onClick={() => {          setLoading(true);        }}      >        Refresh      </button>    </div>  );}
关于副作⽤的清除
useEffect可以返回⼀个函数来作为清除副作⽤。
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange);
function clear(){
ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange);
}
return clear;
});
这⾥会涉及到useEffect执⾏和销毁的过程：
1. 传⼊props.id = 1
2. 组件渲染
3. DOM渲染完成，执⾏副作⽤函数，返回清除副作⽤函数clear，命名为clear1
4. 传⼊props.id=2
5. 组件渲染
reacthooks理解6. DOM渲染完成，执⾏clear1
7. 副作⽤函数执⾏并返回另⼀个clear函数，命名为clear2
8. 组件销毁，clear2执⾏
由此可推测出副作⽤清除函数的特征：
每次副作⽤执⾏都会返回⼀个清除函数
清除函数会在下⼀次副作⽤函数执⾏之前（DOM渲染完成之后）执⾏
组件销毁也会执⾏⼀次清除函数
从打印出的count值也可以看出，清除函数会在下⼀次副作⽤函数执⾏之前执⾏，即在清除函数⾥的count值是上⼀次缓存的count值：
进⼀步思考，clear1执⾏的时候，访问了props.id，那么这个id值是1还是2呢？
这⾥就涉及到闭包的知识概念了，因为useEffect返回的是个函数，在执⾏时产⽣了⼀个闭包，根据闭包的相关定义，返回的clear函数能访问⾃⾝作⽤域外的变量，当组件第⼀次渲染时传⼊id=1，此时的
clear函数中的props.id值为1。
以上就是React useEffect的理解与使⽤的详细内容，更多关于React useEffect的资料请关注其它相关⽂章！