react-hooks知识梳理—2.useEffect

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;

思考一下，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变化就会执行

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

 

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;

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

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不允许放在条件语句中

下面这种会报错

注意下面这种也不可以，不允许返回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;

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

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

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