總覽

Recoil 使我們能建立一組資料流的圖，從atom(共享狀態)到selector(pure functions)，放入我們的React元件當中。atom是狀態的最小單位，它可以被訂閱。 selector 可以透過同步/非同步的方式，轉換這些狀態成其他我們需要的狀態。(註:這邊就是指我們昨天提到的 導出資料( derived data ))

Atom

atom 作為最小單位的狀態，它可以被 訂閱 和 更新，當 atom 被更新時，所有訂閱這個 atom 的元件都會被重新渲染、更新畫面。 atom 也可以在執行時(runtime)被建立。 atom 可以取代 React 元件的 local state (如 useState)，當同一個 atom 被許多元件使用時，這些元件是共享這個狀態的。

atom ，可以透過 Recoil 官方提供的API ，atom 這個 function 被建立。

import {atom} from 'recoil';

const counter = atom({
  key: 'myCounter',
  default: 0,
});

atom 需要一個獨立的key，被作為除錯、保存狀態 及 某些可以見到所有atoms 分佈的進階API，請不要把同一個key給兩個不同的 atom ，這是錯誤的。請全域確保這些 key 是獨特的。
(註解：像我們React有時也會用 unique key。 )

list.map(item=>(<li key={item.id}>{item.name}</li>)) 

如同 useState ， atom 也能提供預設值(default value) ，見上方 atom 範例。

如何讀/寫 atom ？使用 Recoil 官方提供的API useRecoilState，它就像是 React 的 useState，但現在這個狀態是可以共享在不同元件中。

function Counter() {
  // 這裡的 useRecoilState 不像 useState 是放入預設值，而是放入我們需要被共享的狀態counter
  // counter 在上方，我們已透過 atom 建立起來，並且給定預設值了。
  const [count, setCount] = useRecoilState(counter);
  const incrementByOne = () => setCount(count + 1);

  return (
    <div>
      Count: {count}
      <br />
      <button onClick={incrementByOne}>Increment</button>
    </div>
  );
}