Компонент высшего порядка - PullRequest
Новая
       11

Компонент высшего порядка

0 голосов
/ 15 декабря 2018

A / t для документов, HOC не изменяет компонент ввода и не использует наследование для копирования своего поведения.Скорее, HOC создает исходный компонент, заключая его в компонент контейнера.

При реагировании на изменения реквизита компонент перерисовывается с помощью newProps.

Так как в HOC мы передаем реквизиты обоим компонентам-оберткам test1 и test2, поэтому они должны повторяться при каждом изменении реквизита.Но этого не происходит.Фактически, test1 & test2 рендерится, затем test2 меняет реквизиты путем поднятия состояния и повторного рендеринга.Но test1 остается таким же.Проверьте прикрепленный образ.

Мне интересно узнать, как реагируют на соединение и реактив-маршрутизатор с-роутером фактически реагируют на каждое изменение реквизита для хранения и перерисовки компонента.

РеальныйПроблема на Github 

class Test extends React.Component {
  render() {
    return (
      <div>
        <Test1 />
        <Test2 />
      </div>
    )
  }
}

Компонент с HOC 

class Test1 extends React.Component {
  render() {
    return(
      <div>
          {
              this.props.test1
          }
          {
              this.props.test2
          }
      </div>
     )
  }
}
export default withHOC(Test1);

Другой компонент с HOC 

class Test2 extends React.Component {
  render() {
    return(
      <div>
        {
            this.props.test1
        }
        {
            this.props.test2
        }
        <button type='button' onClick={()=>this.props.update('test')}>Update </button>
      </div>
    )
  }
}
export default withHOC(Test2);

Компонент высшего порядка 

function withHOC(WrappedComponent) {
  class Test extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
          test1: 'test1',
          test2: 'test2'
      }
    }
    update = (u) => {
      this.setState({
          test2: u 
      })
    }
    render() {
      const test1 = this.state.test1;
      const test2 = this.state.test2;
      return (<WrappedComponent test1={test1} test2={test2} update={this.update}/>);
    }
  }
  return Test;
}
export default withHOC;

Журнал методов жизненного цикла

1 Ответ

0 голосов
/ 15 декабря 2018

Во-первых, вы фактически не задали здесь вопрос - название этого поста должно быть переписано, чтобы действительно что-то спросить.

Правильно ли я сказал, что вы пытаетесь использовать HOCразделить состояние между двумя компонентами?А затем ожидаем, что обновление в <Test2 /> вызовет обновление в <Test1 />, потому что props.test2 на <Test2 /> изменилось?

Если это так, то это неправильный способ думать о HOC.Думайте о HOC как о украшении компонентов с определенными свойствами или поведением.Использование withHOC, подробно описанного в вашем вопросе, не говорит «разрешить любому компоненту, заключенному в withHOC, получить доступ к единственному фрагменту состояния, определенному в этом HOC», оно говорит, что «любой компонент, заключенный в withHOC, должен иметь свое собственное состояниеопределяется функциями, указанными в этом HOC ".

Таким образом, оборачивая оба компонента, а затем изменяя состояние в <Test2 />, ТОЛЬКО изменится состояние в этом конкретном компоненте.

Если вы хотитеобновление в <Test2 />, чтобы вызвать обновление в <Test1 />, тогда это должно быть сделано с использованием состояния родительского компонента (т. е. <Test />).

...