Stateって？

Stateって？

Reactのcomponentは状態を持つことができ、その内部の状態のことをStateと呼びます
propsは親->子に対し、stateは所持する内部でのみ利用されます。
また、propsは変更不可に対し、stateは変更することが可能となっています.
またクラスコンポーネントのみがstateを所持することができます。

import React, {Component} from 'react'
import PropTypes from 'prop-types'

const App = () => (<Counter></Counter>)

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }

  render() {
    return(
      <div>count: {this.state.count}</div>
    )
  }
}

stateの値を変更するとき

setStaet()を用いる、this.state.hoge=1などでもいいんじゃないかと思うかもしれないが、直接変更すると値は変わるが描画はされない、一方setStateでは変更して再描画も行ってくれる.

import React, {Component} from 'react'
import PropTypes from 'prop-types'

const App = () => (<Counter></Counter>)

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }

  handleAddCount = () => {
    this.setState({count: this.state.count + 1})
  }

  handleSubCount = () => {
    this.setState({count: this.state.count - 1})
  }

  render() {
    return(
      <React.Fragment>
        <div>count: {this.state.count}</div>
        <button onClick={this.handleAddCount}>+1</button>
        <button onClick={this.handleSubCount}>-1</button>
      </React.Fragment>
    )
  }
}

export default App;