useRecoilValue(state)

返回给定 Recoil 状态的值。

这个钩子会订阅组件，如果 Recoil 状态发生变化，则重新渲染组件。

使用 useRecoilValue_TRANSITION_SUPPORT_UNSTABLE() 以获得对基于 Recoil 状态变异的 React 18 过渡的实验性支持。

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

state: 一个 atom 或 selector

当一个组件想要读取状态而不写入时，建议使用这个钩子，因为这个钩子可以与只读状态和可写状态一起使用。原子是可写状态，而选择器可以是只读或可写。有关更多信息，请参见 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(',')}
    </>
  );
}

示例​

示例