Реагирование рендеринга с состоянием или реквизитом

Question

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

getInitialState:
    data: this.props.data

Следующий код для функции рендера

1.

data = this.state.data
return (<Component data={data} />)

2.

return (<Component data={this.state.data} />)

3.

return (<Component data={this.props.data} />)

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

Answer 1

Положить реквизит в таком состоянии:

getInitialState: function () {
  return {
    someKey: this.props.someKey
  };
}

является анти-паттерном, если вы не собираетесь изменять значение someKey позже, и вы используете опору как начальное значение.

Так что, если вы не измените значение пропущенной опоры, вы должны пойти с номером три.

Разница в том, что компонент, который не имеет состояния, может считаться "чистым" (одни и те же пропускаемые данные дают одинаковый результат каждый раз), и эти компоненты почти всегда легче рассуждать. Дублирование опоры в состоянии без изменения состояния просто дает вам больше строк кода в компоненте, и это может запутать кого-то еще, читающего код. Это чистый компонент, замаскированный под нечистый компонент.

Answer 2

Еще немного о реквизите и состоянии. Реквизит и состояние связаны между собой. Состояние одного компонента часто становится опорой дочернего компонента. Реквизиты передаются дочернему элементу в методе рендеринга родителя в качестве второго аргумента React.createElement() или, если вы используете JSX, более знакомых атрибутов тега.

<MyChild name={this.state.childsName} />

Значение родительского состояния childsName становится дочерним this.props.name. С точки зрения ребенка, имя опора является неизменным. Если это нужно изменить, родитель должен просто изменить свое внутреннее состояние:

this.setState({ childsName: 'New name' });

и Реакт распространит это для ребенка для вас. Естественный последующий вопрос: что, если ребенку нужно сменить опору? Обычно это делается через дочерние события и родительские обратные вызовы. Дочерний объект может представлять событие, называемое, например, onNameChanged. Затем родитель подписывается на событие, передавая обработчик обратного вызова.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

Дочерний объект будет передавать запрашиваемое новое имя в качестве аргумента обратного вызова события, вызывая, например, this.props.onNameChanged('New name'), и родительский объект будет использовать имя в обработчике событий для обновления своего состояния.

handleName: function(newName) {
   this.setState({ childsName: newName });
}