到底React Hooks有何特別（二）？淺談useEffect及useReducer

於本篇文章的上集，我們討論了useState如何令Stateful React component簡化良多，此篇主要討論的是如何使 用useEffect。useEffect可以簡化stateful logic，很多人都提到 React Hooks 有可能可以完全取代Redux作為 React State Management的標準，正因如此。

重溫

上集提到，使用useState可以將原本class based component變成簡單的 functional component。

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
        };
        this.incrementCounter = this.incrementCounter.bind(this);
    }
    incrementCounter() {
        this.setState((state) => ({
            counter: state.counter + 1,
        }));
    }
    render() {
        return (
            <h1 onClick={this.incrementCounter}>
                Hello, {this.props.name}
                {this.state.counter} times
            </h1>
        );
    }
}

變成

function Welcome(props) {
    const [counter, setCounter] = useState(0);
    return (
        <h1 onClick={() => setCounter((counter) => counter + 1)}>
            Hello, {props.name}
            {counter} times
        </h1>
    );
}

UseEffect

此例子中並無諸如componentDidUpdate、componentDidMount、componentWillUnmount等方法，React Hooks到底如何有效於 function 中取代呢？答案就是運用 useEffect。 舉例加上componentDidMount及componentWillUnmount，來初始化及重置counter。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
        };
        this.incrementCounter = this.incrementCounter.bind(this);
    }
    componentDidMount() {
        this.setState({
            counter: 10,
        });
    }

    componentWillUnmount() {
        this.setState({
            counter: 0,
        });
    }
    incrementCounter() {
        this.setState((state) => ({
            counter: state.counter + 1,
        }));
    }
    render() {
        return (
            <h1 onClick={this.incrementCounter}>
                Hello, {this.props.name}
                {this.state.counter} times
            </h1>
        );
    }
}

componentDidMount算是component的setup logic，當component一載入完成就會開始運行。 componentWillUnmount算是component的teardown logic，當component臨缷載前開始運行。

以useEffect方法寫，出乎意料簡潔：

function App(props) {
    const [counter, setCounter] = useState(0);
    useEffect(() => {
        setCounter((counter) => 10);
        return () => {
            setCounter((counter) => 0);
        };
    }, []);
    return (
        <h1 onClick={() => setCounter((counter) => counter + 1)}>
            Hello, {props.name}
            {counter} times
        </h1>
    );
}

多出來的只是一段如下的代碼：

useEffect(() => {
    // componentDidMount is here!
    setCounter((counter) => 10);
    return () => {
        // componentWillUnmount is here!
        setCounter((counter) => 0);
    };
}, []);

第一個**setCounter(counter=>10)**是隨我們Welcome一起載入運行，而在return的function則是此effect的 teardown logic，也就是為清理 資源而寫的。你可能會問，那麼這段邏輯取代了 componentDidMount、componentDidUpdate、componentWillUnmount 那個呢？

• 原本應在componentDidMount 的是 setCounter(counter=>10)
• 原本應在componentWillUnmount 的是 setCounter(counter=>0)

那componentDidUpdate呢？ 有趣的是，上面並沒有對應 componentDidUpdate的地方，因為在useEffect第二個參數，有一個empty array。第二個參數是此effect的dependency，React會儲起每次這個array的數值，如果在下一次update的時候發現這個array改變了，就代表了 這個effect需要重新運行。由於一個empty array永遠都是一樣，所以我們這個useEffect只會運行一次！如果沒有了第二個參數，那就變成了 componentDidUpdate +componentDidMount了。

useEffect(() => {
    // componentDidMount is here!
    // componentDidUpdate is here!
    setCounter((counter) => 10);
    return () => {
        // componentWillUnmount is here!
        setCounter((counter) => 0);
    };
});

有了dependency 這個參數，可以輕易做到相當reactive的UI，例如僅當props改變，這個effect才會跟著改變，我們可以輕易寫成這個樣子

useEffect(() => {
    // componentDidMount is here!
    // componentDidUpdate is here!
    setCounter((counter) => 10);
    return () => {
        // componentWillUnmount is here!
        setCounter((counter) => 0);
    };
}, [props]);

請留意第二個參數需要一個array。 以下是一個在Github Pages的live Example：

UseReducer

React Hooks當然不只useState及useEffect兩個方法，還有一個備受注目的，就是useReducer。 useReducer是React團隊方便開 發者使用reducer pattern而加入。

要使用useReducer，寫法也是非常簡單。

function counterReducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { counter: state.counter + 1 };
        default:
            return { counter: 0 };
    }
}

function App(props) {
    const [state, dispatch] = useReducer(counterReducer, { counter: 10 });
    return (
        <h1 onClick={() => dispatch({ type: 'INCREMENT' })}>
            Hello, {props.name}
            {state.counter} times
        </h1>
    );
}

上面 counterReducer是正常reducer的寫法，只有一個簡單action，就是INCREMENT。 useReducer會return兩個數值，第一個就 是state，第二個就是對應reducer的dispatch function，所以當一運行dispatch({type:"INCREMENT"})時，就會把counter加了1。

此段代碼於上面CodeSandbox裏面的index-reducer.js之內。

總結

useEffect及useReducer 都大大簡化了React寫複雜代碼的難度。當然順帶一提的時， React Hooks還是處於實驗性質的功能，各位尚未可以 應用於現實世界的軟件上的。不過由於功能强大，有取代現有複雜框架之勢，相當可能廣泛使用。