Реакт - как использовать методы жизненного цикла

Question

Я продолжаю сталкиваться с той же проблемой с React. Я чувствую, что должен использовать методы жизненного цикла. (Кроме компонентов componentWillMount и componentWillReceiveProps). Но они никогда не соответствуют моей цели. Вот 2 примера:

1. Асинхронная загрузка

Мой родительский компонент загружает некоторые данные с помощью AJAX. Компонент внука нуждается в этих данных, который передается через реквизит. Из-за времени, когда данные могут быть доступны, когда дочерний компонент установлен или нет. Я не знаю, следует ли поместить код в компонент моего внука, который зависит от этих реквизитов в компонентеWillMount() или в компонентеWillReceiveProps(). Я в конечном итоге должен положить его в оба. (Или в методе, который они оба называют).

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

Мой компонент получает некоторые данные. (Использование getStateFromFlux - mixin, предоставляемое Fluxxor). Это происходит несколько раз в течение цикла загрузки данных различными флагами, установленными на извлеченный объект данных: разгружается, загружается и загружается, скажем. Это изменение состояния вызывает повторную визуализацию.

Я только хочу отображать и показывать данные, если есть что показать. Таким образом, мой метод визуализации имеет первую строку:

if data.loadState != 'loaded' 
    return '<span />' 

Ok. Что ж. Я подумал - должен быть метод жизненного цикла, чтобы исправить это. Итак, я сделал это:

shouldComponentUpdate: function (nextProps, nextState) { 
    if nextState.loadState == 'loaded' 
     return true 
    else 
     return false //stops the render. Good. 
} 

Наконец-то я подумал - я использовал метод жизненного цикла.

Но, увы, в то время как это остановить рендер называют в некоторых случаях - когда нет никаких данных - я до сих пор не могу удалить Hacky выглядящей линии о

if data.loadState != 'loaded' 
    return '<span />' 

Это потому, что shouldComponentUpdate является не вызывается для первоначального рендера. Когда этот компонент сначала отображает, данных нет. loadState «разгружен». Метод render еще называется. И мне все же нужно избегать отображения пользовательского интерфейса (с пустыми полями данных).

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

Что мне не хватает в реакторе? (Единственное, о чем я могу думать, это то, что он предназначен для использования с исходной обработкой на стороне сервера, когда вы можете быть уверены в своих данных, - тогда один раз в браузере методы жизненного цикла описывают обнаружение изменений).

Благодаря

Answer 1

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

1. Вы могли только условно оказывать внучку только тогда, когда данные загружены родителем и передается ребенку. Тогда вам понадобится только проверка у ребенка. Это будет выглядеть примерно так:

   // Child render method that has been passed data loaded by the parent 
   render: function() { 
       var grandChild = null; 
       if (this.props.data) { 
       grandchild = <GrandChild data={this.props.data} /> 
       } 
       return (
       <div> 
        {grandchild} 
       </div> 
   ) 
   } 
   

В этом случае, вы только передать data пропеллер компоненту ребенка после загрузки данных. Таким образом, вам гарантировано, что, когда компонент внука сделает визуализацию, у него будут данные, которые ему нужны. Хотя я не уверен, почему вы так не склонны отображать пустые поля данных, это должно решить проблему.

2. Вы правы, не существует метода жизненного цикла React, который срабатывает независимо от того, является ли это первоначальным визуализатором или нет. При этом, если вам нужно сделать оба варианта, вы всегда можете комбинировать componentDidMount и либо componentDidUpdate, либо componentWillReceiveProps. Я не 100% уверен, почему они сделали это, но несколько причин, которые приходят на ум:

   • гарантирует, что React не нужно будет повторно вынести компонент до первоначального рендеринга (т.е. изменение состояния в componentWillReceiveProps. , инициируя обновление перед первоначальным рендерингом). Я не очень хорошо знаком с базой кода, но я легко вижу, что это вызывает проблемы.
   • повышение производительности для начальной визуализации, чтобы ваш груз контента быстрее в то время как виртуальный DOM инициализируется

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

Answer 2

Не знаю, что касается загрузки, но с разгрузкой Я бы предложил;

if (this.props.data.loadstate == 'unloaded') return null;

Есть, что в качестве первой линии визуализации. Как вы отметили, mustComponentUpdate относится только к обновлениям.