回调ref中回调执行次数的问题

<script type="text/babel">

        //创建组件

        class Demo extends React.Component{

            state = {isHot:false}

            showInfo = ()=>{

                const {input1} = this

                alert(input1.value)

            }

            changeWeather = ()=>{

                //获取原来的状态

                const {isHot} = this.state

                //更新状态

                this.setState({isHot:!isHot})

            }

            saveInput = (c)=>{

                this.input1 = c;

                console.log('@',c);

            }

            render(){

                const {isHot} = this.state

                return(

                    <div>

                        <h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>

                        {/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}

                        <input ref={this.saveInput} type="text"/><br/><br/>

                        <button onClick={this.showInfo}>点我提示输入的数据</button>

                        <button onClick={this.changeWeather}>点我切换天气</button>

                    </div>

                )

            }

        }

        //渲染组件到页面

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

    </script>

 

官方说明：

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。