userecoilstate(state)——迹忆客-ag捕鱼王app官网

userecoilstate(state) 返回一个数组，第一个元素是 state 的值，第二个元素是一个 setter 函数，调用该函数时会更新为给定 state 的值。

使用此 hook 会使组件隐式地订阅给定的 state。

function userecoilstate(state: recoilstate): [t, setterorupdater];
type setterorupdater = (t | (t => t)) => void;

• state: 一个 atom 或一个 可写 的 selector。可写的 selector 在其定义的同时具有 get 和 set 函数，而只读 selector 只有一个 get。

本 api 和 react 的 usestate() hook 类似，区别在于 userecoilstate 的参数使用 recoil state 代替了 usestate() 的默认值。它返回由 state 的当前值和 setter 函数组成的元组。setter 函数的参数可以是新值，也可以是一个以之前的值为参数的更新器函数。

当组件同时需要读写状态时，推荐使用该 hook。

在 react 组件中，使用本 hook 将会订阅该组件，并且在 state 更新时重新渲染该组件。该 hook 在 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 (
    

      temp (celsius): {tempc}
      

      temp (fahrenheit): {tempf}
      

      add 10 celsius
      

      add 10 fahrenheit
    
  );
}