useSelector with React.memo vs connect

useSelector with React.memo vs connect

링크에서 언급하는 것.https://react-redux.js.org/next/api/hooks#performance

내가 이해한 것의 이점은useSelector훅, 포장지 지옥을 피하기 위한 거야의 사용으로 인해 포장지 지옥이 일어나고 있다.connect HORK. 만약 우리가React.memo 임시:useSelector관능적인 이유로, 단순히 사용하는 것이 더 좋을까?connect 대신 HORK?왜냐하면 어떤 경우에도 우리는 지옥 같은 포장지에 들어가야 할 것이기 때문이다.만약 그게 아니라면connect그러면 옆에 있을 것이다.React.memo.

누구라도 이점에 대해 설명해 주시오.React.memo에 걸쳐서connect.

음, 첫째, 충분히 흥미롭지만, 반응.memo가 HORK이긴 하지만 연결과 같은 보금자리를 만들지 않는다.테스트 코드를 만들었다.

    import React from "react";
    import ReactDOM from "react-dom";
    import {connect, Provider} from 'react-redux'
    import { createStore } from 'redux'
    import "./styles.css";
    
    const MemoComponent = React.memo(function MyMemo() {
      return <div>Memo</div>;
    });
    
    const ConnectedComponent = connect(null,null)(function MyConnected() {
      return <div>ReduxConnectComponent</div>;
    })
    
    const store = createStore(()=>{},{})
    
    
    function App() {
      return (
        <Provider store={store}>
          <MemoComponent />
          <ConnectedComponent/>
        </Provider>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

그리고 여기에 렌더링된 구조가 있다.

우리는 연결을 위한 콘텐츠가 더 깊이 렌더링되는 것을 볼 수 있다.

둘째, 문서에서는 다음과 같이 말한다.

기본적으로 useSelector()는 액션이 발송된 후 선택기 기능을 실행할 때 선택한 값에 대한 참조 동일 비교를 수행하며, 선택한 값이 변경된 경우에만 구성 요소가 다시 렌더링되도록 한다.단, connect()와 달리 useSelector()는 구성 요소의 소품이 변경되지 않았더라도 부모 재렌더로 인해 구성 요소가 재렌더되는 것을 막지 않는다.

즉, 스토어의 관련 없는 부분이 변경될 때 Selector를 사용하는 구성 요소가 다시 렌더링되지 않는다.그리고 이것이 최적화의 가장 중요한 부분이다.React.memo로 최적화하는 것이 지금 완전히 당신의 결정에 달려 있으며 대부분의 경우 그것은 단순히 필요하지 않다.React.memo는 구성요소를 렌더링하는 데 매우 비용이 많이 드는 경우에만 사용하십시오.

요약하자면, 스토어에 연결하기 위해서는 연결 포장지가 필요했다.useSelector를 사용하면 더 이상 포장하지 않아도 된다.일부 무거운 구성 요소를 최적화해야 하는 드문 경우에서 우리는 여전히 React.memo로 마무리해야 한다.React.memo의 작업도 연결에 의해 수행되었지만 대부분의 경우 조기 최적화였다.

나는 꽤 오랫동안 답을 얻으려고 노력했지만, 내가 받은 답은 분명하지 않았다.Redex 설명서의 이론은 복잡하지 않지만:useSelector엄격한 평등을 사용하다.===그리고 연결은 얕은 평등을 사용하여 결정한다.따라서 두 경우 모두 Redex 상태(숫자, 문자열, 부울)에서 원시 값을 "당기는" 경우 동일한 결과를 얻을 수 있다.값이 변경되지 않으면 어떤 구성 요소도 렌더링되지 않는다.기본값이 아닌 항목(array 또는 객체)을 "당기고 있는" 경우 두 경우(Selector, connect 사용)에 대해 값이 변경되지 않은 경우, 사용하는 구성 요소useSelector물론 지금도 다시 렌더링할 것이다.[] === []서로 다른 배열을 참조하기 때문에 항상 거짓이 될 것이다.connectED 구성 요소는 렌더링되지 않는다.이제 만들기 위해useSelector이와 유사하게 행동하고, 렌더링하지 않고, 다음과 같이 할 수 있다.const object = useSelector(state => state.object, shallowEqual)가져올 수 있음shallowEqual로부터react-redux또는 또는 를 사용하여 메모된 상태 버전을 사용하십시오.reselect라이브러리:

const makeGetObject = () => createSelector(state => state.object, object => object)

선택기에 다음을 추가하십시오.const object = useSelector(state => state.object, makeGetObject);이 코드와 박스는 내가 밑바닥을 찌르려 할 때 만들었다(코멘트 확인).WithUseSelector구성 요소: useSelector vs connect()

사용자 정의사용선택기 후크를 사용하지 않도록 설정했는데 작동이 잘 작동함

import { useSelector, useDispatch } from 'react-redux'
import { _lodash } from '../../../lodash'

export const useCloneSelector = (selector = (obj) => obj) => {
  const selectWithClonedState = (state = {}, ...others) => selector(_lodash.cloneDeep(state), ...others)
  return useSelector(selectWithClonedState, _lodash.isEqual)
}

export { useDispatch, useSelector }

참조URL: https://stackoverflow.com/questions/56551433/useselector-with-react-memo-vs-connect