Question

我是React Native的新手，所以想了解有关以下场景的最佳实践。

“我的通知”屏幕组件包含嵌套的子组件，如下所示：

通知屏幕读段阅读清单未读部分 UnreadList

我应该在哪里处理状态并进行API调用？

选项1：

在ScreenComponent构造函数和componentDidMount中：

this.state = {

  loading: true,
  notifications: [],
  error: ''

componentDidMount() {
    const headers = {
      Authorization: this.props.jwt
    };
    axios({
      method: 'GET',
      url: 'http://localhost:3000/notifications',
      headers: headers,
    }).then((response) => {
      this.setState({
        notifications: response.data.data,
        loading: false

然后，我必须将通知状态对象作为道具传递给子组件ReadList和UnreadList，分别过滤已读和未读通知并呈现列表。

选项2：

在子列表组件中对API进行API调用：

constructor(props) {
    super(props);
    this.state = {
      loading: true,
      read_notifications: [],
      error: ''
    };
  }

  componentDidMount() {
    const headers = {
      Authorization: this.props.jwt
    };
    axios({
      method: 'GET',
      url: 'http://localhost:3000/notifications?status=read',
      headers: headers,
    }).then((response) => {
      this.setState({
        notifications: response.data.data,
        loading: false

在这种情况下，我将有2个API调用，这对于每个组件来说都不理想，并且我不知道在数据加载时如何处理父控制器的加载渲染，因为子级仅渲染列表，不是整个屏幕。

所以我认为选项1会更可取，但这意味着将整个通知数组传递给子组件，并对每个子组件中可能有数百条记录进行过滤。

有没有我没有的第三个选择？提前致谢。顺便说一句，我目前还没有使用Redux，所以现在想避免使用涉及外部磁通库的任何解决方案。

Answer 1

有两种类型的组件是最佳实践。有状态和纯组件。有些人也称它们为“容器”和“演示”组件。状态始终应由有状态/容器组件处理。呈现组件不处理状态，只能访问父组件状态。

React Native在父级与子级之间从API获取数据

1 个答案: