React 응용 프로그램에서 usestate ()로 성능을 최적화합니다

usestate ()는 리 렌즈 및 업데이트에 미치는 영향으로 인해 React App 성능을 최적화하는 데 중요합니다. 최적화하려면 : 1) Usecallback을 사용하여 기능을 메모하고 불필요한 재 렌더를 방지하십시오. 2) 비싼 계산을 캐싱하는 데 USEMEMO를 사용하십시오. 3)보다 집중된 업데이트를 위해 상태를 작은 변수로 나눕니다. 4) setstate와 함께 기능적 업데이트를 사용하여 비동기 상태 변경을 처리하십시오. 5) 불필요한 경우 아동 구성 요소의 재 렌즈를 방지하기 위해 React.Memo를 적용하십시오.

React Applications의 성능을 최적화 할 때 useState() 중요한 역할을합니다. 왜 useState() 에 초점을 맞추는 이유는 무엇입니까? 답은 편재성과 앱의 성능에 미칠 수있는 잠재적 영향에 있습니다. useState() 상태를 관리하기위한 후크가 아닙니다. React가 재 러더 및 업데이트를 처리하는 방법을 이해하는 게이트웨이이며, 이는 응용 프로그램의 응답 성과 효율성에 직접적인 영향을 미칩니다.

useState() 의 세계로 뛰어 들고 반응 앱을 과급하기 위해 힘을 활용할 수있는 방법을 살펴 보겠습니다. 나는이 길을 따라 가서 조정하고 튜닝했으며, 그 과정에서 겪지 않은 덜 명백한 트릭과 함정을 공유하게되어 기쁩니다.

useState() 와 함께 작업 할 때 불필요한 재 렌더를 트리거하는 함정에 빠지기 쉽습니다. 나는 내 앱이 부진한 프로젝트를 기억하며, 약간의 파기 후 간단한 상태 업데이트가 전체 구성 요소 트리에 걸쳐 수많은 렌즈 캐스케이드를 유발한다는 것을 깨달았습니다. 국가 관리의 중요성에 대한 모닝콜이었습니다.

useState() 최적화하려면 RECT가 구성 요소를 다시 렌더링하기로 결정하는 방법을 이해해야합니다. useState() 호출되면 구성 요소의 재 러너를 예약합니다. 조심하지 않으면 이로 인해 성능 병목 현상, 특히 중첩 구성 요소가 많은 복잡한 응용 프로그램에서 발생할 수 있습니다.

다음은 일반적인 함정과 피하는 방법을 보여주는 코드 스 니펫입니다.

 import React, {usestate, usecallback} 'react';

함수 parentComponent () {
  const [count, setCount] = usestate (0);

  // usecallback이 없으면이 기능은 모든 렌더마다 재현됩니다.
  const handleIncrement = () => {
    SetCount (카운트 1);
  };

  반품 (
    <div>
      <childcomponent onincrement = {handleIncrement} />
      <p> 수 : {count} </p>
    </div>
  );
}

기능 childcomponent ({onincrement}) {
  <button on click = {onincrement}> 증분 </button>;
}

이 예에서, handleIncrement 는 모든 ParentComponent 의 렌더링에 대해 재생성되며, 이는 ChildComponent 의 불필요한 재 렌즈로 이어질 수 있습니다. 이를 최적화하기 위해 useCallback 사용할 수 있습니다.

 import React, {usestate, usecallback} 'react';

함수 parentComponent () {
  const [count, setCount] = usestate (0);

  // USECALLBACK을 사용하면이 기능이 메모화되었습니다
  const handleIncrement = usecallback (() => {
    setCount (prevCount => prevCount 1);
  }, []); // 빈 종속성 배열은 한 번만 생성되었음을 의미합니다

  반품 (
    <div>
      <childcomponent onincrement = {handleIncrement} />
      <p> 수 : {count} </p>
    </div>
  );
}

기능 childcomponent ({onincrement}) {
  <button on click = {onincrement}> 증분 </button>;
}

useCallback 사용함으로써 우리는 handleIncrement 메모 화하여 의존성이 변경 될 때만 재현되도록합니다. 이것은 ChildComponent 의 불필요한 재 렌즈를 방지합니다.

또 다른 최적화 기술은 useMemo 사용하여 고가의 계산을 메모하는 것입니다. 구성 요소가 상태를 기반으로 한 계산을 수행하는 경우 useMemo 사용하여 결과를 캐시 할 수 있습니다.

 import React, {usestate, usememo} 'react';

함수 ExpensiveComponent ({data}) {
  const [필터, setfilter] = usestate ( '');

  // 필터링 된 데이터를 메모 화합니다
  const filterddata = usememo (() => {
    return data.filter (item => item.name.includes (필터));
  }, [데이터, 필터]);

  반품 (
    <div>
      <입력 값 = {filter} onchange = {e => setFilter (e.target.value)} />
      <ul>
        {filterddata.map (item => (
          <li key = {item.id}> {item.name} </li>
        ))}
      </ul>
    </div>
  );
}

