Состояние и реквизит изменяются?

Question

Предположим, что у меня есть компонент реагирования - кнопка - это увеличивает значение, когда я нажимаю на него.

Например

var Component = React.createClass({ 
    getInitialState: function() { 
     return {count: 0} 
    }, 

    increment: function() { 
     this.setState({count: this.state.count + 1}) 
    }, 

    render: function() { 
     return (<button onClick={this.increment}>{this.state.count}</button>); 
    } 
}) 

React.render(<Component />, document.getElementById('react-container')); 

состояние изменчиво!

я могу сделать подобную вещь с реквизитом

var Component = React.createClass({ 
    increment: function() { 
     this.setProps({count: this.props.count + 1}) 
    }, 

    render: function() { 
     return (<button onClick={this.increment}>{this.props.count}</button>); 
    } 
}) 

React.render(<Component count={0}/>, document.getElementById('react-container')); 

состояние изменчиво!

Некоторые из ресурсов, которые я проверил, говорят, что реквизиты неизменяемы, но затем идите и делайте что-то вроде setProps. Различные ресурсы противоречат друг другу. Это затрудняет мне понимание разницы между состоянием и реквизитом.

Являются ли реквизиты изменчивыми? Если нет, то почему я могу их изменить? Похоже, что изменение реквизита - это не хорошая практика, это правда? Если да, то почему существует setProps?

Answer 1

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

• Используйте обратный вызов пропеллер, чтобы уведомить родитель, что-то произошло - родитель может тогда видоизмениться данными, которые он владеет, и передать его обратно в ребенок через реквизит.
• Используйте состояние компонента, как в первом примере.

Что общего у обоих этих решений состоит в том, что одному компоненту принадлежат данные, и это единственный компонент, который позволяет его модифицировать - это обычно называется «Единственным источником правды». Самое замечательное в структурировании вашего кода таким образом заключается в том, что это означает, что вы не застреваете в путаницах кода спагетти, пытающихся работать, кто мутирует часть данных.

Answer 2

this.props и this.stateмогут быть мутировать, но это на самом деле просто следствие изменчивости объектов в JS.

Ваше утверждение о том, что this.setState мутирует текущее состояние, неверно; создается новый объект, представляющий состояние, с внесенными изменениями.

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

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