Рендеринг компонентов React синхронно в порядке - PullRequest
Новая
       31

Рендеринг компонентов React синхронно в порядке

0 голосов
/ 31 мая 2018

Я создаю приложение React и использую Mobx для управления состоянием.Код выглядит следующим образом: 

@observer
class ComponentX extends React.Component {
    constructor(props) {
        super(props);
        this.renderC = this.props.renderC;
    }

    render() {
        return (
            <div>
                <div>
                    <ComponentA />
                </div>

                <ComponentB mousePosition={this.props.mouseCoordiantes}/>

                {this.props.renderC && <ComponentC/>}
            </div>
        )
    }
}

<ComponentC/> выполняет некоторые манипуляции с DOM, которые требуют <ComponentB/> для полной визуализации, прежде чем он выполнит свою работу.ComponentX визуализируется непрерывно, в результате чего дочерние компоненты также повторно визуализируются, когда пользователь перемещает мышь, поскольку <ComponentB/> использует эти координаты мыши в качестве реквизита.(mouseCoordiantes и renderC - это Mobx observables, поэтому всякий раз, когда их значение изменяется, компоненты, использующие их, автоматически перерисовываются).В зависимости от положения мыши renderC устанавливается на true, что приводит к визуализации <ComponentC />.

Однако, если для renderC установлено значение true, <ComponentC/> визуализируется до того, как <ComponentB /> завершит рендеринг в DOM.И поэтому желаемый результат не достигнут.Почему это происходит и как я могу убедиться, что <ComponentC/> рендерит только после того, как <ComponentB/> полностью отрендерится?

1 Ответ

0 голосов
/ 31 мая 2018

Использование componentDidMount

class ComponentB {
  componentDidMount() {
    this.setState({renderC: true});
  }

  render() {
     return <div>
        ...
        {this.state.renderC && <ComponentC />}
     </div>
  }
}

class ComponentX {

  render() {
    <ComponentB />
  }
}
...