본문의 영상 강좌
지금까지 우리는 이미 몇 가지 작은 프로젝트를 세웠다.이 글에서 우리는 어떻게 정보를 학부모로부터 아이에게 전달하는지 배울 것이다.하지만 우리가 형제자매 사이에서 메시지를 전달해야 한다면 어떤 일이 일어날까.부모 구성 요소에 상태를 만들고 모든 하위 구성 요소에 보낼 수 있지만, 어느 한 부분에서 주요 구성 요소는 다른 곳에 속해야 할 상태로 가득 차게 됩니다.
전역 상태 관리에 들어갑니다. 이것은 단독 파일에 상태 변수를 만드는 방법입니다. 모든 구성 요소는 도구를 사용하지 않고 데이터를 받는 상황에서 이 파일을 가져올 수 있습니다.
본고에서 우리는 Recoil.js을 사용할 것이다. 이것은 React팀의 페이스북 개발자가 만든 라이브러리로 전역 상태 관리를 실현하는 가장 간단한 방법이다.

예기한 결과

Interactive demo

그림 1: 실행할 프로그램.

그림2: 응용 프로그램 차원 구조도.각 구성 요소에 대한 설명을 읽으려면 이미지를 클릭하여 배율을 조정합니다.
노트:

전체 상태가 사방으로 떠다니며 구성 요소 그림에 독립되어 있음을 나타낸다.

상태 파일의 확장자는 .js입니다. 이것은 React 구성 요소가 아닌 일반적인 자바스크립트 파일이기 때문입니다.

우리는 두 개의 전역 상태 변수에 자바스크립트 파일을 사용할 수 있지만, 다른 파일에서 변수를 가져오고 내보내는 방법을 가르쳐 주고 싶습니다.

모든 반충 변수는 서로 다른 파일에 있어도 자신의 유일한 이름을 가져야 한다.

개시하다

역충돌을 사용하려면 다음 단계를 수행해야 합니다.

Install Recoil

Setup App.jsx

Export State Variables

Import State Variables

 

1. 반충 장치 설치

우선 프로젝트 폴더에서 NPM을 사용하여 Recoil을 설치해야 합니다.

npm install recoil

 

2. 응용 프로그램을 설정합니다.jsx

이 단계는 전역 상태 데이터를 어디에서 사용하든지 App.jsx에서 완성해야 한다.

// App.jsx

import { RecoilRoot } from "recoil";

export default function App() {
  return (
    <div className="App">
      <RecoilRoot>
        <h1>Pet shop</h1>
      </RecoilRoot>
    </div>
  );
}

import { RecoilRoot } from "recoil" 역충돌 라이브러리 사용

<RecoilRoot> 글로벌 상태에 액세스해야 할 수 있는 모든 모 피쳐 또는 서브어셈블리를 둘러야 합니다.

 

3. 상태 변수 내보내기

1 상태 파일을 표시했지만 다른 상태 파일에도 적용됩니다.

// state/userData.js

import { atom } from "recoil";

export const petState = atom({
  key: "petState",
  default: "No pet choosen",
});

import { atom } from "recoil": 반충 원자는 자바스크립트Object로 필요한 데이터를 전역 상태 변수로 저장하는 데 사용된다.

export const petState는 이 변수를 다른 파일로 가져올 것이라고 밝혔다.

atom({}) 이 글로벌 상태 변수의 객체를 설정합니다.매개변수는 다음과 같습니다.

key: 이 상태의 유일한 id입니다.혼동을 방지하려면 상수와 같은 이름을 사용하십시오.

default: 이 상태의 초기 값입니다.문자열, 부울 값, 배열, 객체 등

 

4. 상태 변수 가져오기

내용 구성 요소를 보여 드리지만, 프로그램, 눈썹, 꼬리 구성 요소에 적용됩니다.

// components/Content.jsx

// Core
import { useRecoilState } from "recoil";

// Internal
import { countState } from "../state/siteSettings";
import { petState } from "../state/userData";

export default function HeaderBar() {
  // Global state
  const [count, setCount] = useRecoilState(countState);
  const [pet, setPet] = useRecoilState(petState);

  // Method
  function onClear() {
    setPet("");
    setCount(0);
  }

  return (
    <header className="header">
      <span className="pet-choosen">{pet}</span>
      <button onClick={onClear}>Clear choice</button>
    </header>
  );
}

이것은 더 길지만, 우리는 그것을 분석하는 데 시간을 들일 것이다.

import { useRecoilState } from "recoil" 우리는 부분적인 상태를 처리하기 위해 React-use State를 사용하지 않고 전역적인 상태를 처리하기 위해 반충을 사용한다.

import { petState } from "../state/userData" 상태 파일에 생성된 변수를 가져옵니다.

useRecoilState(petState); 우리는 useState로 대체한다useRecoilState.petState는 이전 단계에서 가져온 초기 값입니다.

보시다시피 JSX와 제어 단추의 함수에서useState 갈고리를 사용하는 것과 코드가 같습니다.

결론

다른 전역 상태 관리 라이브러리에 비해 Recoil은 외관과 행동이 React 갈고리와 완전히 같다는 관건적인 장점을 가지고 있다.따라서 그렇게 많이 배우지 않아도 쉽게 섞을 수 있다.
완료된 코드를 보려면 이것link을 열고 분기 전역 상태를 엽니다.

덧읽다

Recoil documentation: 반격 기교를 더 많이 배워라.

Context API: 현재 React의 글로벌 상태 관리 방식.이것은 결코 배우기 어렵지 않지만, 그것은 반충처럼 우아하게 코드를 조직하지는 않는다.

Redux: React에서 전역 상태를 처리하는 원시적인 방법.악몽을 꾸고 싶지 않으면 그것을 클릭하지 마세요.SE 모듈(SDA 학생이 이 내부 농담을 이해하는 것)에 해당하지만 코드 기반이다.

반충 과 반응 을 결합 하다

만약 네비게이션을 처리하기 위해 <BrowserRouter> 가 필요하다면, 반격이 Browser Router를 둘러싸고 있는지, 아니면 반대로 움직이는지는 중요하지 않다.

// Valid
<div className="App">
  <BrowserRouter>
    <RecoilRoot>
      <Switch>
        <Route component={Page} />
      </Switch>
    </RecoilRoot>
  </BrowserRouter>
</div>;

// Also valid
<div className="App">
  <RecoilRoot>
    <BrowserRouter>
      <Switch>
        <Route component={Page} />
      </Switch>
    </BrowserRouter>
  </RecoilRoot>
</div>;

크레디트

표지 사진: 사진 작성자Edgar Chaparro가 Unsplash

비디오 자습서: 작성자:.