Когда использовать состояние и когда реквизит?

Question

Я изучаю принципы реакции.

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

Но другие люди говорят, что если вам нужно обновить свой компонент, вам следует научиться устанавливать состояние в правильное состояние.

Я видел this.props/this.setProps и this.state/this.setState, и я смущаюсь с этим.

Что-то, что я пытаюсь понять, как я могу обновить компонент самостоятельно, а не от родительского компонента? следует ли использовать реквизит или состояние в этом случае?

Я уже прочитал некоторые документы о реквизитах и ​​состоянии, что у меня не ясно: когда использовать тот или иной?

Answer 1

Реквизит против государства сводится к тому, «кому принадлежат эти данные?»

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

Если компонент управляет данными сам, он должен использовать состояние и setState для управления им.

Таким образом, ответ на

как я могу обновить компонент сам по себе, а не от родительского компонента? следует ли использовать реквизит или состояние в этом случае?

предназначено для использования.

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

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

    render: function() { 
    return <Clicker count={this.state.count} incrementCount={this.increment} />; 
    }, 

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

// Notice that Clicker is stateless! It's only job is to 
// (1) render its `count` prop, and (2) call its 
// `incrementCount` prop when the button is clicked. 
var Clicker = React.createClass({ 
    render: function() { 
    // clicker knows nothing about *how* to update the count 
    // only that it got passed a function that will do it for it 
    return (
     <div> 
     Count: {this.props.count} 
     <button onClick={this.props.incrementCount}>+1</button> 
     </div> 
    ); 
    } 
}); 

(Рабочий пример: https://jsbin.com/rakate/edit?html,js,output)

Для и объектно-ориентированного программирования аналогия, думать класс/объект: состояние бы свойство вы положили на классе; класс может обновлять их по своему усмотрению. Реквизиты будут похожи на аргументы методов; вы никогда не должны мутировать аргументы, переданные вам.

---

Сохраняя компонент «без гражданства» означает, что он не имеет ни одно государство, и все его рендеринг основывается на его реквизита. Конечно, должно быть состояние где-то, иначе ваше приложение ничего не сделает! Таким образом, это руководство в основном говорит, чтобы поддерживать как можно больше компонентов без гражданства и управлять состоянием всего лишь в нескольких компонентах верхнего уровня.

Хранение компонентов без гражданства облегчает их понимание, повторное использование и тестирование.

См. A brief interlude: props vs state в документах React для получения дополнительной информации.

Answer 2

Использовать состояние, когда вы знаете, что значение переменной влияет на представление. Это особенно важно для реагирования, потому что всякий раз, когда изменяется переменная состояния, появляется ревердер (хотя это оптимизировано с помощью виртуального DOM, вы должны свести его к минимуму, если можете) , но не при изменении пропеллера (вы можете заставить это, но на самом деле не нужен).

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

Если вы хотите сделать несколько выберите выпадающее меню под названием MyDropdown, например

state = { 
    show: true, 
    selected:[], 
    suggestions:this.props.suggestionArr.filter((i)=>{ 
     return this.state.suggestions.indexOf(i)<0; 
    }) 
} 

props={ 
    eventNamespace:'mydropdown', 
    prefix : 'm_', 
    suggestionArr:[], 
    onItemSelect:aCallbackFn 
} 

Как вы можете видеть, объекты государственной переменной будет влиять на мнение, так или другой. Объекты в реквизитах - это в основном объекты, которые должны оставаться неизменными на протяжении всего жизненного цикла компонентов. Таким образом, эти объекты могут быть функциями обратного вызова, строками, используемыми для событий имен или других держателей.

Так что если вы хотите обновить компонент сам по себе, вам нужно иметь, чтобы посмотреть, как работает в componentWillRecieveProps, componentWillUpdate, componentDidUpdate и componentShouldUpdate. Более того, это зависит от требования, и вы можете использовать эти методы жизненного цикла, чтобы гарантировать, что рендеринг находится внутри компонента, а не в родительском.