反応状態

コンポーネントの状態を操作する方法

デフォルト状態の設定

コンポーネントコンストラクターで、初期化しますthis.state。たとえば、BlogPostExcerptコンポーネントにはclicked状態：

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
</div>
)
}
}

状態へのアクセス

ザ・クリックした状態は参照することでアクセスできますthis.state.clicked：

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
render() {
return (
<div>
<h1>Title</h1>
<p>Description</p>
<p>Clicked: {this.state.clicked}</p>
</div>
)
}
}

状態を変化させる

を使用して状態を変更しないでください

this.state.clicked = true

代わりに、常に使用する必要がありますsetState()代わりに、オブジェクトを渡します。

this.setState({ clicked: true })

オブジェクトには、状態のサブセットまたはスーパーセットを含めることができます。渡したプロパティのみが変更され、省略されたプロパティは現在の状態のままになります。

常に使用する必要がある理由`setState()`

その理由は、この方法を使用すると、Reactは状態が変化したことを認識しているためです。次に、コンポーネントが再レンダリングされることにつながる一連のイベントが開始されます。DOM更新。

一方向のデータフロー

状態は常に1つのコンポーネントによって所有されます。この状態の影響を受けるデータは、その下のコンポーネント、つまりその子にのみ影響します。

コンポーネントの状態を変更しても、その親、兄弟、またはアプリケーション内の他のコンポーネントには影響しません。子だけに影響します。

これが、状態がコンポーネントツリーで頻繁に上に移動する理由です。

ツリー内で状態を上に移動する

単方向データフロールールにより、2つのコンポーネントが状態を共有する必要がある場合は、状態を共通の祖先に移動する必要があります。

多くの場合、最も近い祖先が状態を管理するのに最適な場所ですが、これは必須のルールではありません。

状態は、小道具を介してその値を必要とするコンポーネントに渡されます。

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
render() {
return (
<div>
<Display currency={this.state.currency} />
<CurrencySwitcher currency={this.state.currency} />
</div>
)
}
}

状態は、変更関数を小道具として渡すことにより、子コンポーネントによって変更できます。

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
handleChangeCurrency = event => {
this.setState({ currency: this.state.currency === ‘€’ ? ‘$’ : ‘€’ })
}
render() {
return (
<div>
<Display currency={this.state.currency} />
<CurrencySwitcher
currency={this.state.currency}
handleChangeCurrency={this.handleChangeCurrency}
/>
</div>
)
}
}
const CurrencySwitcher = props => {
return (
<button onClick={props.handleChangeCurrency}>
Current currency is {props.currency}. Change it!
</button>
)
}
const Display = props => {
return <p>Current currency is {props.currency}.</p>
}

私の無料ダウンロードReactハンドブック