2019.12.16

React Hooks

doiken

こんにちは、土居です。赤ちゃんがどんどん重くなってきて、しばらく抱っこしているとかなりズッシリきますが、その分成長を実感しています。

Hooks

ReactのHooks機能が16.8.0より正式版になりましたが　、実はまだ使ったことなかったのでちょっと触ってみました。Hooksを使えば、classを書くことなくstateを用いることができるようです。

Hooksとは?

class componentでは以下のようにしてコンストラクタでstateにデフォルトをセットしたりしていますが

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = this.defaultState();

    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value})
  }
}

HooksのuseStateを使うと関数コンポーネント内でこんな感じで書くことができて、
stateに引数で渡したデフォルト、setValueにstateを更新できる関数が返ってきます。

const App = () => {
  const [state, setValue] = useState(defaultState);
}

その他のHook

useEffect

コンポーネントのマウント/アンマウント時ににデータを取ってくるときに、class componentのライフサイクルでは
以下のようにやっていたのを

class App extends React.Component {
  <!-- マウント時にしたい処理 -->
  componentDidMount() {
    setValue();
  }
  <!--　アンマウント時にしたい処理 -->
  componentWillUnMount() {
    cleanUp();
  }
  <!-- 更新時 -->
  componentDidUpdate() {
    cleaUp();
    setValue();
  }
}

useEffectを使うと関数コンポーネント内でこう書けて、記述量も減っています。

const App => {
  useEffect(() => {
    setValue();
    return () => {
      cleanUp();
    }
  });
}

useReducer

複数の値についてstateを更新したり、今のstateの値をみたい場合などは以下のようにreducer関数を用意した上で、
useReducerを使うと、typeによって動作を切り替えるdispatch関数が返されます。useStateの応用みたいな感じですね。
この辺りは業務で使っているNuxt.jsのVuexに似ていたので、馴染みがありました。

const reducer = (state, action) => {
  switch (action.type) {
    case "request":
      return {
        ...state,
        fetching: true,
        errorMessage: null,
      };
    case "success":
      return {
        ...state,
        fetching: false,
        movies: action.payload
      }
    default:
      return state;
  }
}
const App = () => {
  const [state, dispatch] = useReducer(reducer, defaultState);

  dispatch({
    type: "requesst",
    payload: result.item
  })

  result = fetch();

  dispatch({
    type: "success",
    payload: result.item
  })
}