React - useMemo()를 사용하면 여전히 키보드 입력 속도가 느려집니다.

Question

입력 상자가 많은 이 코드가 있는데 각 입력 상자는 가격 값을 수정하는 데 사용됩니다. 입력박스가 많기 때문에(지역당 가격 3개, 가격당 가격 3개) 매번 전부 다시 렌더링하는 것을 피하기 위해 입력박스 값을 업데이트하는 함수에 useMemo를 사용했고, 추가적으로 또한 입력 상자를 제어하기에는 코드가 너무 길어지는 것을 방지하기 위해 useReducer를 사용했습니다.

단, 문자(또는 숫자)를 입력하면 바로 표시되는 것이 아니고 연속 입력은커녕 표시되기까지 짧은 시간이 걸립니다.

const handlerUpdate = useMemo(
    () =>(속성, 값, obid) =>
      dispatch({ 유형: "UPDATE_DATA", 속성, 페이로드: value, id: obid });
    },
    [보내다]
  );

그리고 리듀서도 있습니다:

함수 감속기(상태, 동작) {
    스위치(action.type) {
...
사례 'UPDATE_DATA':
        반품 {
          ...상태,
          데이터: state.data.map((item) => {
            if (item.id === action.id) {
              return { ...item, [action.property]: action.payload };
            }
            물건을 돌려 주다;
          }),
        };
}
}

문제(또는 해결책)가 다른 곳에 있을 수 있으므로 전체 코드를 확인하는 것이 좋습니다. 전체 코드를 보려면 이 sandcodebox 링크를 참조하세요. 코드의 일부를 복사하여 CSS 형식이 좋지 않은 점을 용서해 주십시오. 가져오기 기능은 시뮬레이션된 데이터의 긴 배열로 대체되었습니다.

링크: https://codesandbox.io/s/unruffled-feynman-g9nox2?file=/src/App.js

Answer 1

일반적으로 useMemo 的作用是在渲染期间缓存昂贵计算的值。然而，在您的情况下，您没有任何昂贵的渲染计算；每次输入更改时，您只是渲染一个非常大的树。实际上，因为所有状态都在App구성 요소에서는 전체 앱이 매번 다시 렌더링됩니다.

React에서 이 문제를 최적화하는 방법은 가능할 때마다 구성 요소 렌더링을 건너뛰는 것입니다. 이렇게 하려면 페이지의 관련 없는 부분을 여러 구성 요소로 분할하세요. 로직을 분리한 후에는 컴포넌트 렌더링을 완전히 건너뛸 수 있는 다른 최적화 기술인 React.memo()로 래핑합니다.

제가 보기에 가장 확실한 변화는 다음과 같습니다.

1. 는 TodosDatos移出App 구성 요소가 됩니다. 왜냐하면 이 구성 요소는 일정하고 렌더링할 때마다 재정의할 필요가 없기 때문입니다(메모리를 차지할 수 있음).
2. <Table>을 새 구성 요소에 넣고 <Table>放入一个新的组件中，并使用React.memo()를 사용하여 기억하세요. 모든 테이블 종속성 값을 새 구성 요소의 props에 전달해야 합니다.

여기에서 이러한 변경 사항을 구현했습니다: https://codesandbox.io/s/green-breeze-mmum6n?file=/src/App.js. 이제 입력이 거의 즉각적으로 수행된다는 것을 알 수 있습니다. 더 나은 성능을 얻기 위해 다른 곳에서 여러 최적화를 수행할 수도 있습니다.