React의 전역 및 로컬 상태

전방 응용 프로그램 개발과 관련될 때 상태와 상태 관리는 가장 흔하고 흥미로운 화제인 것 같다.따라서 모든 사람들이 가장 효과적이고 두드러진 방식으로 응용 프로그램 상태를 관리하는 것을 추구하고 있다...그래요?
그러나 나는 국가 관리계의 대가가 아니다.예제를 통해 다음과 같은 기본 개념을 익히고 싶습니다.

주

전역상태

현지 정부😎)

그 밖에 나는 또 말했다.

은 언제 전역과 국부 상태를 사용합니까?

국가 관리에 대한 보편적인 오해

국가

왜 우리는 국가가 필요합니까?상태는 우리 응용 프로그램이 행동을 제어하기 위해 저장한 현재 데이터입니다.예를 들어, 확인란이 열려 있거나 닫혀 있으면 데이터(부울 값)가 저장됩니다.

글로벌 상태

전체 국면은 응용 프로그램의 모든 요소/구성 요소가 우리의 상태에 접근할 수 있다는 것을 의미한다.그러나 중요한 사실은 모든 응용 프로그램을 오염시켰다는 것이다. 왜냐하면 모든 구성 요소에 접근할 때 메아리가 울리기 때문이다.

야수를 풀어라!

이 문제를 설명하기 위해 React와 Redux로 간단한 카운터를 만듭니다.

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { inc } from './actions'

export const Counter = () => {
  const dispatch = useDispatch()
  const count = useSelector(store => store.counter.count)

  return (
    <>
      <h1>The count is: {count}</h1>
      <button onClick={() => dispatch(inc())}>Increment</button>
    </>
  )
}

만약 내가 응용 프로그램 어딘가에서 이런 일을 한다면:

<>
  <Counter />
  <Counter />
</>

네 말이 맞다.두 카운터는 동일한 계수를 표시합니다.
useSelector 갈고리를 통해 우리는 이전에 응용 프로그램에서 설명한 전역 저장소에 저장된 데이터에 접근하고 있습니다.따라서 상점은 다음과 같이 보일 수 있다.

{
  counter: {
    count: 0
  }
}

두 계수기가 같은 숫자를 표시하는 것은 명백하다. 왜냐하면 그들은 같은 상태를 반영하기 때문이다

변혁의 바람

글로벌 스토리지에 여러 개의 계수를 저장합니다.우리는 이렇게 해야 한다.
매장 구조 변경:

{
  counters: [{ count: 0 }, { count: 0 }]
}

변경 Counter:

export const Counter = ({ part = 0 }) => {
  const dispatch = useDispatch()
  // Now it selects just one of counters
  const count = useSelector(store => store.counters[part].count)

  return (
    <>
      <h1>The count is: {count}</h1>
      {/*We'll also need to change our action factory and reducer */}
      <button onClick={() => dispatch(inc(part))}>Increment</button>
    </>
  )
}

마지막:

<>
  <Counter />
  <Counter part={1} />
</>

성공했어!store,reducer,component를 변경하고 part 속성을 Counter에 수동으로 전달...
뭐가 틀려요?

현명하게 무기를 선택하다

저는 MobX의 슈퍼 팬입니다.MobX 팀은 JavaScript를 구부리는 데 있어서 매우 잘하여 다음과 같은 반응을 얻을 수 있습니다.

import React from 'react'
import { observable } from 'mobx'
import { observer } from 'mobx-react'

const counter = observable({ count: 0 })

const Counter = observer(() => (
  <>
    <h1>The count is: {counter.count}</h1>
    <button onClick={() => counter.count++}>increment</button>
  </>
))

와, 정말 예뻐 보여요!
또한 여러 개의 카운터가 있습니다.

const counter = observable({ count: 0 })
const counter2 = observable({ count: 0 })

// counter is now a prop:
const Counter = observer(({ counter }) => (
  <>
    <h1>The count is: {counter.count}</h1>
    <button onClick={() => counter.count++}>increment</button>
  </>
))

다음 단계:

<>
  <Counter counter={counter} />
  <Counter counter={counter2} />
</>

우리는 최종적으로 얻은 코드가 더 적지만, 여전히 모든 구성 요소에 수동으로 상태를 전달해야 한다🤦‍♀️

지방정부

위의 예는 어리석어 보이지만 문제는 진실이다. 지방정부가 왜 필요한지 보여준다.국부 상태는 우리가 국부에서 정의한 상태가 아니다.그 목표는 구성 요소에 데이터 흐름을 봉인하는 것이다.

const Counter = () => {
  const [count, setCount] = useState(0)
  const incrememt = () => setCount(count => count + 1)

  return (
    <>
      <h1>The count is: {count}</h1>
      <button onClick={increment}>increment</button>
    </>
  )
}

봐라!카운터는 더 이상 상태를 공유하지 않습니다!

<>
  <Counter />
  <Counter />
</>

지방정부의 어두운 본질

