Использование компонентаDidMount при переключении между различными экземплярами одного и того же компонента React

В соответствии с реакционной документацией: http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount, мы рекомендуем использовать компонентныйDidMount для вызова AJAX, который должен быть выпущен при представлении компонента.

Однако при переключении между экземплярами одного и того же компонента с различными реквизитами компонентDidMount вызывается только для первого компонента. Итак, что мы должны делать в этой ситуации?

В настоящее время у меня есть следующее обходное решение: В componentDidMount я делаю свой вызов AJAX, а In componentDidUpdate сравниваю старые и новые реквизиты, чтобы проверить, есть ли у меня новый "экземпляр", и если так, то я делаю вызов AJAX. Но это похоже на обходной путь. Поэтому мой вопрос: действительно ли это способ сделать это?

Я знаю, что я мог бы обернуть мой компонент в разные пустые компоненты, чтобы решить мою проблему. Однако это невозможно, потому что мы создаем приложение, управляемое данными, которое использует настраиваемые компоненты, и имеет смысл использовать один и тот же компонент с различными конфигурациями - вот где я столкнулся с проблемами.

Я знаю, что мы на самом деле говорим об элементах реагирования, а не о случаях как таковых - ведь я думаю, что это часть проблемы. Возможно, у меня разные элементы реагирования, использующие один и тот же экземпляр.

Я сделал крошечный пример, чтобы проиллюстрировать поведение реагирования, используя обычную реакцию (просто чтобы убедиться, что меня не обманывает реакция-маршрутизатор или редукция, и что еще мы используем для реального приложения):

class Foo extends React.Component {
 componentDidMount() {
 console.log('componentDidMount ' + this.props.foo);
 }

 componentDidUpdate() {
 console.log('componentDidUpdate ' + this.props.foo);
 }

 render() {
 return <div>Route is {this.props.foo}</div>;
 }
}

function navigated() {
 ReactDOM.render(
 <foo foo="{window.location.hash}">, 
 document.getElementById('app')
 );
}

window.addEventListener('hashchange', navigated, false);
navigated();
</foo>

Первоначально, когда я перехожу в #/bar, я получаю "componentDidMount #/bar", и когда я перехожу на #/baz, я получаю "componentDidUpdate #/baz".

Мне кажется, что этот вопрос без ответа является конкретным случаем одной и той же проблемы: React не знает, когда я создаю один и тот же компонент

2 ответа

Вы можете добавить свойство key с уникальным значением для каждого хэша:

ReactDOM.render(
 <component hash="{hash}" key="{hash}">, domNode
);
</component>

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

https://facebook.github.io/react/docs/multiple-components.html#dynamic-children


TL DR - ваше "обходное решение" выглядит правильно для меня

Когда вы изначально визуализируете компонент componentDidMount вызывается, когда вы меняете hash prop, вызываемый componentDidUpdate. Он по-прежнему остается одним и тем же компонентом, а именно, что конкретная опора изменила ценность. В вашем случае у вас есть логика (выполняющая вызов AJAX при изменении хэша), которая специфична для вашего приложения. React не знает, что хеш-поддержка является специальной, вы делаете это, добавляя логику в componentDidMount. Поэтому я считаю, что у вас есть хорошая интерпретация документов React, и этот способ достижения вашей цели совершенно прав.

licensed under cc by-sa 3.0 with attribution.