Должны ли хранилища Reacts/Flux быть снимками всего состояния GUI?

Question

Короткий вопрос: похоже, что состояние приложения можно полностью сериализовать из хранилища React/Flux. Я видел это с входными значениями и другими вещами, но что с анимацией или зависанием? Должен ли я использовать классический селектор 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> 
    ); 
} 
}); 

Вы можете легко отправить данные и выполнить другие манипуляции с данными внутри этого компонента, чтобы сделать его более умным компонентом.