主页 / 问题 / 618640
Accepted
while1pass
Asked:2020-01-24 15:49:30 +0000 UTC2020-01-24 15:49:30 +0000 UTC

反应.js 什么时候使用组件？

  • 772

在 React 中创建组件应该遵循什么？它的功能和可变性或应用程序的逻辑结构？

假设我们有一个主页

在此处输入图像描述

Block 1 和 Block 3，按照我的理解，应该明确地描述为组件，因为它们是功能块。

块 2 - 包含在导航栏中，也被描述为组件。

Block 3 - 一个单独的组件，包含涂鸦、搜索栏和搜索按钮。搜索栏和按钮是独立的组件吗？是否有必要将涂鸦分成一个单独的组件（假设它永远不会改变）？

第 4 块 - 页脚。如果它始终不变，则将其描述为一个单独的组件？或者将它包含在描述整个主页的组件中？

reactjs

2 个回答

  1. Best Answer
    • 容器（container或智能组件）是继承自Component并包含逻辑和/或更改其状态的组件。用于生成和初始化其他组件。也可以叫statefull。
    • 展示（presentational或愚蠢）组件是从Component没有逻辑且不更改其状态的组件继承的组件。可以有自定义样式。它也被称为 as stateless。用于显示数据，通常通过props. 现在使用它没有任何意义，因为创建了一种新型组件来替换它，如下所述。
    • 功能性（或同样是表示性的愚蠢组件）是没有逻辑且不存储状态并具有自己的样式的功能组件。他们也被称为stateless。他们有责任显示通过 接收到的数据props。
    • Pure（纯） ——一个继承自的组件PureComponent，既可以属于第一类也可以属于第二类和第三类。它的任务是对组件的状态进行浅层比较，以避免不必要的渲染，并避免程序员编写不必要的检查。

    这应该足以了解何时何地使用什么，但我仍然要补充一点，最好编写尽可能少的容器组件。

    至于理解什么时候使用组件，什么时候使用元素，用一个简单的例子就更容易解释了——

    // так можно, но лучше не делать
<div className="button-group">
    <button></button>
    <button></button>
</div>


// так будет более правильно
const ButtonGroup = ({children}) => 
  (<div className="button-group">{children}</div>);

<ButtonGroup>
    <button></button>
    <button></button>
</ButtonGroup>

    而既然说到组件，就不得不提到组件组合风格这样一个重要的组件。我经常看到这个 -

    <App>
  <Header/>
  <Footer/>
</App>

    但我个人更喜欢，因此我建议你这样写 -

    <App>
  <Header>
    <ButtonGroup>
      <button></button>
      <button></button>
    </ButtonGroup>
  <Header/>
  <Footer>
    <ButtonGroup>
      <button></button>
      <button></button>
    </ButtonGroup>
  <Footer/>
</App>

    毕竟，您自己的应用程序的细节经常会从您的脑海中飞出，能够通过一次覆盖将其刷新在您的记忆中非常重要。对于第一次熟悉代码的人来说，第二个选项通常是一个礼物，因为很难不通过树而是通过文件中的类在头部重新创建应用程序。但也有例外，当确实有很多代码时，您将不得不像第一个选项那样做，但仍然尽量将尽可能多的代码放在一个组件中。我经常看到他们如何编写 App => Header + Footer。你去Header，只有一个组件，比如ButtonGroup。然后你转到这个 ButtonGroup，还有一个组件。所以直到你到达最后一个，你已经忘记了你来自哪里以及为什么。

    在你的情况下具体波动是什么，最小值可能是这样的 -

    <App>
    <Footer>
        <ButtonGoup>
            <button></button>
            <button></button>
            <button></button>
        </ButtonGoup>
        <ButtonGoup>
            <button></button>
            <button></button>
            <button></button>
        </ButtonGoup>
    </Footer>
    <Group>
        <Logo/>
        <Search>
            <TextInput></TextInput>
            <KeyboardInput></KeyboardInput>
            <VoiceInput></VoiceInput>
        </Search>
    </Group>
    <Nav>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
        <button></button>
    </Nav>
</App>

    • 8

  2. 拆分组件

    这样组件就不会做太多。人们普遍认为将其分为两个部分，每个部分将发挥不同的作用。这两类组件分别称为容器组件和展示组件，也分别称为“智能”组件和“哑”组件。

    简而言之，容器组件包含源数据并在状态上运行。状态作为属性传递给展示组件，然后呈现给视图。

    “智能”和“愚蠢”组件这两个术语在社区中逐渐不再使用。

    演示组件

    var UserList = React.createClass({
  render: function() {
    return (
      <ul className="user-list">
        {this.props.users.map(function(user) {
          return (
            <li key={user.id}>
              <Link to="{'/users/' + user.id}">{user.name}</Link>
            </li>
          );
        })}
      </ul>
    );
  }
});

    表示性组件是“愚蠢的”，因为它们不知道它们所操作的属性从何而来。状态？不，我们没有。

    演示组件不应该自行更改属性中的数据。事实上，任何接受属性的组件都必须假定数据是不可变的并且属于其父级。虽然不会以任何方式影响属性中数据的值，但可以自由格式化数据以在视图中显示（例如，通过将 Unix 时间戳转换为更易读的内容）。

    容器组件

    容器组件几乎总是展示组件的父级。在某种程度上，它们充当表示组件和应用程序其余部分之间的中介。它们也被称为“智能”组件，因为它们知道整个应用程序。

    var React = require('react');
var axios = require('axios');
var UserList = require('../views/list-user');

var UserListContainer = React.createClass({
  getInitialState: function() {
    return {
      users: []
    }
  },

  componentDidMount: function() {
    var _this = this;
    axios.get('/path/to/user-api').then(function(response) {
      _this.setState({users: response.data})
    });
  },

  render: function() {
    return (<UserList users={this.state.users} />);
  }
});

module.exports = UserListContainer;

    容器组件可以像任何其他 React 组件一样创建。它们也像其他组件一样具有渲染方法，但它们不会为渲染创建任何内容，而是将结果作为展示组件返回。

    链接到原始文章

    • 2

相关问题