入门
atom
const atomState = atom({key: 'xxx',default: xxx,})注意:
- key 必须唯一。用来 debug,持久化等
- 可更新
- 可订阅(atom 变化、组件 re-render)
useRecoilState
const [value, setValue] = useRecoilState(atomState)类似 react 的 useState。不同在于 useRecoilState 可以组件之间共享状态
selector
const selectorData = selector({key: 'xxx',get: ({ get }) => {//get不仅可以获取atom也可以获取其它selectorconst xxx = get(state)// 对xxx进行一系列处理return xxx},})注意:
- selector 是一个 pure function
- 上游 atom 或 selector 更新,自动计算
- 可订阅
- selector 用来获取 state 的派生数据,避免过多 state
- selectorData 是不可变的,只读(配合 useRecoilValue 获取数据,不可使用 useRecoilState)
useRecoilValue
useRecoilValue(atomState)useRecoilValue(selectorData)注意:
- 可以获取 atom 或者 selector 的值
- 类似 useRecoilState 返回数组的第一个值
useSetRecoilState()
const setValue = useSetRecoilState(atomState)注意:
- 组件更新 state,而不使用 state 时使用该 hook
- 类似 useRecoilState 返回数组的第二个值