@dbeining/react-atom

`Atom.of'、`使用Atom'和`swap'将涵盖绝大多数的使用案例.

减速器? 行动? 汤克斯? 萨加斯? 不,只是"扫荡(原子,新国家)".

这个 useAtom 钩子接受可选 select 函数让组件订阅计算状态。 这意味着该组件只有在返回的值从 select 变化.

useState 很酷,直到你意识到,在大多数情况下,它迫使你通过每个渲染处的道具传递新的函数实例,因为你通常需要包接 setState 函数。 这很难利用 React.memo。例如:

-- -- . .

function Awkwardddd(props) {
  const [name, setName] = useState("");
  const [bigState, setBigState] = useState({ ...useYourImagination });

  const updateName = evt => setName(evt.target.value);
  const handleDidComplete = val => setBigState({ ...bigState, inner: val });

  return (
    <>
      <input type="text" value={name} onChange={updateName} />
      <ExpensiveButMemoized data={bigState} onComplete={handleDidComplete} />
    </>
  );
}

每一次 input 火灾 onChange, (中文(简体) ), ExpensiveButMemoized 必须重新投降,因为 handleDidComplete 与最后通过的判决不完全相同.

反应文件承认这很尴尬 建议利用背景来研究,因为 替代品是超曲折的。 。 。 .

与 react-atom这个问题根本不存在 您可以在组件外定义您的更新功能, 以便它们具有优异的稳定性 .

const state = Atom.of({ name, bigState: { ...useYourImagination } });

const updateName = ({ target }) => swap(state, prev => ({ ...prev, name: target.value }));

const handleDidComplete = val =>
  swap(state, prev => ({
    ...prev,
    bigState: { ...prev.bigState, inner: val }
  }));

function SoSmoooooth(props) {
  const { name, bigState } = useAtom(state);

  return (
    <>
      <input type="text" value={name} onChange={updateName} />
      <ExpensiveButMemoized data={bigState} onComplete={handleDidComplete} />
    </>
  );
}

react-atom 以 TypeScript 写成,这样每个版本都会以正确,高质量的打字方式发布.

虎克会做的 class 部件及其种类(更高级部件、成品相干部件和随子功能相干部件)已过时. react-atom 使得管理共享状态变得容易,只有函数组件和钩子.

import React from "react";
import ReactDOM from "react-dom";
import { Atom, useAtom, swap } from "@dbeining/react-atom";

//------------------------ APP STATE ------------------------------//

const stateAtom = Atom.of({
  count: 0,
  text: "",
  data: {
    // ...just imagine
  }
});

//------------------------ EFFECTS ------------------------------//

const increment = () =>
  swap(stateAtom, state => ({
    ...state,
    count: state.count + 1
  }));

const decrement = () =>
  swap(stateAtom, state => ({
    ...state,
    count: state.count - 1
  }));

const updateText = evt =>
  swap(stateAtom, state => ({
    ...state,
    text: evt.target.value
  }));

const loadSomething = () =>
  fetch("https://jsonplaceholder.typicode.com/todos/1")
    .then(res => res.json())
    .then(data => swap(stateAtom, state => ({ ...state, data })))
    .catch(console.error);

//------------------------ COMPONENT ------------------------------//

export const App = () => {
  const { count, data, text } = useAtom(stateAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Text: {text}</p>

      <button onClick={increment}>Moar</button>
      <button onClick={decrement}>Less</button>
      <button onClick={loadSomething}>Load Data</button>
      <input type="text" onChange={updateText} value={text} />

      <p>{JSON.stringify(data, null, "  ")}</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));