UseMoom 및 React를 사용하여 React를 최적화하는 방법비망록

한동안 우리가 걱정해야 할 것은 응용 프로그램이 작동하는 것을 확보하는 것이 아니라 최선의 방법으로 작동할 수 있는지이다.react를 사용할 때, 우리는 응용 프로그램이 최적화되었는지 확인하기 위해 일부 도구를 사용할 수 있습니다.이 문서에서, 나는 어떻게 React를 사용하여 이 점을 실현하는지 보여줄 것이다.memo와useMemo가 연결되어 있습니다.
... 하게 되다
이러한 방법의 사용을 깊이 연구하기 전에 우리는react 구성 요소가 어떻게 다시 나타나는지에 대해 기본적인 이해를 가져야 한다.
react의 구성 요소는 상태와/또는 도구가 변할 때 다시 렌더링됩니다.
모 피쳐 어셈블리가 다시 렌더링될 때마다 서브어셈블리도 다시 렌더링됩니다.아이의 상태/소품이 변하지 않아도.
회상록
우리가 이해해야 할 두 번째 개념은 기억이다. 왜냐하면 그것이 어떻게 반응하는 핵심이기 때문이다.비망록 및 사용 비망록 작업.
기억은 비싼 함수나 조작의 결과/출력을 캐시하고 다음에 같은 입력을 제공할 때 캐시 결과를 되돌려주는 방법이다.
만약 제공된 입력이 이전에 이미 사용되었다면, 이것은 우리가 비싼 계산을 완전히 뛰어넘어 프로그램을 최적화시킬 수 있게 할 것이다.
반응을 보이다.memo와useMemo는 이 개념을 이용하여 각각 구성 요소를 다시 나타내거나 값을 다시 계산해야 하는지 확인합니다.
비망록 사용
UseMoom부터 시작하겠습니다.이것은 react 갈고리입니다. 우리는 기능 구성 요소에서 그것을 사용하여 값을 기억합니다. (특히 비싼 함수에서 온 값)
useMemo에는 두 가지 인자가 있습니다. 기억할 값을 되돌려 주는 함수와 의존항이 있습니다.의존 관계는 기억 값을 다시 계산해야 하는지를 결정하는 변수다.
의존항이 바뀌지 않으면 기억된 값을 업데이트하기 위해 함수를 다시 실행하지 말라는 것이다.의존항은 하나의 그룹에 포함되어 있기 때문에useMemo는 여러 의존항을 가질 수 있습니다.
의존항수 그룹의 의존항만 변경이 있어야만 함수/작업의 실행을 촉발할 수 있음을 주의하십시오.
이제 useMemo가 실행 중인 예시를 보여 드리겠습니다.
우선,useMemo를 사용하지 않는 간단한 응용 프로그램 코드를 작성합시다.

const User = ({ greeting }) => {
  console.log(greeting)
  return (
    <div>
      <p>{greeting}</p>
    </div>
  )
}

인사말 도구에 포함된 문자열만 보여 주는 사용자 구성 요소가 있습니다.이 문자열도 콘솔에 기록됩니다.그게 왜 중요한지 금방 알게 될 거야.
이제 애플리케이션 구성 요소를 정의합니다.

const App = () => {

  const [name, setName] = useState('Michael')

  const greet = () => {
    return `Hello, ${name}`
  }

  const greeting = greet()

  return (
    <div className="App">
      <div>
        <form onSubmit={(event) => {
          event.preventDefault()
          const data = new FormData(event.target)
          setName(data.get('name'))
        }}>
          <input type='text' name='name'/>
          <input type='submit' value='Change name'/>
        </form>
      </div>
      <User greeting={greeting} />
    </div>
  )
}

