useRecoilValue(狀態)

傳回特定 Recoil 狀態的值。

如果 Recoil 狀態變更，此勾子將訂閱元件以重新呈現。

使用 useRecoilValue_TRANSITION_SUPPORT_UNSTABLE() 體驗基於異變 Recoil 狀態，對 React 18 過渡的實驗支援。

function useRecoilValue<T>(state: RecoilValue<T>): T;

狀態：atom 或 selector

這是推薦的勾子，用於元件打算讀取狀態而不寫入狀態時使用，這個勾子適用於唯讀狀態和可寫入狀態。Atoms 為可寫入狀態，而 selectors 可能為唯讀或可寫入。詳情請參閱 selector()。

在 React 元件中使用此勾子將訂閱元件，在狀態更新時重新呈現。狀態有錯誤或正在非同步解析時，此勾子可能會擲出例外。請參閱這篇指南。

範例

import {atom, selector, useRecoilValue} from 'recoil';

const namesState = atom({
  key: 'namesState',
  default: ['', 'Ella', 'Chris', '', 'Paul'],
});

const filteredNamesState = selector({
  key: 'filteredNamesState',
  get: ({get}) => get(namesState).filter((str) => str !== ''),
});

function NameDisplay() {
  const names = useRecoilValue(namesState);
  const filteredNames = useRecoilValue(filteredNamesState);

  return (
    <>
      Original names: {names.join(',')}
      <br />
      Filtered names: {filteredNames.join(',')}
    </>
  );
}

範例​

範例