슬프게지방정부는 관리와 조정이 더 어려운 것 같다.또한 관리가 좋지 않으면 React 응용 프로그램의 성능에 영향을 줄 수 있습니다.여러 레벨의 상태를 아래로 전달하고 상단 구성 요소의 한 위치에서 상태를 변경하면 가상 DOM의 모든 하위 구성 요소가 다시 연결됩니다.그것 또한 구성 요소를 한데 묶어 그것들의 확장성을 떨어뜨린다.Redux는 상태를 구성 요소의 생명 주기와 I/O와 분리합니다. 다른 한편, 상태 구성 요소는 더욱 모듈화된 것 같습니다. 상태 모순이 있습니까?아니요. 만약 응용 프로그램이 더욱 복잡해진다면, 전 세계에서든 로컬에서든 일은 더욱 긴밀해지기 시작하고, 그것들을 분리하기 더욱 어려워집니다.

로컬 및 글로벌 상태

주 의 국부성 이나 전체성 을 유지하는 것 은 공유 여부 가 아니라 봉인 여부 이다

어떤 솔루션 선택

Redux와 MobX와 같은 성숙한 관리자는 시간여행 같은 도구를 지원합니다( mobx-state-tree 참조). 이것은 디버깅을 즐겁게 합니다.그러나 그것은 대가의 군더더기를 덧붙인다. 모두가 알다시피 그것은 매우 지루하다. 그것을 사용할 때 너는 반드시 규칙을 준수해야 한다.그것은 반드시 대형 프로젝트에 쓰일 것이다.작은 응용 프로그램에서 Redux를 계속 사용한다면. redux-toolkit - Redux 템플릿 파일을 줄이거나 다른 Redux 패키지를 검색하는 데 사용되는 공식 도구를 찾아보십시오.Immer은 아주 좋은 쓰기 감축기의 라이브러리이다.나는 국가 지위를 높이는 단도직입적인 방식을 좋아한다.Hookstate 가볼 만하다, 많은 도서관들이 네가 그것들을 발견하기를 기다리고 있다

효과기 본받지 마라

내가 말하고 싶은 것은 네가 코드를 인터넷의 예와 똑같이 써서는 안 된다는 것이다.만약 그들이 사물이 어떻게 작동하는지 보여주고 싶다면, 그들은 더 구체적인 것을 희생할 수도 있다.이 문서에서 Redux Counter을 가져오고 사용자 정의 갈고리를 작성합니다.

const useCounter = (part = 0) => {
  const dispatch = useDispatch()
  const count = useSelector(store => store.counters[part].count)
  const increment = () => dispatch({ type: 'increment' })
  return [count, increment]
}

우리의 Counter은 다음과 같이 변했다.

export const Counter = ({ part = 0 }) => {
  const [count, increment] = useCounter(part)
  return (
    <>
      <h1>The count is: {count}</h1>
      <button onClick={increment}>Increment</button>
    </>
  )
}

이렇게 해서 우리는 대부분의 상태 논리를 구성 요소 밖으로 옮겼다.갈고리는 구성 요소와 유사한 함수입니다.따라서 구성 요소를 갈고리로 분리한 다음 함수를 사용한 것처럼 조합하십시오.

보편적 오해

Redux는 너무 지루해서 엉망진창인 도구입니다.

Redux는 거칠어요. - 맞아요.그것은 코드 예시로 당신을 끌어들이기 위해서가 아니라 투명한 데이터 흐름을 제공하기 위해서입니다

컨텍스트 API는 Redux(또는 다른 상태 관리자)

을 대체할 수 있습니다.
컨텍스트 API 자체가 상태 관리자가 아닙니다.실제로 그것을 이용해서 이 목적을 달성하려면 이교도처럼 모든 관리 업무를 스스로 해야 한다.이것은 아직 부족한 것 같다. 몇 개의 상태 관리자와 달리, 다시 렌더링하는 것을 최적화하지 못할 것이다.반대로 그것은 불필요한 재렌더링을 초래하기 쉽다. 편의 위대한 문장 얻기

컨텍스트 값

을 분해하면 컨텍스트 API로 인한 렌더링을 피할 수 있습니다
아니오제발, 그 일을 생각하기 전에.Redux 관리자가 작성한 this 게시물 읽기

컨텍스트 API는 아래쪽(또는 위로) 전송 상태

에 사용
사실은 상하문 API는 하나의 도구 전달 해결 방안일 뿐이다.이러한 보편적인 오해의 근원은 각종 라이브러리가 상하문을 유사한 목적, 예를 들어 주제 상태를 전달하는 데 사용한다는 것이다.그러나 주제는 가끔 바뀌고, 주제의 변화는 보통 전체 응용 프로그램을 다시 시작합니다.

MobX 사용자 연습 복도 교육

🙊

이것 결론

나는 이 부분이 매우 번거롭다는 것을 인정하지 않을 수 없다.제가 건의를 좀 해야 하나요?나는 이 일에 관한 글을 많이 읽었는데, 나는 해결해야 할 복잡한 문제라고 생각한다.그래서 나는 단지 묻고 싶다. 당신은 React에서 상태 관리의 현황이 어떻다고 생각합니까?당신이 현재 이 문제를 해결하는 방법은 무엇입니까?