react异步更新、寻找DOM

1.react异步更新

react异步更新指的是this.setState()是异步更新的，异步更新之后怎么获取更新之后值，有两种方法：

1.1 componentDidUpdate生命周期函数获取更新之后的值

componentDidUpdate:已经更新生命周期函数中打印state中的数据是更新后的值

  componentDidUpdate(prevProps, prevState) {
        console.log(2, prevState.name, this.state.name)  // 张三, 李四
  }

1.2 在this.setState()的回调函数中获取更新后的值

this.setState的第二个参数是可选的回调，是异步更新完成时的回调，在该回调函数中获取更新后的值

this.setState({
                 name: "李四"
                }, ()=>{
// this.setState的第二个参数是可选的回调, 是异步更新完成时的回调 (与小程序setData相同)
                 console.log(3, this.state.name)  // 李四
                // 注意: this.setState数据更新属于异步更新, 此处打印是更新前的值 
                console.log(1, this.state.name)  // 张三

2.react查找DOM

在react组件中获取DOM元素的三种方式：

2.1 给标签设置ref属性

给标签设置ref属性，通过this.refs调用(老版本语法，将要废除)

<h1 ref="myH1"></h1>
this.refs.myH1

2.2 在构造器中创建ref全局变量

在构造器中创建ref全局变量，在标签中ref属性动态绑定这个全局变量，通过全局变量的current字段调用

      constructor(props) {
        super(props);
        this.d2 = React.createRef()
      }

<div ref={this.d2}>2</div>
 console.log(this.d2.current);

2.3 在标签ref属性绑定函数

在标签ref属性绑定函数，在函数中定义全局变量赋值，通过全局变量调用

    <h3 ref={ ele => this.myH3 = ele }></h3>
    this.myH3

注意：1.在父组件中用ref获取子组件对象，必须保证子组件是类组件，函数式组件获取结果是undefined

2.父组件中子组件标签绑定ref属性，父组件使用ref获取子组件对象后，可以对子组件状态数据和函数执行调用和修改