REACT useEffect的使用和原理

原文：https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
Dan Abramov

const [count,setCount] = useState(0);
 useEffect(() => {
    setTimeout(() => {
		console.log('计数器的值'+count);
    }, 3000);
  });
return(
<>
  <button onClick={() => setCount(count + 1)}>
        点击次数{count}
      </button>
</>
)

理论上来说 count的值只是属于自己要渲染的那次的值：
原文翻译：**为了确保我们已经有了扎实的理解，我们再回顾一下第一次的渲染过程：

React: 给我状态为 0时候的UI。
你的组件:
给你需要渲染的内容:

You clicked 0 times

。
记得在渲染完了之后调用这个effect: () => { document.title = ‘You clicked 0 times’ }。
React: 没问题。开始更新UI，喂浏览器，我要给DOM添加一些东西。
浏览器: 酷，我已经把它绘制到屏幕上了。
React: 好的， 我现在开始运行给我的effect

运行 () => { document.title = ‘You clicked 0 times’ }。
现在我们回顾一下我们点击之后发生了什么：

你的组件: 喂 React, 把我的状态设置为1。
React: 给我状态为 1时候的UI。
你的组件:

给你需要渲染的内容:

You clicked 1 times

。
记得在渲染完了之后调用这个effect： () => { document.title = ‘You clicked 1 times’ }。
React: 没问题。开始更新UI，喂浏览器，我修改了DOM。
Browser: 酷，我已经将更改绘制到屏幕上了。
React: 好的， 我现在开始运行属于这次渲染的effect

运行 () => { document.title = ‘You clicked 1 times’ }。**
总结：每一个组件内的函数（包括事件处理函数，effects，定时器或者API调用等等）会捕获某次渲染中定义的props和state。
在useEffect中

useEffect(()=>{
  //执行语句
},[‘被监视参数’])

被监视参数可以是对象的属性 只针对当前被监视属性

const [data, setData] = useState({data:'测试属性',test:'监测测试'});
  useEffect(() => {
    console.log(data,'data');
  }, [data.test])

改变data.data不会执行console.log
对useEffect有了更深的理解
如果一个函数没有使用组件内的任何值，你应该把它提到组件外面去定义，然后就可以自由地在effects中使用
或者， 你也可以把它包装成 useCallback Hook
核心就是 数据流 同步思想
写项目了 么时间了 回头再看吧