React.js Понимание setState

Question

Я уже учился в React.js, написав приложение небольшого калькулятора. Я думал, что все идет хорошо, пока я не узнал, что setState асинхронен, и поэтому мои мутации не сразу применяются.

Таким образом, мой вопрос заключается в том, как наилучшим образом поддерживать текущую сумму на основе значений, добавляемых к вводу. Возьмем следующий пример:

var Calculator = React.createClass({ 
    total : 0, 

    getInitialState : function(){ 
    return { 
     value : '0' 
    }; 
    }, 

    onValueClicked : function (value) { 
    var actual, total, current = this.state.value; 

    if(value === '+') { 
     actual = this.total = parseInt(this.total, 10) + parseInt(current, 10); 
    } else { 
     if(parseInt(current, 10) === 0) { 
     actual = value; 
     } else { 
     actual = current.toString() + value; 
     } 
    } 

    this.setState({ value : actual }); 
    }, 

    render : function() { 
    return (
     <div className="calc-main"> 
     <CalcDisplay value={this.state.value} /> 
     <CalcButtonGroup range="0-10" onClick={this.onValueClicked} /> 
     <CalcOpButton type="+" onClick={this.onValueClicked} /> 
     </div> 
    ) 
    } 
}); 

var CalcDisplay = React.createClass({ 
    render : function() { 
    return (
     <input type="text" name="display" value={this.props.value} /> 
    ); 
    } 
}); 

var CalcButtonGroup = React.createClass({ 
    render : function() { 
    var i, buttons = [], range = this.props.range.split('-'); 

    for(i = range[0]; i < range[1]; i++) { 
     var handler = this.props.onClick.bind(null, i); 

     buttons.push(<CalcNumberButton key={i} onClick={ handler } />); 
    } 

    return (
     <div className="calc-btn-group">{ buttons }</div> 
    ); 
    } 
}); 

var CalcNumberButton = React.createClass({ 
    render : function() { 
    return (
     <button onClick={this.props.onClick}>{this.props.key}</button> 
    ); 
    } 
}); 

var CalcOpButton = React.createClass({ 
    render : function() { 
    var handler, op = this.props.type; 

    handler = this.props.onClick.bind(null, op); 

    return (
     <button onClick={handler}>{op}</button> 
    ); 
    } 
}); 

React.renderComponent(<Calculator />, document.getElementById('container')); 

В приведенном выше примере я полностью отказался от хранения суммы в пределах штата и оставил ее снаружи. Я прочитал, что вы можете запустить обратный вызов, когда setState закончил, но в случае калькулятора мне нужно, чтобы он был быстрым и быстро обновлялся. Если состояние не обновляется при каждом нажатии кнопки, и я быстро нажимаю кнопки - все будет выпадать из синхронизации. Является ли обратный вызов всем, что мне не хватает, или я думаю об этом совершенно неправильно?

Любая помощь оценена!

Answer 1

Это асинхронный, но намного быстрее, чем самый быстрый человеческий клик.

---

Кроме того, вы должны объявить переменные экземпляра в компоненте Component, например.

componentDidMount: function(){ 
    this.total = 0; 
} 

... но в этом случае вы, вероятно, захотите сохранить его в состоянии.

---

.split возвращает массив строк, вы хотите использовать номера:

range = this.props.range.split('-').map(Number) 

Или избежать строки вообще (предпочитаемый) с одним из них:

<CalcButtonGroup range={[0, 10]} onClick={this.onValueClicked} /> 
<CalcButtonGroup range={{from: 0, till: 10}} onClick={this.onValueClicked} /> 

Answer 2

You определите переменную total для вашего состояния бизнес-логики. Почему бы не хранить больше информации?

var Calculator = React.createClass({ 
    previous: 0, // <-- previous result 
    current: 0, // <-- current display 
    op: '', // <-- pending operator 

    getInitialState : function(){ 
    return { 
     value : '0' 
    }; 
    }, 

    onValueClicked : function (value) { 
    var actual; 

    if(value === '+') { 
     this.previous = this.current; 
     this.op = '+'; 
     actual = 0; // start a new number 
    } else if (value === '=') { 
     if (this.op === '+') { 
     actual = this.previous + this.current; 
     } else { 
     actual = this.current; // no-op 
     } 
    } else { 
     actual = current * 10 + value; 
    } 

    this.current = actual; // <-- business logic state update is synchronous 
    this.setState({ value : String(actual) }); // <-- this.state is only for UI state, asynchronous just fine 
    }, 

    render : function() { 
    return (
     <div className="calc-main"> 
     <CalcDisplay value={this.state.value} /> 
     <CalcButtonGroup range="0-10" onClick={this.onValueClicked} /> 
     <CalcOpButton type="+" onClick={this.onValueClicked} /> 
     <CalcOpButton type="=" onClick={this.onValueClicked} /> 
     </div> 
    ) 
    } 
}); 

Основная идея разрешить this.state это использовать другие переменные для хранения бизнес-логика состояния, и запас this.state только для состояния пользовательского интерфейса.

PS. Реальный калькулятор имеет более сложную бизнес-логику, чем это. Вы должны четко определить каждое состояние и состояние машины в спецификации.