Question

完成Alt网站上的guide后，如果Alt使用Reacts状态设置属性，我会感到困惑吗？在part 3 - 使用商店，它说

商店中任何地方定义的实例变量都将成为状态。

然后在商店中放置一个变量：

this.locations = [];

然而，如果我进入主要的React组件并记录状态，当然在给出位置数据之后，除了道具之外，我得到了未定义的内容？

loggState() {
  console.log(this.state); // undefined
  console.log(this.locations); // undefined
  console.log(this.props.locations); // [object][object]..
}

使用Alt时，有人可以解释状态和道具之间的关系吗？

Answer 1

在Alt-以及大多数Flux实现中 - 商店是应用程序与组件完全不同的部分。

组件订阅到商店中的更改，然后使用更改的数据更新其本地状态，使其重新呈现。

我们从实例化组件的任何存储状态中派生出使用LocationStore的组件的初始状态。

getInitialState() {
  return LocationStore.getState();
},

然后我们设置订阅，听取商店的更改。

componentDidMount() {
  LocationStore.listen(this.onChange);
},

最后，我们使用订阅处理程序将这些更改应用于组件的本地状态。您决定应用每次更新的方式完全取决于您。

onChange(state) {
  this.setState(state);
},

每当我们使用新状态调用this.setState时，该组件将重新渲染。

您还可以使用higher-order component订阅商店，然后将商店的状态转换为道具并将其传递给包装组件。在这种情况下，您的组件根本不需要是有状态的。

React Flux库Alt是否使用React的状态？

1 个答案: