Question

我仍然在学习React并且发现它比我预期的要困难得多，我还在学习网络开发。

如果我们的应用中只有一个视图，而且我们只有一个这样的div：

<body>

<div id="react-app"></div>

</body>

这是否意味着我们所有的React组件都将追溯到一个React父组件？

这是否意味着当我们渲染页面时，我们只在顶级父组件上调用render（），然后React将处理剩下的事情？如果我们在等待数据，我们如何异步渲染子元素？

Answer 1

这是否意味着我们所有的React组件都将追溯到一个React父组件？

是的确切。您的React应用程序将是一个具有一个单一顶级父节点的树。当该父节点被渲染时，React将递归调用render以查找您在其父render次调用中声明的任何子组件。

如果我们在等待数据，我们如何异步渲染子元素？

React的整个想法是声明你的UI在任何情况下都会是什么样子，例如初始状态，等待数据状态，数据返回状态和数据错误状态。

考虑以下示例：

class App extends Component {
  constructor() {
    super()

    // set initial state
    this.state = { images: [], error: null }

    getDataFromServer('url').then(

      // success callback
      data => this.setState({ images: data.images }),

      // error callback
      data => this.setState({ error: data.error })
    )

  render() {
    return (
      <div>
        { // only render ImageGallery component if async call returns with data
          this.state.images.length > 0 && 
          <ImageGallery images={ this.state.images } />
        }
        { this.state.images.length === 0 &&
          <div>Loading / No images returned.</div>
        }
        { this.state.error &&
          <ErrorPopup error={ this.state.error } />
        }
      </div>
    )
  }
}

子组件依赖于父组件<App />的状态，它以多种方式获取其状态，包括构造函数中的ajax调用（或componentWillMount, componentDidMount等）

使用React的网页和一个<div> id

1 个答案: