📝

React Hooksを整理する（useState）

2021/03/03に公開

React

tech

gaKnight memo 1

React Hooks

クラスを書かなくても、状態(state)が管理できる優れもの。
この「クラスを書かなくてもいい」というところがポイントでHooksが無かった時代（React v16.8前）は

sample

class Sample extends React.Component<Props> {
  constructor(props) {
  　super(props)
   //状態を定義
   this.state = {
    // クラスでは、コンストラクタ内で、this.stateの初期値をセット
      counter: 0,
      open: true
    }
  }
  
  handleOpen = () => {
   this.setState({open: !this.state.open})
  }
  
  render(): React.ReactNode {
    return ...
  }
}

だるすぎ！！！！
ってなるので、もっと簡潔に書きましょう。

sample

export const Sample: React.FC<Props> = ({}) => {
 const [counter, setCounter] = useState<number>(0)
 const [open, setOpen] = useState<boolean>(true)

 const toggle = () => setOpen(!open)
 
 return (
  ...
 )
}

React Hooks

Discussion