реагировать на обновления компонентов компонента за пределами класса компонентов

Question

У меня есть некоторые проблемы с созданием приложения React. Вот проблема:

import React from 'react'; 

const VIEW_MAIN = 0; 
const VIEW_SUB = 1; 

const VIEWS = {}; 
VIEWS[VIEW_MAIN] = (<ViewMain someProps={...} />); 
VIEWS[VIEW_SUB] = (<ViewSub someProps={...} />); 

const AppContent = React.createClass({ 
    render() { 

     let renderDOM = null; 

     if(this.props.view === VIEW_MAIN) { 
      renderDOM = VIEWS[VIEW_MAIN]; 
     } 
     else { 
      renderDOM = VIEWS[VIEW_SUB]; 
     } 

     return (
      <div id="ViewContainer"> 
       {renderDOM} 
      </div> 
     ); 
    } 
}); 

Вы можете видеть, что «МНЕНИЯ» постоянная переменная содержит 2 представления, VIEW_MAIN и VIEW_SUB. Каждое представление представляет собой компонент React.

Оба компонента имеют одно и то же свойство с именем «someProps». Теперь это проблема. Я хочу добавить свойство компонента «AppContent» в оба компонента React Components, но, конечно, это невозможно, потому что они находятся вне определения класса.

Так что переместите их в определение класса, проблема в том, что я не знаю, куда мне поставить. Должен ли я использовать метод «рендеринга»? Я думаю, что это плохая идея, потому что метод render будет выполняться много раз.

Если я использую ключевое слово «class» вместо использования createClass, я думаю, что это возможно, если определяющие «VIEWS» константные коды переменных находятся внутри функции конструктора (constructor()), но я не люблю их использовать.

Я набрал код, как это временно:

const AppContent = React.createClass({ 
    _initViews() { 
     if(typeof this.VIEWS === 'undefined') { 
      this.VIEWS = {}; 
      this.VIEWS[VIEW_MAIN] = (<ViewMain someProps={this.props.some} />); 
      this.VIEWS[VIEW_SUB] = (<ViewSub someProps={this.props.some} />); 
    }, 
    render() { 
     this._initViews(); 

     ... 
    } 
}); 

Я добавил _initialViews метод внутри класса, и выполнить его, когда делают звонки. Он отлично работает, но проблема всегда выполняется методом «_initViews» при рендеринге AppContent. Я хочу выполнить только один раз, и я думаю, что использовать реакцию, как будто это плохая идея.

Должен ли я просто использовать ключевое слово класса? Как я слышал, внутри React существует метод setProps, но теперь он устарел, и я также думаю, что использование метода setProps - плохая идея.

Есть ли способ передовой практики или лучшего решения, что я пытаюсь? Если да, то будет очень признателен, если он посоветует мне.

Answer 1

Вы должны осуществлять stateless functions. Заполните VIEWS с этими функциями и вызвать его в приложении заменить {renderDOM} что-то вроде <renderDOM someProps={this.props.some}/>

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

Answer 2

ReactJS предназначен для визуализации состояния вашего приложения. Когда состояние изменилось, вы снова отобразите все приложение. Фокус в том, что ReactJS делает это быстро, благодаря Virtual Dom.

Отвечая на ваш вопрос: это прекрасно, чтобы выставить компонент много раз.

Посмотрите на внедрение видео: https://facebook.github.io/react/docs/videos.html

И мышление в React раздел: https://facebook.github.io/react/docs/thinking-in-react.html