app 구성 요소는 greet이라는 함수를 포함하고 있으며, 이 함수는 상태의 현재 이름 (기본값 "Michael") 에 따라 인사말을 되돌려줍니다.
우리는greet 함수를 호출하여 계산하는greeting 상수가 있습니다.이것은 사용자 구성 요소에 전달되는 문자열입니다.
제출할 때 프로그램 구성 요소 상태의 이름을 업데이트하는 폼이 있습니다.
우리가 이 프로그램을 실행할 때, 어떠한 이상도 발생하지 않았다.제출 폼은 이름을 업데이트하고 프로그램 구성 요소를 다시 보여 줍니다.이로 인해 인사말이 업데이트되고 마지막으로 사용자 구성 요소가 업데이트된 도구로 다시 표시됩니다.
이 예에서greet 함수는 매우 비싼 함수라고 가정하면 우리의 인사말을 되돌려줍니다.useMemo를 어떻게 이용해서 다시 렌더링할 때마다 그것을 실행하지 못하게 합니까?
우리는 인사말을 다음과 같이 업데이트하여 인사말을 기억할 수 있다.

const greeting = useMemo( () => {
    return greet()
}, [])

현재, 우리는 의존 항목 업데이트 때만 인사말의 값을 계산합니다.
하지만 잠깐만요. 의존항수 그룹은 비어 있어요.이런 상황에서 무슨 일이 일어날까요?
useEffect 갈고리에 익숙하다면,componentDidMount의 기능을 모방하기 위해, 첫 번째 렌더링을 실행할 때 빈 의존항 그룹을 전달합니다.
이것이 바로 이곳에서 발생한 일이다.이 값은 첫 번째 렌더링 시 한 번 계산되며 모든 후속 렌더링에 동일합니다.이름이 몇 번 바뀌어도 인사말의 가치는 변하지 않는다.
이제 그것을 더욱 실제적으로 사용하자.우리는 매번 이름이 바뀔 때마다 인사말을 다시 계산하기를 바란다.그러나 기본적으로 useMemo를 무용지물로 만들 수 있기 때문에 이름 업데이트에 조건을 추가합니다.
커밋된 이름에 "켈빈"문자열이 포함된 경우에만 상태의 이름을 업데이트합니다.그러므로 양식의 onSubmit 함수를 다음과 같이 업데이트합니다.

<form onSubmit={(event) => {
          event.preventDefault()
          const data = new FormData(event.target)

          let name = data.get('name')
          if (name.toLowerCase().includes('kelvin')) setName(name)

          setCount(count + 1)
        }}>
          <input type='text' name='name'/>
          <input type='submit' value='Change name'/>
</form>

현재 우리는 조건부로 이름을 업데이트하기 때문에, 이름에 따라 인사말을 기억하는 것은 의미가 있다. 왜냐하면 제출할 때마다 업데이트되지 않기 때문이다.프로그램 구성 요소가 업데이트되었든 안 되었든 상관없이state에count 변수를 추가했습니다. 이 변수는 폼을 제출할 때마다 증가합니다.
이제 useMemo 후크를 다음과 같이 업데이트할 수 있습니다.

const greeting = useMemo( () => {
    return greet()
}, [name])

여기서 유일한 차이점은 우리가 명칭의 의존 관계를 추가했다는 것이다.인사말은 이름이 바뀔 때마다 다시 계산됩니다.
이 프로그램을 실행할 때, 사용자 구성 요소에서 '켈빈' 을 포함하지 않을 때, 인사말은 바뀌지 않는다는 것을 볼 수 있습니다.이런 상황에서 사람들은 여전히 기억 인사말을 사용하고 있다.
그 컨트롤러를 기억해라.사용자 구성 요소의 로그 문장?컨트롤러를 보면, 기억값을 사용하든, 새 값을 계산하든, 인사말이 출력된다는 것을 알 수 있습니다.
우리는 어떤 실례에서 인사말을 다시 계산하는 것을 막는 것 같지만, 구성 요소는 항상 다시 나타난다.왜 이러지?
답은 간단하다. 도구가 이러한 상황에서 바뀌지 않아도 구성 요소는 다시 렌더링된다. 이것은 단지 부급이 계수 증가량으로 인해 다시 렌더링되기 때문이다.
그러면 서브어셈블리의 렌더링 자체가 비싸고 부모 어셈블리가 다시 렌더링된 경우에도 도구가 변경되지 않았을 때 렌더링을 방지할 수 있도록 하려면 어떻게 해야 합니까?
이것이 바로 우리의 반응이다.비망록이 들어왔다!
반응을 보이다.비망록
앞에서 말한 바와 같이 반응을 하다.설명은 전달된 도구가 변경되지 않는 한 구성 요소가 다시 렌더링되지 않도록 합니다.
이를 위해 사용자 구성 요소를 다음과 같이 업데이트합니다.

