Question

新来的反应，并且不知道如何构建对此的Google搜索，因此决定在这里询问。正在参加一个反应教程，而讲师做到了：

#App.js

import React, { Component } from 'react';
import Ninjas from './Ninjas.js'


class App extends Component {
  state = {
    ninjas : [
      { name: 'Ryu', age:30, belt:'black', id:1 },
      { name: 'Jacy', age:34, belt:'yellow', id:2 },
      { name: 'Ikenna', age:20, belt:'green', id:3 },
      { name: 'Cole', age:50, belt:'red', id:4 }
    ]
  }
  render() {
    return (
      <div className="App">
        <p>My First React App</p>
        <hr/>
        <Ninjas ninjas={ this.state.ninjas } />
      </div>
    );
  }
}

export default App;



#Ninjas.js

import React, { Component } from 'react';

const Ninjas = (props) => {
    const { ninjas } = props;
    const ninjaList = ninjas.map(ninja => {
      return (
        <div className="ninja" key={ ninja.id }>
          <div>Name: { ninja.name }</div>
          <div>Age: { ninja.age }</div>
          <div>Belt: { ninja.belt }</div>
          <hr/>
        </div>
      )
    })
    return(
      <div className="ninja-list">
        { ninjaList }
      </div>
    )
}

export default Ninjas

但是后来我尝试了一下，结果还是一样：

#App.js

import React, { Component } from 'react';
import Ninjas from './Ninjas.js'


class App extends Component {

  render() {
    return (
      <div className="App">
        <p>My First React App</p>
        <hr/>
        <Ninjas />
      </div>
    );
  }
}

export default App;



#Ninjas.js

class Ninjas extends Component {

  state = {
    ninjas : [
      { name: 'Ryu', age:30, belt:'black', id:1 },
      { name: 'Jacy', age:34, belt:'yellow', id:2 },
      { name: 'Ikenna', age:20, belt:'green', id:3 },
      { name: 'Cole', age:50, belt:'red', id:4 }
    ]
  }

  render() {
    const ninjaList = this.state.ninjas.map(ninja => {
      return(
        <div className="ninja" key={ ninja.id }>
          <div>Name: { ninja.name }</div>
          <div>Age: { ninja.age }</div>
          <div>Belt: { ninja.belt }</div>
          <hr/>
        </div>
      )
    })
    return (
      <div className="ninja-list">
        { ninjaList }
      </div>
    )
  }
}

export default Ninjas

为什么他将状态放在父App组件而不是嵌套的Ninjas组件中？以及如何知道何时将数据作为道具传递而又不将其用作需要数据的组件中的状态？

Answer 1

首先，恭喜您注意到这一点；）您离React Thinking仅一步之遥

在您的示例中，ninjas状态位于App还是<Ninjas/>组件中都没有影响。仅在此应用变得越来越复杂时才重要。

智能容器与哑组件

本教程示例将<Ninjas/>构建为愚蠢/代表性的组件，这就是为什么它不使用class而是被写为Stateless Functional Component的原因。它仅用于以某种方式显示数据。

但是为什么呢？因为我们可能想将<Ninjas/>组件与不同的数据集一起重用。

在实际的应用中，很可能您不会将忍者的数据硬编码为状态。通常发生的情况是，一个智能容器（在这种情况下为App）将对后端服务器进行API调用，以检索所有忍者数据，然后将其另存为state。

使用教程的结构，您现在可以灵活地：

将ninjas状态传递给可能需要数据的其他组件。例如，一个<BeltCount/>组件显示每种皮带颜色的计数。这不是最好的例子，但重点是可重用性。
<Ninjas>组件也可以重复使用！现在它没有任何硬编码状态，任何人都可以通过传递不同的<Ninjas>道具来重用ninjas。

Answer 2

在第二个示例中，您传递的是未定义的state.ninjas，它没有任何作用。第二个示例起作用的原因是因为您使用第一个示例的道具定义了state。

尝试像第一个示例中那样用const { ninjas } = props来调用它，它将不再起作用。

之所以采用第一种方法，是因为您可以定义任意忍者列表，而在第二种方法中，您始终具有相同的忍者。

Answer 3

我想回答具体部分：

您怎么知道何时将数据作为道具传递而不将其用作需要数据的组件中的状态？

可能是因为状态中的数据也被其他一些元素使用/操纵。例如“排序” /“删除”等。

通常，您应该将状态保持在尽可能的本地，即使用状态数据的位置。考虑一下encapsulation这个概念。

希望有帮助。

Answer 4

就目前的示例而言，没有任何令人信服的理由将状态置于应用程序级别。我希望随着教程的进行和示例的复杂化（状态以某种方式更改并可能由多个组件使用/显示），使状态变为原来的原因将会更加清楚。

Answer 5

React中有两种类型的组件：容器组件和表示组件。

容器组件是顶层组件，具有有关状态（以及Redux存储等其他高级信息）的信息。

演示文稿组件仅负责代表您的内容。

讲师已经为您的“忍者”课使用了功能组件，并且从顶层接受道具。这是React中的标准做法，我建议遵循它。随着学习的进展，您将更好地理解为什么只有顶层组件才需要了解状态。祝你好运！

如何知道在react.js中添加状态

5 个答案:

智能容器与哑组件