今日文章目录

• 前言
• 参考文章

之前提到，useState方法可以让我在component内部操作资料状态。
今天来谈谈另外一个常用到的方法：useEffect。

前言

useEffect 使用时机

这里的Effect指的是「side-effect 副作用」。
也就是说 useEffect是用来处理React component职责以外的额外动作。

(举手提问) React component的职责是什麽？
答：在使用者介面上直接操作资料状态及回传节点。
就是之前说的：实现 相关UI与逻辑 群组化(component)，并回传React element(JSX)。
(补充後面动作：节点透过ReactDOM.render()放入html档，浏览器解析成 DOM tree，然後渲染成网页画面。)

额外动作好比：call api拿资料，直接操作原始DOM(不经过React component)，登入 token...等，不是component的主要职责，但需要执行的动作，都可能使用到 useEffect。

useEffect syntax

useEffect(function,[state1, props2...])

useEffect()接收两个参数：

• function : 执行动作的函式。useEffect()会写在component里面，所以函式内也可以操作state
• [state1, props2...] : 用来比对state或props状态，如果状态有变，执行function，比对项目如果有多组，只要一个有变，function就会执行。

这里要提到两个重要概念：React render 顺序、dependency比对标准

(一) React render 顺序

• 观察render顺序：
  我们利用 console.log() 分别写在三个位置：一进入 component、useEffect()内、JSX内。
  
  显示顺序：
  

可以看到component会先屡行它的主要职责，才进行额外行动：useEffect是在component渲染完後才执行。

• 利用render顺序来判断 : 有无[dependency]，程序执行的情况。

(二) dependency比对标准： Object.is

OK，那如果dependency要比对物件型别呢？

useEffect(() => console.log("useEffect !"),[{id: 1, name: "Joanna"}])

这会出现一个状况：如果物件内的属性改值，但 useEffect()比对物件的位址不变，导致不会执行动作。
如果要解决这样的问题，有几个解决方法：

1. dependency写到 物件.属性 (但属性值要是基础型别才有效)

const [obj, setObj] = useState({id: 1, name: "Joanna"});
useEffect(() => console.log("useEffect !"),[obj.name])

2. 既然useEffect()比对物件的位址，那我改位址可以吧！

const [obj, setObj] = useState({id: 1, name: "Joanna"});
useEffect(() => console.log("useEffect !"),[obj])

// 改值：
setObj({...obj, name: "David"})

参考文章

• React官网 - useEffect
• UseEffect dependency array and object comparison!
• TBD - useEffect dependency comparison