Day 11 - 那个很常用到的 useEffect

如果有错误，欢迎留言指教~ Q_Q

先说说什麽是 side effect ?

就是不在主要的程序执行顺序上~~ 在浏览器 render 之後才会执行

像是更新取得资料或操作画面上的 Dom 做些动态效果

而写的这些事情 function 我们将其称为「effect」

在 component render (DOM 更新之後)，才会执行的这些 effect

useEffect: component 在 render 之後做的事情 (side effect)

如果你比较熟悉生命周期，那可以把 useEffect 当作 componentDidMount，componentDidUpdate，与 componentWillUnmount 的组合

但把 effect 想成发生在「render 之後」比较简单，而不要考虑这时是「mount」还是「update」

在 class component 里，无论是 mount 或是 update，你需要在两个地方维护同一份程序码，虽然你可以写个共用的 function ，但你还是必须在两个地方 call function

  // 换一下范例好了
  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

用 useEffect 就可以写一次就好了~
function 就会在 render 後执行

  // 换一下范例好了
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

在 useEffect 里 return function -> 清除

在生命周期里，会在 componentDidMount 中设定好初始要做的事情
然後在 componentWillUnmount 中把它清除释放掉

那在 Hook 里面，我们该怎麽做呢?

我们在 useEffect 中 return 执行清除的 function

这使我们可以把 Mount、Update、Unmount 的逻辑都放在一起了~

因为它们都属於同一个 effect！

useEffect(() => {
let update;

if (updateTab) {
  update = setInterval(() => {
    cronFetch(updateTab);
  }, UPDATE_TIME);
}

// 释放掉吧！事件移除、取消绑定
return () => clearInterval(update);
}, []);

有什麽情况会让 useEffect 知道何时该执行呢？

元件因为状态(state/props)改变了，触发 useEffect 产生了什麽效果

1. 第一次 render component
2. 当 state 更新後的 render

useEffect(()=>{
    // 做 data 变化後，要做的事情
    // 绑定事件
    alert('新增成功')

    // 事件移除
    return () => {
        // 取消绑定 removeEventListener
    } 
},[data]);
// 当依赖的 state 的 data 有变动，useEffect 就会执行
    

useEffect 的 dependencies: 一组 array []

useEffect 带着两组参数

第一个是执行的 function

第二个则是该 effect 所依赖的值 array -> 决定要侦测谁才触发 effect

当遇到什麽事情，这个 array list 有变化时(也可能是空值)，就会去执行上面的 function

1. 当 [] 没有任何值: 只有第一次会执行，因为没有值可以参考变化了 → 模拟 didmouont

useEffect(()=>{
    console.log('只有第一次 render 会执行')
},[]);

2. 当 [] 带些参考值: 当参考的值改变了就会执行，包含第一次 render

https://codesandbox.io/s/useeffect-r35sw

import { useState, useEffect } from "react";

export default function App() {
  const [data, setData] = useState("");
  const [value, setValue] = useState("!");

  useEffect(() => {
    console.log(data);
  }, [data]);

  return (
    <div className="App">
      <button
        onClick={() => {
          console.log("click");
          setData(new Date());
        }}
      >
        click
      </button>
    </div>
  );
}

3. 当没有 [] : 每次 render 都会执行，包含第一次 render

useEffect(()=>{
    console.log('每次 render 都会执行')
});

useEffect 的 dependencies 注意事项

1. dependencies[] 里面，要放 useEffect function 有用到的值: props 或 state
2. dependencies[] 的值，不要是会在 useEffect 里面改动他，不然容易会无限回圈
3. 建议 dependencies 不要放 object{}、list[]，而是用 primative type: number、boolean、string

可以有很多 useState，也可以有很多的 useEffect

如果 dependencies array 彼此之间没有相关的话，就拆分不同的 useEffect 吧

要多少 Effect 就多少 Effect ~~~

把逻辑相同的放在一起即可!

ref:

1. https://zh-hant.reactjs.org/docs/hooks-effect.html