Atom

2023年01月12日

柏拉文

越努力，越幸运

一、认识

---

Atom 是状态的单位。它们可更新也可订阅：当 atom 被更新，每个被订阅的组件都将使用新值进行重渲染。它们也可以在运行时创建。可以使用 atom 替代组件内部的 state。如果多个组件使用相同的 atom，则这些组件共享 atom 的状态。

二、语法

---

2.1 创建状态

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

2.2 使用状态

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}