[reactjs] React 컴포넌트가 다시 렌더링되는 이유 추적

@jpdelatorre의 답변은 React 컴포넌트가 다시 렌더링되는 일반적인 이유를 강조하는 데 유용합니다.

방금 소품이 바뀌는 순간에 대해 조금 더 깊이 파고 들었습니다 . React 컴포넌트가 다시 렌더링되는 원인을 해결하는 것은 일반적인 문제이며, 필자의 경험상 이 문제를 추적 하는 데 많은 시간 이 걸리는 소품을 결정하는 것이 필요 합니다.

새로운 소품을받을 때마다 반응 구성 요소가 다시 렌더링됩니다. 그들은 다음과 같은 새로운 소품을받을 수 있습니다.

<MyComponent prop1={currentPosition} prop2={myVariable} />

또는 MyComponentredux 상점에 연결된 경우 :

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

언제의 값은 prop1, prop2, prop3, 또는 prop4변화는 MyComponent다시 렌더링됩니다. 4 개의 소품 console.log(this.props)으로, render블록의 시작 부분 에을 넣어 어떤 소품이 바뀌고 있는지 추적하는 것은 그리 어렵지 않습니다 . 그러나 더 복잡한 구성 요소와 점점 더 많은 소품 으로이 방법을 사용할 수 없습니다.

다음은 편의를 위해 lodash 를 사용하여 구성 요소를 다시 렌더링하는 소품 변경 사항을 확인 하는 유용한 방법입니다 .

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

이 스 니펫을 구성 요소에 추가하면 의심스러운 재 렌더링의 원인이되는 범인을 밝히는 데 도움이되며, 여러 번 구성 요소에 파이프되는 불필요한 데이터를 밝히는 데 도움이됩니다.

답변

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

const keys = {};
const checkDep = (map, key, ref, extra) => {
  if (keys[key] === undefined) {
    keys[key] = {key: key};
    return;
  }
  const stored = map.current.get(keys[key]);

  if (stored === undefined) {
    map.current.set(keys[key], ref);
  } else if (ref !== stored) {
    console.log(
      'Ref ' + keys[key].key + ' changed',
      extra ?? '',
      JSON.stringify({stored}).substring(0, 45),
      JSON.stringify({now: ref}).substring(0, 45),
    );
    map.current.set(keys[key], ref);
  }
};

const refs = useRef(new WeakMap());

const example = useExampleHook();
checkDep(refs, 'example ', example);

const logger = createLogger({
    diff: true,
});