이 예에서 useMemo data 또는 filter 변경 될 때만 필터링 작업이 재 계산되어 불필요한 재 계산을 방지합니다.

useState() 로 최적화 할 때는 상태의 세분성을 고려하는 것이 중요합니다. 모든 것에 단일 상태 객체를 사용하는 대신 더 작고 집중된 상태 변수로 분류하십시오. 이 접근법은 불필요한 재 렌더를 방지 할 수 있습니다.

 import React, {usestate} 'react';

함수 formcomponent () {
  const [name, setName] = usestate ( '');
  const [이메일, seteMail] = usestate ( '');

  반품 (
    <양식>
      <입력
        값 = {이름}
        onchange = {e => setName (e.target.value)}
        자리 표시기 = "이름"
      />
      <입력
        값 = {이메일}
        onchange = {e => seteMail (e.target.value)}
        자리 표시기 = "이메일"
      />
    </form>
  );
}

name 과 email 별개의 상태 변수로 분리하면 업데이트가 전체 양식의 재 렌더를 트리거하지 않도록합니다.

useState() 최적화의 가장 미묘한 측면 중 하나는 동기식 상태 업데이트와 비동기 상태 업데이트의 차이를 이해하는 것입니다. setState 호출하면 반응 배치가 여러 상태 업데이트를 통해 성능을 향상시킵니다. 그러나 이것은 때때로 예기치 않은 행동으로 이어질 수 있습니다.

 import React, {usestate} 'react';

기능 카운터 () {
  const [count, setCount] = usestate (0);

  const handledoubleincrement = () => {
    SetCount (카운트 1); // 첫 번째 업데이트
    SetCount (카운트 1); // 두 번째 업데이트이지만 Count는 아직 변경되지 않았습니다
  };

  반품 (
    <div>
      <p> 수 : {count} </p>
      <버튼 onclick = {handledoubleIncrement}> 이중 증분 </button>
    </div>
  );
}

이 예에서는 두 setCount 호출이 동일한 count 값을 사용하기 때문에 handleDoubleIncrement 예상대로 작동하지 않을 수 있습니다. 이 문제를 해결하려면 setState 의 기능적 업데이트 형식을 사용할 수 있습니다.

 import React, {usestate} 'react';

기능 카운터 () {
  const [count, setCount] = usestate (0);

  const handledoubleincrement = () => {
    setCount (prevCount => prevCount 1); // 첫 번째 업데이트
    setCount (prevCount => prevCount 1); // 업데이트 된 값을 사용하여 두 번째 업데이트
  };

  반품 (
    <div>
      <p> 수 : {count} </p>
      <버튼 onclick = {handledoubleIncrement}> 이중 증분 </button>
    </div>
  );
}

기능적 업데이트 양식을 사용하면 각 setCount 통화가 가장 최근의 상태 값을 사용하여 레이스 조건을 피할 수 있습니다.

useState() 로 최적화 할 때는 주 업데이트가 아동 구성 요소에 미치는 영향을 고려하는 것도 중요합니다. 부모 구성 요소의 상태 변경이 자식 구성 요소에 영향을 미치지 않으면 React.memo 사용하여 불필요한 재 렌즈를 방지 할 수 있습니다.

 'React'에서 React React;

const childcomponent = react.memo (function childcomponent ({value}) {
  return <div> {value} </div>;
});

함수 parentComponent () {
  const [count, setCount] = usestate (0);
  const [name, setName] = usestate ( &#39;&#39;);

  반품 (
    <div>
      <childcomponent value = {name} />
      <버튼 onclick = {() => setCount (count 1)}> 증분 카운트 </button>
      <버튼 onclick = {() => setName ( &#39;new name&#39;)}> 변경 이름 </button>
    </div>
  );
}

이 예에서는 count 변경 될 때가 아니라 name 이 변경 될 때만 ChildComponent 만 재 렌더링됩니다.

React Applications에서 useState() 최적화하는 것은 React가 상태 및 재 렌즈를 처리하는 방법에 대한 깊은 이해가 필요한 미묘한 프로세스입니다. useCallback , useMemo 및 React.memo 와 같은 기술을 사용하고 상태의 세분성을 신중하게 관리함으로써 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 핵심은 불필요한 재 러더 및 계산을 최소화하여 응답적이고 효율적으로 유지되는 것입니다.

useState() 최적화하기위한 여정을 시작하면 모든 응용 프로그램이 고유하다는 점을 명심하십시오. 하나에게 효과가있는 것은 다른 사람에게는 효과가 없을 수도 있습니다. 실험, 측정 및 반복. 그리고 가장 중요한 것은 고성능 반응 응용 프로그램을 제작하는 과정을 즐기는 것입니다!

위 내용은 React 응용 프로그램에서 usestate ()로 성능을 최적화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!