Reacts/Flux商店应该是GUI整个状态的快照吗? [英] Should Reacts/Flux' stores be a snapshot of the whole state of a GUI?

问题描述

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

Short question: It looks like the state of an app can be serialized completely from a React/Flux store. I've seen this with input values and other stuff, but what is with animations or hover effects? Should I use a classic :hover CSS selector for hover effects or should I use mouseenter and -leave events and save hover states in my store?

推荐答案

如果您的悬停效果很小，例如光标上的指针等，我将主要使用CSS. 如果要进行更大的DOM操作，可以使用React. 您不应使用存储来确定组件的状态，而应仅在操作发生后才将数据分发到组件. 这意味着该组件应该知道当前处于什么状态，然后确定应该发生什么情况.这是一个带有哑巴"组件的小示例，除了其自身的状态外，该组件没有任何类型的数据更新.

If your hover effects are small, like pointer on cursor, etc., I would use mostly CSS. If you want to do bigger DOM manipulations I would use React. You should not use the store to determine the state of a component, it should only distribute data around to the components after an action has occurred. This means that it is the component that should know which state it currently is, and then determine what should happen. Here is a small example with a "dumb" component which does not have any kind of data updates, except its own state.

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>
   );
 }
});

您可以轻松地在该组件内发送数据并进行其他数据操作，以使其成为更智能的组件.

You can easily send in data and do other data manipulations within this component to make it a smarter component.

这篇关于Reacts/Flux商店应该是GUI整个状态的快照吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！