react-hooks知识梳理—2.useEffect

青旅半醒 2022-10-31 01:36 213阅读 0赞

### 1.useEffect副作用操作 ###

useEffect可以进行一个副作用的操作，比如请求数据，看下面的代码

import React, { useState, useEffect } from 'react';
    
    const Fetch = () => {
      const [result, setResult] = useState(null);
    
      useEffect(() => {
        fetch('./index.html').then(res => res.text()).then(res => {
          console.log('打印————');
          setResult(res);
        })
      })
    
      return (
        <div>
          结果: {result}
        </div>
      )
    };
    
    function UseEffect() {
      return (
        <div className="App">
          <Fetch />
        </div>
      );
    }
    
    export default UseEffect;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

思考一下，fetch...直接放在Fetch组件内部，而不是用useEffect包裹起来，可以用吗？如下所示

import React, { useState, useEffect } from 'react';
    
    const Fetch = () => {
      const [result, setResult] = useState(null);
    
      fetch('./index.html').then(res => res.text()).then(res => {
        console.log('打印————');
        setResult(res);
      })
    
    
      return (
        <div>
          结果: {result}
        </div>
      )
    };
    
    function UseEffect() {
      return (
        <div className="App">
          <Fetch />
        </div>
      );
    }
    
    export default UseEffect;

运行了一下，是可以的

但是！

理论上可以，useeffect本身是一个副作用，直接在函数里面进行这样的一个副作用，问题是很大的。因为组件随时都有可能去更新，比如副组件的更新会导致子租件更新，或者内部一些状态的更新导致组件的变化，或者props的变化等等。每一次更新，这些东西（fetch里面）都是要再次执行的，这样肯定不行啊。

所以上面console.log打印的次数是7次，放在useEffect里面只会打印2次。

这个是为什么呢？

**useEffect(()=>\{\})**

在组件每一次更新的时候都会去执行，第一次更新是初始的渲染（相当于didmount），第二次是setResult更新完了之后渲染(相当于didUpdate)

**useEffect(()=>\{\},\[\])**

这样写只会执行一次，后面不会再执行（相当于didmount）

### 2.**useEffect(()=>\{\},\[param\])** ###

1）下面这种是两次，因为result变化就会执行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

2）如果有多个参数，只要有一个变了，都会触发里面的执行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

### 3.useEffect实现定时器 ###

1）想实现一个定时器的效果，每0.5s count加1

import React, { useState, useEffect } from 'react';
    
    const Fetch = () => {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        setInterval(() => {
          setCount(count + 1 );
        }, 500);
      }, []);
    
      return (
        <div>
          count: {count}
        </div>
      )
    };
    
    function UseEffect() {
      return (
        <div className="App">
          <Fetch />
        </div>
      );
    }
    
    export default UseEffect;

但是执行一下，加了1就不动了

因为useEffect有一个特性是catpurrvalue,，就是没有任何依赖的情况下，会捕获初始传进来的值，后面不会在变化。所以看下面控制台里面每次打印都是0

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

2）加上依赖

useEffect内部使用了任何的状态或者变量，一定要去添加依赖，当依赖发生变化的时候，useEffect会把他的回掉函数做一下卸载，执行一个新的useEffect，现在加一个依赖看看

import React, { useState, useEffect } from 'react';
    
    const Fetch = () => {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        setInterval(() => {
          console.log(count);
          setCount(count + 1 );
        }, 500);
      }, [count]);
    
      return (
        <div>
          count: {count}
        </div>
      )
    };
    
    function UseEffect() {
      return (
        <div className="App">
          <Fetch />
        </div>
      );
    }
    
    export default UseEffect;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

结果是变化了，但是变化的很快，这是为什么呢？

3）及时清理定时器

没有及时清理setInterval,导致有很多定时器，所以打印很快。

需要在useEffect里面加一个retuen的函数，用来清理定时器。这个函数是在依赖项发生变化的时候会执行，也就是count从0到1的时候会执行。

import React, { useState, useEffect } from 'react';
    
    const Fetch = () => {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        const timer = setInterval(() => {
          console.log(count);
          setCount(count + 1 );
        }, 500);
        return () => clearInterval(timer);
      }, [count]);
    
      return (
        <div>
          count: {count}
        </div>
      )
    };
    
    function UseEffect() {
      return (
        <div className="App">
          <Fetch />
        </div>
      );
    }
    
    export default UseEffect;

按照上面的写每一次依赖项发生变化的时候return里面的就会被执行，这样执行就正常

### 2. useEffect不允许放在条件语句中 ###

下面这种会报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5][]

注意下面这种也不可以，不允许返回null

import React, { useState, useEffect } from 'react';
    
    const Fetch = () => {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        const timer = setInterval(() => {
          console.log(count);
          setCount(count + 1 );
        }, 500);
        return () => clearInterval(timer);
      }, [count]);
    
      if(count > 5) {
        return null;
      }
    
      return (
        <div>
          count: {count}
        </div>
      )
    };
    
    function UseEffect() {
      return (
        <div className="App">
          <Fetch />
        </div>
      );
    }
    
    export default UseEffect;

继续看，发现这种写法也不可以

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6][]

但是上面的并没有用在条件语句里面啊，只是在后面，为啥不可以？

答：react hooks本质上会把所有的hooks当成一个链表存储在一起，如果有if语句，让组件提前结束，那么这个hooks就不能添加到链表里面，到了下一轮有count满足条件了，这样状态就发生错乱，详细看源码吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20221024/73a56bdcd4b34bfbb058898163f366ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20221024/48b1ea208f6740cfa1488ba46da93166.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20221024/613333926c1e488ea8bfe146777f7255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20221024/48ced171f1bf4bffbc686261d57ae50c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20221024/eb7b2b2a7e484896b02b42a0c6486ba6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 5]: /images/20221024/8a176b993ee24c80b770c02276d46a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 6]: /images/20221024/1a3cf889e2304775a146f01fcb4eb228.png