ReactJS道具与州：最终项目细节-Java 学习之路

进入ReactJS，我正在构建TodoList-of-TodoLists，这是一个由数字ID标识的一些项目的两级动态列表 . 项目具有通过其api从第三方服务检索的扩展详细信息 .

React组件结构如下：

App {
  Level0Form,
  Level0List [
    Level0Item {
      Title: "ABC",
      Level1Form,
      Level1List [
        Level1Item {
          id: 123,             // given initially
          url: "abc",          // - updated after ajax call
          image: "image1.jpg", // - updated after ajax call
        }, ..
      ]
    }, ..
  ]
}

最初应用程序仅加载Level0 Headers Level1 ID . 然后它对ext进行异步调用 . 用于检索每个唯一ID的URL和图像（在此示例中）的API . 在交互式添加新的Level1项目时也是如此 .

什么是ReactJS传递这些“装饰”细节的方式：

从根到道具链，或者
让每个Level1项目都要求自己的详细信息，将它们存储在一个状态中？

用户不会更改仅用于显示目的的细节 .

2 回答

0
props ：
- 将数据传递给子组件的方法
- 不可变
- 通过道具传递数据会获得更好的性能
state
- 由您的顶级组件（视图控制器）维护 .
- 可变
- 不要使用它将数据传递给子组件
TL;DR; - 使用props将数据传递给子组件 .
回复于 2024-04-26T08:53:38+08:00
1

理想情况下，当组件安装 componentDidMount 时，您的组件将执行ajax调用，当它返回时，您将把ajax请求中的数据（无论是文本，图像还是数据）添加到状态 this.setState .

如果你选择从父母传下来，你需要通过 componentWillReceiveProps 接收新的道具，然后更新状态 .

this.state 是关键，因为无论何时设置组件，所有子组件都将重新渲染 . 如果您现在拥有来自ajax的新数据，则需要重新渲染以显示更改 .

但这是非常基本的反应 . 返回并再次阅读文档 . https://facebook.github.io/react/docs/component-specs.html

回复于 2024-04-26T08:53:38+08:00

ReactJS道具与州：最终项目细节

2 回答

相关问题