useRecoilState(state)

返回一个元组，其中第一个元素是 state 的值，第二个元素是一个设置函数，当被调用时将更新给定 state 的值。

此钩子将订阅组件以针对请求的 state 中的任何更改重新渲染。

使用 useRecoilState_TRANSITION_SUPPORT_UNSTABLE() 用于基于突变 Recoil state 的 React 18 过渡的实验性支持。

function useRecoilState<T>(state: RecoilState<T>): [T, SetterOrUpdater<T>];

type SetterOrUpdater<T> = (T | (T => T)) => void;

state: 一个 atom 或一个可写 selector。可写选择器是在其定义中同时具有 get 和 set 的选择器，而只读选择器只有 get。

此 API 类似于 React useState() 钩子，只是它接受一个 Recoil state 而不是一个默认值作为参数。它返回一个包含 state 的当前值和一个设置函数的元组。设置函数可以接受一个新值作为参数，也可以接受一个更新器函数，该函数接收先前值作为参数。

这是当组件打算读写 state 时推荐使用的钩子。

在 React 组件中使用此钩子将订阅组件，以便在 state 更新时重新渲染。如果 state 出现错误或正在等待异步解析，则此钩子可能会抛出异常。请参阅此指南。

示例

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

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
});

const tempCelsius = selector({
  key: 'tempCelsius',
  get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({set}, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
});

function TempCelsius() {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit);
  const [tempC, setTempC] = useRecoilState(tempCelsius);

  const addTenCelsius = () => setTempC(tempC + 10);
  const addTenFahrenheit = () => setTempF(tempF + 10);

  return (
    <div>
      Temp (Celsius): {tempC}
      <br />
      Temp (Fahrenheit): {tempF}
      <br />
      <button onClick={addTenCelsius}>Add 10 Celsius</button>
      <br />
      <button onClick={addTenFahrenheit}>Add 10 Fahrenheit</button>
    </div>
  );
}

示例​

示例