Question

我目前正在学习React和Redux。现在我对这两者的作用有了更好的把握：

我的问题是：我应该用React实际渲染什么？ React是否会渲染整个页面，甚至是不会改变的标题？例如，我想为标题创建一个新组件（标识和标签，而不是更改），或者只是将其添加到我将要呈现的HTML文件中？

Answer 1

我建议将所有内容添加为React组件。在您的html文件中有一个<div>，您可以将React应用程序安装到该文件中。我发现当我开始使用React时，我会尝试避免编写额外的代码（当然，为标题编写一个组件而不是原始HTML是额外的行）。

但这在某种程度上引入了复杂性。应用的不同部分以不同方式呈现。从长远来看，根据我的经验，一致性和可读性比较少的代码行更重要。

顺便说一句，如果你使用的是stateless functional components（你的标题就是），那几乎不需要任何额外的代码。

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

Answer 2

像大多数其他框架一样，你将拥有你的基础'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视图。

Answer 3

完全有可能拥有一个混合页面。例如：将导航栏保留为本机HTML，其中内容为React。

请记住，React是面向组件的，因此您可以将其视为小型小部件。

但是，您通常会有不同的小部件共享相同的状态。在这种情况下，让它们成为同一组件树的一部分是件好事。

你的问题没有明确的答案。这取决于您的应用程序状态需求，但使用React作为页面的动态部分。那些你认为没有重新加载会改变的部分可能会保持一个状态，因此React的阶段管理可以派上用场。