useState()的回調實現

通過一個例子說明一下：
功能：按鈕點擊使input組件顯示，顯示後實現input的光標聚焦。
分析：input組件顯示後才能調用input的focus()。

1.定義class的實現方式：

import React from 'react';
import { Button, Input } from 'antd';

class App extends React.Component {
    state = {
        inputVisible: false,
    };

    saveInputRef = input => (this.input = input);

    showInput = () => {
        this.setState({ 
        	inputVisible: true
        }, () => this.input.focus());
    };

    render() {
        return (
            <div>
                {
                    inputVisible &&
                    <Input
                        ref={this.saveInputRef}
                        type="text"
                    />
                }
                <Button onClick={this.showInput}>顯示input</Button>
            </div>
        );
    }
}

export default App;

setState提供了回調函數，當inputVisible的狀態更改爲true後，才能操作this.input.focus()。

2.react Hook中的實現方式：

import React, { useState, useEffect, useRef } from 'react';
import { Button, Input } from 'antd';

const App = props => {
    const [inputVisible, setInputVisible] = useState(false);
    const inputRef = useRef();

    const showInput = () => {
        setInputVisible(true);
    };

    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    }, [inputVisible])

    render() {
        return (
            <div>
                {
                    inputVisible &&
                    <Input
                        ref={inputRef}
                        type="text"
                    />
                }
                <Button onClick={showInput}>顯示input</Button>
            </div>
        );
    }
}

export default App;

首先通過useRef獲取到input元素，useState不能再使用像class中那種回調函數的方式。
所以要使用useEffect，當它監聽到inputVisible的變化，這時說明state中的inputVisible已經變爲true，這時即可執行focus()。