const User = React.memo(({ greeting }) => {
  console.log('User component rendered')
  return (
    <div>
      <p>{greeting}</p>
    </div>
  )
})

우리는 이미 리액트로 부품을 쌌다.비망록우리는 또한 로그 문장을 업데이트해서 사용자 구성 요소가 언제 렌더링되는지 알 수 있도록 했다. 단지 더욱 분명하게 하기 위해서이다.
이전 Appcomponents 본문에 다음 문을 추가하여 Appcomponents를 다시 표시할 시기를 나타냅니다.

console.log('App component rendered')

응용 프로그램을 실행하면 페이지에 "Hello, Michael"이 표시되는 것을 알 수 있습니다.켈빈 이외의 이름을 입력해도 상태가 업데이트되지 않습니다.계수는 항상 이전처럼 상태에서 업데이트됩니다.
이번 차이점은 사용자 구성 요소가 컨트롤러 로그에서 보듯이 다시 나타나지 않는다는 점이다.
왜 이러지?네, 이름이 켈빈 이외의 값으로 업데이트되었을 때, 인사말의 값은 업데이트되지 않습니다.count의 값이 업데이트되었기 때문에 프로그램 구성 요소가 다시 나타납니다.
응용 프로그램 구성 요소의 이런 재표시는 하위 구성 요소 사용자에게 영향을 주지 않습니다.도구의 값이 변경되지 않았기 때문에, 메모가 다시 나타나지 못하게 합니다.
이름을 "Kelvin"으로 변경하면, 이번에는 프로그램 상태에서 이름이 업데이트되며, 인사말의 값이 업데이트되어 사용자 구성 요소를 다시 보여줄 수 있음을 알 수 있습니다.
수동 렌더링
우리가 본 바와 같이 반응을 하다.참고는 도구가 변경되지 않았을 때 어셈블리가 다시 렌더링되지 않도록 합니다.
반응을 보이다.memo는 얕은 비교를 사용하여 이전 도구와 다음 도구가 전달된 도구를 비교하여 구성 요소를 다시 렌더링해야 하는지 확인합니다.
만약에 얕은 것이 당신의 요구를 충족시키기에 부족하다면, 도구가 더 큰 응용 프로그램에 매우 복잡한 대상을 포함하기 때문에, 두 번째 선택할 수 있는 파라미터를 전달하여 반응할 수 있습니다.비고: 이전 도구와 다음 도구를 매개 변수로 하는 함수입니다. 구성 요소를 다시 렌더링해야 하는지 수동으로 확인할 수 있습니다.
이를 위해 사용자 구성 요소를 업데이트합니다.

const User = React.memo(({ greeting }) => {
  console.log('User component rendered')
  return (
    <div>
      <p>{greeting}</p>
    </div>
  )
}, (prevProps, nextProps) => {
  if (prevProps === nextProps) return true
  return false
})

구성 요소를 다시 렌더링하기를 원한다면 이 함수는false로 되돌아와야 하고, 다시 렌더링을 건너뛰기를 원한다면 이 함수는true로 되돌아와야 합니다.
게시물How to Optimise React with useMemo and React.memo이 가장 먼저Kelvin Mwinuka에 올라왔다.
만약 당신이 이 글을 좋아한다면, 나의 내용이 발표되기 전에 가능한 한 빨리 방문할 수 있도록 나를 따라오는 것을 고려할 수 있다. (걱정하지 마라. 그것은 여전히 무료이며, 짜증나는 팝업 광고가 없다.)또한 이 문장을 마음대로 평론해 주십시오.나는 너의 생각을 매우 듣고 싶다.