reactjs의 컨텍스트 API를 통해 상태를 관리하려면 useMemo가 필요합니까?

reactjs의 컨텍스트 API를 통해 상태를 관리하려면 useMemo가 필요합니까?

react의 컨텍스트 API를 사용하여 응용 프로그램 수준 상태를 관리하는 방법을 설명하는 이 문서를 이해하려고 합니다.단순한 애플리케이션(이 경우는 기본적인 카운터 애플리케이션)의 경우, 다음의 솔루션을 사용합니다.

const CountContext = React.createContext()

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = React.useMemo(() => [count, setCount], [count])
  return <CountContext.Provider value={value} {...props} />
}

콘텍스트를 제공하고 컴포넌트 트리 하단의 컴포넌트에서 사용할 수 있는 다음 후크를 제공합니다.

function useCount() {
  const context = React.useContext(CountContext)
  if (!context) {
    throw new Error(`useCount must be used within a CountProvider`)
  }
  return context
}

질문 사항:

는 왜 그 일이 일어났는지 .useMemo여기에 훅이 필요합니다.여기에는 특별히 많은 계산이 수반되지 않기 때문에 이러한 값을 메모하는 이유를 잘 모르겠습니다.콘텍스트 프로바이더가 다음과 같이 되어 있는 경우에도, 이 기능은 유효하지 않을까요?

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  return <CountContext.Provider value={value} {...props} />
}

뭔가 놓치고 있는 것 같아!!

써야 하는지 아주 요.useMemo된 Context Provider에 to to the 에 값을 때Context Provider오브젝트 또는 다음과 같은 어레이 중 하나로 사용합니다.

return <CountContext.Provider value={{state, setCount}} {...props} />

또는

return <CountContext.Provider value={[state, setCount]} {...props} />

하는 것은 '이러한' 됩니다.CountProvider에 대한 합니다.CountContext.Provider따라서 실제 값이 변경되지 않았더라도 콘텍스트컨슈머는 해당 값에 대한 참조 체크에 실패하기 때문에 다시 렌더링됩니다.

, 그럼 이제 은 필요 , 필요 도 있습니다.useMemo 있느냐에 ContextProvider 당신의 경우, '아예', '아예', '아예', '아예', '아예', '아예', '아예', '아예', '아예', '아예',CountContext를 사용하여 에게 전달하는 입니다.또한 이 상태가 이 상태를 그대로 사용합니다.CountContext 요소의1개입니다.이, 「 Change」를 사용하고 아닌지를 확인합니다.이 경우 를 사용할지 여부를 지정합니다.useMemo반환된 값을 참조한 이후 차이가 없습니다.useMemo됩니다.

, 특정 CountProvider 때문에, 「」가 발생할 가능성이 .CountProvider 재작성,useMemo context 을 피하기 합니다.

setCount를 호출하면 항상 컴포넌트가 다시 렌더링됩니다.

함수에 같은 값이 전달되어도 setCount를 호출하면 항상 재렌더가 발생한다고 생각합니다.

하지만 라인은

const value = React.useMemo(() => [count, setCount], [count])

카운트에 다른 값이 없는 한 setCount 호출을 중지합니다.따라서 재렌더가 감소하고 성능이 향상됩니다.

로그를 내부에 삽입하여 useMemo 사용 여부와 관계없이 컴포넌트가 어떻게 렌더링되는지 확인함으로써 이 이론을 테스트할 수 있습니다.

React.useMemo퍼포먼스 최적화이기 때문에 필요 없습니다.

useMemo를 사용하지 않으면 불필요한 재렌더가 발생한다는 생각은 거짓입니다.컴포넌트 트리 위 어딘가에서 상태가 변화한 후에만 컴포넌트를 재렌더합니다.

다음은 불필요한 재검토의 원인이 되지 않는 증거입니다.https://codesandbox.io/s/stupefied-franklin-5jf5ke?file = / src / App . tsx

유일한 예외는 컴포넌트가 포장이 되어 있는 경우입니다.React.memo()이 경우useMemo소품이나 콘텍스트에 전달되는 가치에 따라 달라집니다.프로바이더는 불필요한 재렌더를 방지할 수 있습니다.

컨텍스트 값을 useMemo로 랩하는 것은 나쁜 방법입니까?아니요, 그렇지 않다고 생각합니다.특히 다른 훅의 의존관계 배열에서 해당 콘텍스트를 사용하거나 메모된 컴포넌트에 제공하는 경우React.memo().

언급URL : https://stackoverflow.com/questions/62230532/is-usememo-required-to-manage-state-via-the-context-api-in-reactjs