Jotai: React? ?? ????? ??? ?? ?? ?????

Jotai? React ??????? ?? ???? ?? ?? ????????. ?? ??? ?? ???? ???? ?? ??? ????? ????? ???? ???? ?? ????? ?? ?? ??? ?? ??? ???? ????? ? ????. Jotai? ??? ???? ????? ???? ??? ?????? ??? ???????? ?? ??? React ??????? ??? ?????.

??? API? ?? ?? ??? ?? Jotai? Redux? ?? ? ??? ?? ?? ?????? ??? ??? ?? ?? ?? ??? ???? ????? ?? ?????.

---

1. ??? ?? ??

Jotai? React?? ??? ?? ??? ? ?? ??? ? ?? ?? ??? ??? ??? API? ?????.

1. ??

Jotai? ??? Recoil? ??? ????? ?? ?? ?? ??? ?????. ??? ?? ??? ???? ?? ??? ??? ?? ?? ? ? ????. Atom? ? ????? ?? ???? Jotai ?? ??? ?????.

?:

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• atom? ??? ??? ???? ? ?????. ? ??? ?? React ?? ???? ??? ? ? ????.

2. useAtom

useAtom ??? Jotai?? ??? ?? ???? ?? ?????. ?? ?? ?? ??? ?? ?? ?? ????? ? ????. ?? useState? ???? ?? ????? ?? ?? ?? ??? ???? ??? ????.

?:

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useAtom? Atom? ??? ???? ???? ? ?????. ? ?? ?(counter)? ?? ????, ? ?? ?(setCounter)? ??? ?????? ? ???? ?????.

3. ?? ??

Jotai? ???? ?? ??? ?? ???? ???? ?? ??? ?? ? ????. ?? Recoil? ???? ???? ?? ??? ???? ??? ?? ??? ? ????.

?:

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

• ?? ??? ?? ??? ?? ?? ??? ???? ??? ?? ???? ??? ???? ?????.

4. ?? ??

Jotai? ?? ?? ??? ???? ??? ??? ? ?? ?? ??? ?????. ?? ?? ?? ?? ? ??? ???? ?? ?? ??? ?? ???? ??? ? ????.

?:

import { atom } from 'jotai';

// Create an atom for a counter state
export const counterAtom = atom(0); // The default value is 0

• ? ??? ???? ?? ??? ??? ??? API ???? ??? ?? ???? ??? ? ????.

---

2. ??? ??? ??

1. ???? ?????

Jotai? ?? ?? API ??? ???? ????? ??? ???????. ?? ???? ??? ?? ??? ??? ???? ???? ? ??? ??? ? ????.

2. ??

Jotai? ?? ??? ???? ?? ??? ?? ??? ??? ? ?? ????? ??? ??? ?????. ?? ?? ?? ?? ??? ?? ??? ??????? ?? ???? ????? ?????.

3. ??? ??

Jotai? ???? ??????? ??? ???? ??? ? ????. Atom? ????? ???? ???? ???? ?? ??? ?? ?? ?? ??? ? ????.

4. ???? ????

Jotai? ?? ?? ?? ??? ?? ????? ?? ??? ?? Atom? ???? ?? ??? ?????? ?? ???? ??????.

5. ???? ???

Jotai? ?? ??? ?? ?????? ??? ?? ?? ??? ? ????. ?????? ??? ??? ??? ???? ?? ?? ???? Atom? ?? ? ???? ????? ???? ??????.

---

3. Jotai ?? ?? ??

??? Jotai? ???? ?? ??? ?? ????.

import { useAtom } from 'jotai';
import { counterAtom } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useAtom(counterAtom);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

import { atom } from 'jotai';
import { counterAtom } from './atoms';

// Create a derived atom
export const doubleCounterAtom = atom((get) => {
  const counter = get(counterAtom); // Get the value of the counter atom
  return counter * 2; // Derive new value
});

import { atom } from 'jotai';

export const counterAtom = atom(
  0, // Initial value
  (get, set, update) => {
    // Atom effect: run a side effect when the counter is updated
    console.log('Counter updated:', update);
    set(counterAtom, update); // Update the state of counterAtom
  }
);

?? ??:

• Atoms ???(counterAtom)? ??? ?????.
• useAtom? Counter ?? ?? ???? ?? ?? ?? ?????? ? ?????.
• setCounter? ??? ??? ? ??? ??? ???????.

---

4. ???? ???? ??

Jotai? ??? ?? ??? ??? ?????.

• ????? ???? ?? ?? ???? ?????.
• ?? ???? ??? ???? ????.
• ?? ???? ?? ?? ????? ??? API? ?????.
• ??? ???? ????? ?? ??? ??? ??? ????? ???? ????.

????? ??? Redux? ?? ??? ?? ?? ???? ???? ??? ??? Jotai? ???? ??? ??? ?????.

---

5. ??

Jotai? ?? ??? ?????? ??? ?? ?????? ??? ?? ?? ????????. ??? API, ?? ??? ? ???? ?? ??? ?? Jotai? ???? ???? ?? ?? ???? ?? React ????? ??? ?????.

---

? ??? Jotai: React? ?? ???? ??? ?? ?? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!