[React] 11.React -ref的使用

要实现的功能：计算出‘增加’按钮距离浏览器顶部的距离，如下图所示

1. 给按钮增加一个ref属性，一般来说，让它等于一个函数，该属性用于获取元素的dom，代码如下：

<button onClick={this.handleBtnClick} ref={(button)=>{this.buttonElem = button}}>增加</button>

点击按钮之后，console出buttonElem,如下

2. 可通过buttonElem.clientTop获取button距顶部的距离

console.log(this.buttonElem.clientTop);

打印出来的距顶部距离为2，如下：

3. 若把ref属性加到组件标签上，获取组件实例：

<Child ref={(child)=>{this.childElem = child}} number={this.state.counter}/>

总结：ref写在html标签上，获取的是dom节点；
ref写在组件标签上，获取的是组件的js实例

完整代码如下：

import React, {Component, Fragment} from "react";
import Child from "./child";

class Counter extends Component {

    constructor(props) {
        super(props);
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.state = {
            counter: 1
        }
    }

    handleBtnClick() {
        // ref写在html标签上，获取的是dom节点；
		// ref写在组件标签上，获取的是组件的js实例
        console.log(this.buttonElem.clientTop);
        console.log(this.childElem)
        const newCounter = this.state.counter + 1
        // setState是异步的
        this.setState(() => {
            return {
                counter: newCounter
            }
        },() => {
            
        });
    }

    render() {
        console.log('render')
        // 当组件初次创建的时候，rendere函数会被执行一次
        // 当state数据发生变更的时候，render函数会被重新执行
        // 当props数据发生变更的时候，render函数会被重新执行
        return (
            <Fragment>
                <button onClick={this.handleBtnClick} ref={(button)=>{this.buttonElem = button}}>增加</button>
                <Child ref={(child)=>{this.childElem = child}} number={this.state.counter}/>
            </Fragment>
        )
    }
}

export default Counter