（三）回调 ref 中调用次数问题

class Demo {

    showInfo = () => {
        let {input} = this
        alert(input.value)
    }

    render() {
        return (
            <div>
                <input ref={(currentNode) => this.input = currentNode; console.log('@', currentNode)}/>
                <button onClick={this.showInfo}>点我提示输入数据</button>
            </div>
        )
    }
}

ReactDOM.render(<Demo/>, document.getElmentById('test'))

class Demo {

    state = {isDemo = true}

    showInfo = () => {
        const { isDemo }  = this.state
        this.setState({
            isDemo: !isDemo
            })
    }

    render() {
        const {isDemo} = this.state
        return (
            <div>
                <input ref={(currentNode) => this.input = currentNode; console.log('@', currentNode)}/>
                <div>{ isDemo ? '炎热':'凉爽' }</div>
                <button onClick={this.showInfo}>点我切换天气</button>
            </div>
        )
    }
}

ReactDOM.render(<Demo/>, document.getElmentById('test'))

class Demo {


    saveInput = (c) => {
        this.input = c
        console.log(c)
    }

    render() {
        const {isDemo} = this.state
        return (
            <div>
                <input ref={this.saveInput}/>
                <button onClick={this.showInfo}>点我切换天气</button>
            </div>
        )
    }
}

ReactDOM.render(<Demo/>, document.getElmentById('test'))