Reacts/Flux 的存储应该是 GUI 整个状态的快照吗？答案

【问题标题】：Should Reacts/Flux' stores be a snapshot of the whole state of a GUI?Reacts/Flux 的存储应该是 GUI 整个状态的快照吗？
【发布时间】：2015-02-03 07:09:57
【问题描述】：

简短的问题：看起来应用程序的状态可以完全从 React/Flux 存储中序列化。我已经在输入值和其他内容中看到了这一点，但是动画或悬停效果是什么？我应该使用经典的:hover CSS 选择器来实现悬停效果，还是应该使用 mouseenter 和 -leave 事件并在我的商店中保存悬停状态？

【问题讨论】：

标签： reactjs flux

【解决方案1】：

如果您的悬停效果很小，例如光标上的指针等，我会主要使用 CSS。如果你想做更大的 DOM 操作，我会使用React。您不应该使用存储来确定组件的状态，它应该只在发生操作后将数据分发给组件。这意味着组件应该知道它当前处于哪个状态，然后确定应该发生什么。这是一个带有“哑”组件的小示例，除了它自己的状态外，它没有任何类型的数据更新。

var SmallTooltip = React.createClass({

 getInitialState: function () {
   return {
     showTooltip: false
   };
 },

 onMouseEnter: function () {
   this.setState({
     showTooltip: true
   });
 },

 onMouseLeave: function () {
   this.setState({
     showTooltip: false
   });
 },

 render: function () {
   var toolTipClass = !this.state.showTooltip ? 'tooltip hidden' : 'tooltip';
   return (
    <span onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} className='someCoolWrapperClass'>
      <span className={toolTipClass}>
        This is shown when you hover over the span
      </span>
    </span>
   );
 }
});

您可以在此组件中轻松发送数据并进行其他数据操作，使其成为更智能的组件。

【讨论】：

谢谢你，很好的例子。