應該反應/ Flux'商店是一個GUI的整個狀態的快照？

Question

簡短的問題：它看起來應用程序的狀態可以完全從React/Flux商店序列化。我已經看到這與輸入值和其他的東西，但動畫或懸停效果是什麼？我是否應該使用經典的:hover CSS選擇器進行懸停效果，還是應該使用mouseenter和-leave事件並在商店中保存懸停狀態？

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

您可以輕鬆發送數據並在此組件中執行其他數據操作，使其成爲更智能的組件。