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

【问题标题】：Does React Flux library Alt use React's state?React Flux 库 Alt 是否使用 React 的状态？
【发布时间】：2016-05-06 06:20:49
【问题描述】：

在 Alt 网站上完成 guide 后，我很困惑 Alt 是否使用 Reacts 状态来设置属性？在part 3 - 使用商店，它说

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

然后它会在 store 中放入一个变量：

this.locations = [];

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

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

谁能解释一下使用 Alt 时 state 和 props 之间的关系？

【问题讨论】：

标签： javascript reactjs flux

【解决方案1】：

在 Alt（实际上是大多数 Flux 实现）中，存储区是应用程序中与组件完全不同的部分。

组件订阅存储中的更改，然后使用更改的数据更新其本地状态，导致它重新渲染。

当我们实例化组件时，无论商店的状态是什么，我们都会派生使用 LocationStore 的组件的初始状态。

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

然后我们设置订阅，监听商店的变化。

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

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

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

每次我们用新状态调用this.setState，组件都会重新渲染。

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

【讨论】：