强制React容器刷新数据

Question

在我的React应用程序中，我有两种不同类型的组件： 演示文稿 和 容器 。大约是Dan Abromov的“ Presentational and
Container Components”之后
，除了我不使用Flux或Redux。

现在，我具有以下结构：

UsersContainer
├── UsersListContainer
|   └── UsersListView
└── AddUserContainer

该UsersListContainer负责从一些REST API加载数据，如果成功的话，代表们提交的数据的UsersListView。

该AddUserContainer负责添加新用户，再通过调用一个REST
API。现在，当成功完成后，我想UsersListContainer刷新其数据。

我能想到的最好的是：

class AddUserContainer extends React.Component {
  render() {
    // Other UI elements omitted for brevity
    return (<button onClick={ e => props.onUserAdded() }>Add user</button>);
  }
}

class UsersListContainer extends React.Component {
  componentWillMount() {
    // start fetching data using window.fetch;
    // the promise callback will but retrieved data into this.state
  }
  render() {
    return (<table></table>);
  }
}

class UsersContainer extends React.Component {
  render() {
    const forceUpdate = this.setState({ ...this.state, refreshToken: Math.random() });
    // Other UI elements omitted for brevity
    <UsersListContainer key={ this.state.refreshToken } />
    <AddUserContainer onUserAdded={ forceUpdate } />
  }
}

但是这种方法就像在key滥用道具。有没有更好/更优雅的方式来做到这一点？

Answer 1

如果您还不想使用Flux或Redux，那么更新对等组件（在您的情况下为UsersListContainer和AddUserContainer）在我看来是React的反模式。

对我来说，React的主要思想是将道具从父母传递给孩子，因此，欧文·林（Irvin
Lim）的思想“摆脱了UsersListContainer，但将AddUserContainer移至UsersContainer”将使您更容易控制何时更新组件！

您当前的处理方法和我的想法是相同的：在 UsersContainer中 ，创建一个方法来强制对其进行更新，然后将其传递给
AddUserContainer ，并在此AddUserContainer添加用户之后，在父级上触发该更新方法：

<AddUserContainer onUserAdded={ this.props.updatingParent } />

供您参考，或者对于想要了解在子代（或孙代或曾孙或曾孙）更新时如何更新父组件的任何其他人，请参考我对另一个类似问题的回答：

重定向时重新初始化类

如果仍然保留当前的组件层次结构，则在更新 UsersContainer 时，其子组件（ UsersListContainer 和
AddUserContainer ）也将被更新。但是， AddUserContainer 将再次被更新！

因此，我仍然认为在您的情况下，使用Flux或Redux是一种不错的方法，它消除了将道具通过许多层次的复杂组件层次结构传递的复杂性