React系列(一)-脚手架创建项目
 React系列(二) – react基础知识

React和Vue一样，大多数情况下是不需要操作DOM元素的。只需要关注组件的状态(state)，使用(setState)来更新状态，从而使页面UI更新。但也有特殊情况下需要操作DOM的。
例如：

处理焦点、文本选择和媒体控制
触发强制动画
集成第三方DOM库

ref

React提供的这个属性，如果ref设置在原生HTML上，就是获取这个DOM元素；如果设置在组件上，就是获取这个组件的实例。
ps: 函数组件不能使用ref回去实例
ps：获取DOM元素时，在组件mount之后再获取，componentWillMount和第一次render都获取不到，在componentDidMount才能获取到

string方式直接绑定（不推荐，以后可能废弃）

import React from 'react';

class App extends React.Component {
    
    // componentDidMount是一个生命周期函数，在页面渲染完成后调用
    componentDidMount() {
        console.log(this.refs.content) // <div>Hello, World!</div>
    }
    
    render() {
        return (
            <div ref="content">Hello, World!</div>
        )
    }
}

export default App;
复制代码

结果:

callback回调函数形式（推荐）

import React from 'react';

class App extends React.Component {
    
    componentDidMount() {
        console.log(this.content) // <div>Hello, callback!</div>
    }
    
    render() {
        return (
            <div ref={e => this.content = e}>Hello, callback!</div>
        )
    }
}

export default App;
复制代码

结果:

createRef() (最新方式)

import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.content = React.createRef();
    }
    
    componentDidMount() {
        // 通过current属性才可以获取到dom元素
        console.log(this.content.current) // <div>Hello, Wrold!</div>
    }
    
    render() {
        return (
            <div ref={e => this.content = e}>Hello, Wrold!</div>
        )
    }
}
复制代码

结果：

ForwardRef获取子组件实例

import React from 'react';

const Test = React.forwardRef((props,ref)=>{
  return (
      <div ref={ref}>{props.txt}</div>
  )
})


class App extends React.Component {

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

  componentDidMount() {
    console.log(this.content.current) // <div>测试</div>
  }

  render() {
    return (
      <div>
        <Test ref={this.content} txt="测试" />
      </div>
    )
  }
}

export default App;
复制代码

结果:

给元素添加样式

import React from 'react';

class App extends React.Component {

    constructor(props) {
        this.content = React.createRef();
    }
    
    componentDidMount() {
        // 设置背景颜色
        this.content.style.background = 'red'
    }
    render() {
        return (
            <div ref={e => this.content = e}></div>
        )
    }
}
复制代码