Recoil: React? ?? ?? ?????

Recoil? React ??????? ??? ???? ???? ??? ??? ???? React? ?? ?? ????????. React? ?? ????? ???? ????? React? ?? ??? ? ?? ?? ???? ???? ???????. Facebook?? ??? Recoil? ?????? ?? ??? ?? ??? ??? ??? ???? ????? ?? ??? ?? ??? ??? ?? ??? ??? ?? ? ?? ??? ??? ??? ?????.

Recoil? Redux ?? Context API? ?? ?? ?? ?? ???? ???? ???? ??? ???, ?? ?? ??? ??????? ??? ? ?? React ??????? ? ??? ??? ?? ?? ??? ?????.

---

1. ??? ????

Recoil? ???? ?? ????? ??? ???? ??? ???? ? ??? ?? ? ?? ?? ??? ?????.

1. ??

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

?:

import { atom } from 'recoil';

// Create an atom that holds a simple piece of state (counter)
export const counterState = atom({
  key: 'counterState', // Unique ID for this atom
  default: 0, // Default value of the atom
});

• atom? Recoil?? ?? ??? ???? ? ?????. ?? ???? ?? ???? ??? ?? ????.

2. ???

???? ??? ?? ????? ??? ???? ?????. ?? ?? ?? ?? ?? ???? ?? ?? ???? ??? ???? ??? ? ????.

?:

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState', // Unique ID for this selector
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2; // Derive state by doubling the counter
  },
});

• ???? ???? ???? ??? ??? ? ????. ??? ??? get ??? ??? ?? ?? ??? ?? ?? ??? ??? ? ????.

3. ????

React ???????? Recoil? ????? ?? Recoil ?? ????? ???? RecoilRoot? ?? ?? ??? ???? ???.

?:

import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

• RecoilRoot? ?? ???????? Recoil ??? ??? ? ??? ?? ??????.

4. useRecoilState

useRecoilState ??? React? useState? ????? Recoil Atom? ?? ????. ??? ??? ?? ??? ? ????.

?:

import { atom } from 'recoil';

// Create an atom that holds a simple piece of state (counter)
export const counterState = atom({
  key: 'counterState', // Unique ID for this atom
  default: 0, // Default value of the atom
});

• useRecoilState? ???? ?? ??? ?? ?? ????? ? ????.

5. useRecoilValue

???? ???? ?? ???? ?? ??? ?? ?? ?? useRecoilValue? ??? ? ????.

?:

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState', // Unique ID for this selector
  get: ({ get }) => {
    const counter = get(counterState);
    return counter * 2; // Derive state by doubling the counter
  },
});

• useRecoilValue? ?? ?? ???? ?? ???? ??? ??? ?? ??? ?????.

6. useSetRecoilState

??? ??? ????? ?? ?? ?? ?? ?? useSetRecoilState? ??? ? ????.

?:

import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

• useSetRecoilState? ???? ?? ?? ?? ?? ??? ??? ????? ? ????.

---

2. ???? ??

1. ??? ??

Redux? ?? ?? ?? ?? ???? ?? Recoil? ??? ???? ?? ???? ???? ??? ???? ?? ??? ?? ?? ?? ???? ??? ? ??? ???.

2. ???? ?? ??

?? ???? ??? ??? ???? ??? ? ????. ?? ?? ?? ???? ????? ?? ???? ????? ?? ???? ??? ? ????.

3. React??? ???

Recoil? React? ?? ??? ??????? React? ?? ?? ??, ?? ? ???? ????? ???? ? ??? ??? ? ?? ??? ?????.

4. ??? ??

Recoil? ???? ???? ??? API? ?????. Redux? ?? ??, ???, ???? ??? ??? ??? ?? ? ??? ??? ? ????.

5. ???? ??

Recoil? ?? ?? ?? ??(atom ?? ???)? ??? ?? ?? ??? ?? ?????? ?? ??? ??? ????? ? ??? ???. ???? ????? ???? ?? ??? ??? ??? ??????.

---

3. ? ??? ?? ??

??? Recoil? ???? ??? ??? ?? ???? ??? ????.

import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

const Counter = () => {
  const [counter, setCounter] = useRecoilState(counterState);

  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 { useRecoilValue } from 'recoil';
import { doubleCounterState } from './selectors';

const DisplayDouble = () => {
  const doubleCounter = useRecoilValue(doubleCounterState);

  return <p>Double Counter: {doubleCounter}</p>;
};

import { useSetRecoilState } from 'recoil';
import { counterState } from './atoms';

const ResetButton = () => {
  const setCounter = useSetRecoilState(counterState);

  const reset = () => setCounter(0);

  return <button onClick={reset}>Reset Counter</button>;
};

? ??? ???:

• ??? ?? ???? ?? ??(counterState)? ?????.
• Counter ?? ??? useRecoilState? ???? ??? ?? ?? ???????.
• RecoilRoot? ??????? ???? Recoil? ?? ??? ????? ? ?????.

---

4. ??

Recoil? React ??????? ?? ??? ?? ????? ??? ???? ?????. ??? ?? ? ??? ??? ???? ?? ???? ?? ????? ???? ?? ?? ??? ?? ?? ???? ?????. ?? ?? ???? ??? ???? ?????? ?? ??????? ?? ?????.

---

? ??? Recoil: React? ?? ???? ?? ?? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!