×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 35 – Better Project Structure For 反应

    课程清单
    [React的项目结构,React的项目结构]

    介绍

    现在我们已经了解了React的众多核心功能和基础知识。在所有组件都是核心构建块和react库的功能之后,它就该更深入地研究组件了。
    因此,我们必须确保我们知道它们是如何工作的,幕后发生的事情以及我们可以对它们做些什么。
    您已经了解了很多,但是我想在本模块中涵盖一些盲点。


    回到我们从事的起始项目。到目前为止,让我们改进项目吧,我们仅使用两个组件,即app组件和person组件,它们仅输出一个人。
    这些文件没有问题,可以正常工作,但当然,在幕后,我们仍然可以进行一些调整。
    例如,您通常会将这个应用程序拆分成更多的组件。

    问题总是:
    • 它的组成部分应该包含什么?
    • 您在根组件中将哪个组件分组?

    Now if we analyze our existing 组件 we see that the person component is pretty focused. It displays the card of one person the information of one person. So our component dosen’t need more splitting.
    You could outsource the input into its own 零件。

    React的项目结构

    That might make sense if you want to create a generic input component across your application where you only change the styling but if that not the goal putting into its component doesn’t make much sense.

    Splitting Up App Component

    改进措施

    我们可以分拆 App.js 文件。我们管理国家并在那里做很多事情。
    如果我们看一下我们的render方法,它不能决定该组件负责渲染什么。

    React的项目结构

    我们看到我们绘制了一个人员列表,但是我们当然也有一个切换按钮。现在通常是像 App.js 零件。
    因此,用于管理状态的组件不应过多地参与UI呈现。

    换一种说法:
    The Render method should be very lean and not contain too much JSX.

    因此,尽管未必一定要这样的应用程序组件,特别是对于像这样的小型应用程序,最糟糕的做法是我们可能仍将其拆分为更多的组件。
    例如 :

    React的项目结构

    It might make sense to create a person list comonent or a 人数 component is how we could name it.
    We could then simply pass the array of persons into that component and inside that 人数 component we would do the mapping and render a list.

    另一个改进

    Another improvement we can do is, of course, optional is to outsource our cockpit into its component so that in the end our app component only has wrapping div.


    Create 人数 component

    容器 for component
    让我们创建一个名为的新文件夹 人数 在里面,我们可以有一个 人数.js.
    在我看来,将先前的 文件夹到 人数 文件夹,因为 确实是我们将要渲染的单个元素。
    这是可选的,但具有这种结构很有意义,我们可以进一步改进它。在我们的源文件夹中,我们可能会使用诸如资产文件夹之类的东西,其中包含图像或类似的东西。
    我们也可以将所有组件保持在 组件 文件夹,我们可以有一个 容器 像我们这样保存所有容器的文件夹 App.js 及其各自的CSS文件。

    人员文件夹结构
    
      ...
      |- src
      |   |-assets
      |   |-components
      |   |   |-Cockpit
      |   |   |  |-Cockpit.js
      |   |   |-Persons
      |   |   |  |-Persons.js
      |   |   |  |-Person
      |   |   |     |-Person.css
      |   |   |     |-Person.js
      |   |
      |   |-container
      |   |   |-App.js
      |   |   |-App.css
      ...
    

    因此,现在我们重组了应用程序,使其仅具有 index.js 直接在 src 夹。然后有一个清单 货柜 我们知道了,然后我们有了一个组成要素。
    当然,这将暂时中断应用,因为我们现在所有的进口都是错误的。
    我们现在应该做的第一件事是在接下来的讲座中继续研究这些人员之前,先修复这些导入。

    固定进口

    After Restructuring the code lets fix the imports. Regarding the imports in applications we need to reach out to the person component

    src /容器/App.js
    
    ...
    import 人 from '../components/Persons/Person/Person';
    ...
    

    在里面 src / index.js 文件,我们需要调整导入指向 App.js

    src / index.js
    
    ...
    import App from './containers/App';
    ...
    

    这就是现在,接下来我们需要创建 人数.jsCockpit.js 它们当然已经创建了文件,但是我们需要让它们充满生命,然后我们才能真正看到一种经过改进且重点突出的组件结构。

    反应introduction
    反应Component
    React的项目结构
  • 启用通知    不用了,谢谢