2016-07-24 3 views
1

В настоящее время я работаю над обучением React и Redux. Теперь я получаю лучшее представление о том, что два сделать:Что в реакторе действительно должно быть показано

  • Реагировать - Рендер компоненты на странице
  • Redux - Держите состояние страницы

Мой вопрос, хотя есть: что я должен делать с React? Предполагается ли React отображать всю страницу, даже заголовок, который не изменится? Например, предположим ли я создать новый компонент для заголовка (логотип и вкладки, а не изменять), или просто добавить это в HTML-файл, на который я буду оказывать?

ответ

3

Я бы предложил добавить абсолютно все как компонент React. У вас есть один <div> в вашем html-файле, на который вы монтируете приложение React. Я обнаружил, что, когда я начал использовать React, я попытался бы избежать написания дополнительного кода (конечно, писать компонент для заголовка, а не необработанный HTML - дополнительные строки).

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

BTW, если вы используете stateless functional components (который будет вашим заголовком), это всего лишь лишний код.

import React from 'react'; 
export default Header =() => <header>My wonderful app</header>; 
3

, как и большинство других структур, вы будете иметь «index.html» файл вашей базы, которая будет включать в себя все ваши зависимостей и затем тело, которое содержит DIV, который вы рендеринга реагируют компоненты в. это будет выглядеть примерно так:

<html> 
    <head> 
    <-- script, css, framework files added here --> 
    </head> 
    <body> 
    <div id="reactApp"</div> 
    </body> 
</html> 

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

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('reactApp') 
); 

все остальное может быть вынесено в React и прошел вдоль к этому представлению div.

1

Вполне возможно иметь гибридную страницу. Например: сохраните навигационную панель как собственный HTML, где, поскольку содержимое React.

Помните, что Реагент ориентирован на компонент, поэтому вы можете думать о нем как о небольших виджетах.

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

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