ReactJS: почему передача исходного состояния компонента a prop является анти-шаблоном?

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

что меня больше всего беспокоит реквизит в getInitialState как анти-шаблон пост. Я создал панель мониторинга, которая получает текущие обновления с сервера, не требуя взаимодействия с пользователем за пределами загрузки страницы. Из того что я читал, this.state должен содержать вещи, которые будут определять следует ли повторно визуализировать компонент, и this.props.... Я еще не знаю.

однако, когда вы изначально вызываете React.render(<MyComponent />, ...), вы можете только сдать реквизит. В моем случае я получаю все данные с сервера, поэтому начальные реквизиты просто заканчиваются в this.state в любом случае. Так что все мои компоненты имеют что-то вроде этого:

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

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

1 71
reactjs

1 ответ:

отказ от ответственности: когда я ответил на этот вопрос, я учился / пытался реализуйте vanilla Flux, и я был немного скептичен по этому поводу. Позже я перенес все в Redux. Итак, совет: просто пойдите с Redux или Мобс. Скорее всего, вам даже не понадобится ответ на этот вопрос больше (за исключением науки).

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

и вот что вы должны сделать:

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

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

Да, вы можете, для большинства из них. Для этого выберите внешний компонент, который будет государственным держателем. Используя Ваш пример, вы можете создать Dashboard компонент, который содержит данные, и Widget компонент, который полностью не имеет состояния. Элемент Dashboard отвечает за получение всех данных и затем рендеринг нескольких Widgets, которые получают все, что им нужно через props.

но мои виджеты имеют несколько состояний.. пользователь может настроить их. Как сделать их апатридами?

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

ок, так что теперь, Dashboard сохраняет состояние, но как мне передать ему начальное состояние?

у вас есть два варианта. Наиболее рекомендуемым является то, что Вы делаете вызов Ajax в DashboardgetInitialState метод получения начального состояния от сервера. Вы также можете использовать Flux, что является более сложным способом управления данными. Flux-это скорее шаблон, а не реализация. Вы можете использовать pure Flux с реализацией Facebook Dispatcher, но вы можете использовать сторонние реализации, такие как возвращение, Alt или Fluxxor.

кроме того, вы можете передать это начальное состояние как prop до Dashboard, явно заявляя, что это только начальное состояние.. как initialData, например. Однако, если вы выберете этот путь, вы не сможете передать ему другое начальное состояние, потому что он будет "помнить" состояние после первого оказывать.

OBS

вы не совсем правы в своих определениях.

State используется для хранения изменяемых данных, то есть данных, которые будут меняться в течение жизненного цикла компонента. Изменения в состоянии должны быть сделаны через setState метод и приведет к повторной визуализации компонента.

реквизит используются для передачи в imutable данных к компонентам. Они не должны меняться во время жизненный цикл компонента. Компоненты, которые используют только реквизиты, не имеют состояния.

этой является релевантным источником по теме"Как передать начальное состояние компонентам".

87