Nullable<T>

ReactHooksを使う

February 07, 2019

React 16.8.0 がリリースされ、正式にHooksが使えるようになった。

Basic Hooks

  • useState
  • useEffect
  • useContext

useState

import React, { useState } from "react";

const useCount = () => {
    const [count, setCount] = useState(0);

    return { count, setCount };
}

const App = () => {
    const { count, setCount } = useCount();
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

export default App;

useEffect

import React, { useState, useEffect } from "react"

const useCount = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(`count ${count}`)
    })

    return { count, setCount }
}

const App = () => {
    const { count, setCount } = useCount()
    return (
        <div>
            <p>You clicked {count} times and see console</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

export default App;

useContext

import React, { useState, useContext, createContext } from "react"

const CounterContext = createContext()

const CounterProvider = ({ children }) => {
    const [count, setCount] = useState(0)
    const value = { count, setCount }
    return (
        <CounterContext.Provider value={value}>
            <p>
                Provider: {value.count}
            </p>
            {children}
        </CounterContext.Provider>
    )
}

const CounterConsumer = () => {
    const { setCount, count } = useContext(CounterContext)
    return (
        <div>
            <p>
                Consumer: {count}
            </p>
            <button onClick={() => setCount(count + 1)}>
                button
            </button>
        </div>
    )
}

const App = () => {
    return (
        <div>
            <CounterProvider>
                <CounterConsumer />
            </CounterProvider>
        </div>
    )
}

export default App;

React.ComponentとFunctionalComponent

StatelessFunctionalComponentStateを持てるようになり componentDidMountcomponentDidUpdateと同等のメソッドも使えるようになった。

FunctionalComponent派とClassComponent派で戦うことになりそう。

これまでは、Stateを持ちたいならClassComponentSlatelessならStatelessFunctionalComponentのように、ルールがなくてもある程度統一感のあるソースになっていたが、 今後はそうではなくなるので、チームでのルールが重要になりそう。

個人的にはFunctionalComponentが優勢になってClassComponentは将来的に駆逐されるんじゃないかなーって思ってる

おわりに

BasicHooks以外 ( useReduceruseMemo ) もちゃんと触る


Written by Ryo @neer_chan

© 2018-2020 Nullable<T>