React Hooks [1] useState

7064 ワード

useState


関数構成部品でステータスを管理するためのHook.
useStateを呼び出すと、最初のパラメータがステータス値であり、2番目のパラメータがステータスを設定する関数である配列が返されます.
// TS

function React.useState<undefined>
  (): [undefined, React.Dispatch<(prevState: undefined) => undefined>] 
       (+1 overload)

function React.useState<number>
  (initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>] 
                                            (+1 overload)
                                            
function React.useState<string>
  (initialState: string | (() => string)): [string, React.Dispatch<React.SetStateAction<string>>] 
                                            (+1 overload)
宣言と使用
import React, { useState } from 'react';

const [value, setValue] = useState(defaultValue);

<button onClick={() => setValue(value editing)}></button>
非構造化文法を使用するのが好きでない場合は、
import * as React from 'react';

const value = React.useState(defaultValue)[0];
const setValue = React.useState(defaultValue)[1];

<button onClick={() => setValue(value editing)}></button>