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()。