Преобразование компонента класса в ловушки не работает должным образом - PullRequest
0 голосов
/ 23 марта 2020

Я узнал, как Redux был реализован под капотом. И я пришел к этому репо Simple-Redux

Я превратил всю эту библиотеку в хуки. Но я столкнулся с проблемой в компоненте подключения. Вот как эта библиотека реализовала компонент подключения (используя класс)

export default function connect(mapStateToProps) {
  return function wrapWithConnect(WrappedComponent) {
    class Connect extends PureComponent {
      constructor(props) {
        super(props)
        this.selectDerivedProps = makeDerivedPropsSelector(mapStateToProps)
        this.selectChildElement = makeChildElementSelector(WrappedComponent)
        this.renderWrappedComponent = this.renderWrappedComponent.bind(this)
      }

      renderWrappedComponent({ storeState }) {
        let derivedProps = this.selectDerivedProps(storeState)
        return this.selectChildElement(derivedProps)
      }

      render() {
        return (
          <Context.Consumer>{this.renderWrappedComponent}</Context.Consumer>
        )
      }
    }
    return Connect
  }
}

Я попытался преобразовать в ловушки, но затем весь потребитель контекста перерисовывается. Это не избежать повторного рендеринга всего приложения

Это то, что я сделал

function connect(mapStateToProps) {
  return function wrapWithConnect(WrappedComponent) {
     function Connect() {
        const state = useContext(Context)

        const selectDerivedProps = makeDerivedPropsSelector(mapStateToProps)
        const selectChildElement = makeChildElementSelector(WrappedComponent)

      renderWrappedComponent({ storeState }) {
        let derivedProps = selectDerivedProps(storeState)
        return selectChildElement(derivedProps)
      }

        return renderWrappedComponent(state)
    }
    return Connect
  }
}

export default React.memo(connect)

Что я здесь не так делаю?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...