Recoil 是 React 的狀態(tài)管理庫(kù)

Recoil 是 React 的狀態(tài)管理庫(kù)，因此你需要將 Recoil 安裝到 React 項(xiàng)目中才能使用。創(chuàng)建 React 項(xiàng)目最方便且推薦的方式是使用 Create React App：

npx create-react-app my-app

Recoil 軟件包已經(jīng)發(fā)布到 npm 上了。要安裝 Recoil 的最新版本，請(qǐng)執(zhí)行如下命令：

npm install recoil

對(duì)于使用 Recoil 的組件，需要將 RecoilRoot 放置在組件樹(shù)上的任一父節(jié)點(diǎn)處。最好將其放在根組件中：

import React from 'react';import {  RecoilRoot,  atom,  selector,  useRecoilState,  useRecoilValue,} from 'recoil';
function App() {  return (    <RecoilRoot>      <CharacterCounter />    </RecoilRoot>  );}

一個(gè) atom 代表一個(gè)狀態(tài)。Atom 可在任意組件中進(jìn)行讀寫(xiě)。讀取 atom 值的組件隱式訂閱了該 atom，因此任何 atom 的更新都將導(dǎo)致訂閱該 atom 的組件重新渲染：

const textState = atom({  key: 'textState', // unique ID  default: '', // default value});

在需要向 atom 讀取或?qū)懭氲慕M件中，應(yīng)該使用 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>  );}

Recoil 是 Facebook 開(kāi)源的 React 狀態(tài)管理庫(kù)，目前處于實(shí)驗(yàn)性階段。Recoil 是 Hooks 組件的狀態(tài)管理。不能在類(lèi)組件里面使用。使用 useHooks 讀寫(xiě)狀態(tài)和訂閱組件。

總結(jié)：從 Recoil 的源碼中，可以了解到其通過(guò)訂閱和更新的分離，確保最小粒度的渲染，以及最小化了數(shù)據(jù)的單位，利用 selector 產(chǎn)生的派生值進(jìn)行緩存，提高了計(jì)算的效率。