入門

建立 React 應用程式

Recoil 是 React 的狀態管理程式庫，因此您需要安裝並執行 React 才能使用 Recoil。引導建立 React 應用程式最簡單且建議的方式是使用 建立 React 應用程式

npx create-react-app my-app

npx 是一個隨附於 npm 5.2 及以上版本的套件執行器工具，請參閱 較舊 npm 版本的說明。

如需安裝建立 React 應用程式的其他方法，請參閱 正式文件。

安裝

Recoil 套件載於 npm。若要安裝最新的穩定版本，請執行下列指令

npm install recoil

或者，如果您使用的是 yarn

yarn add recoil

或者，如果您使用的是 bower

bower install --save recoil

RecoilRoot

使用 Recoil 狀態的元件需要 RecoilRoot 出現在父層樹的某個地方。這是一個放置它的好位置，在您的根元件中

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

我們將在下一部分實作 CharacterCounter 元件。

Atom

一個原子表示一個狀態片段。任何組件皆可讀寫原子。讀取原子值之組件會隱式訂閱該原子，因此任何原子更新均會導致訂閱該原子的所有組件重新渲染

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

需要讀取與寫入原子的組件應使用 useRecoilState()，如下所示

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

選擇器

一個選擇器表示一段衍生狀態。衍生狀態是狀態的轉換。您可以將衍生狀態視為將狀態傳遞給純函數的輸出，而該函數會在某種程度上修改給定的狀態

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

我們可以使用 useRecoilValue() 鉤子來讀取 charCountState 的值

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

示範

以下是完成的成品

回音

字元計數0