React 和 ReactDOM

ReactDOM API：只有 findDOMNode 、 unmountComponentAtNode 和 render

（1）findDOMNode

DOM真正添加到HTML中的生命周期方式是：componentDidMount() 和 componentDidUpdate() 方法。在这两个方法中获取真正的DOM元素进行操作。

就可以使用非常多的原生 DOM API 可以用

React提供的获取DOM 元素的方法有两种：
第一种就是ReactDOM提供的 findDOMNode。
第二种就是 ref 方式。

ReactDOM 中的 findDOMNode 方式获取DOM实例：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
    componentDidMount() {
      console.log('组件挂载 DOM 后')
      // this 为当前组件的实例
      const dom = ReactDOM.findDOMNode(this);
    }
    render() {
    }
}

refs 方式获取DOM实例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
  }
  render() {
    return 
{this.props.children}
;
  }
}

（2）render

这个函数在顶层组件中是必用的！
因为要把React渲染的Virtual DOM(虚拟DOM)渲染到浏览器中的DOM中，就必须使用这个函数！
该函数把元素挂载到实例中，并且返回这个DOM实例（即refs引用），当组件装载完毕时，会调用 callback 函数，如果无状态组件，render返回null

当组件在初次渲染之后再次更新时，React 不会把整个组件重新渲染一次，而会用它高效的DOM diff 算法做局部的更新。这也是 React 最大的亮点之一！
此外，与 render 相反，React 还提供了一个很少使用的 unmountComponentAtNode() 方法来进行卸载操作。

ReactDOM.render(element, container[, callback])

// 例子：
import App from './App';
ReactDOM.render(, document.getElementById('root'));

ReactDOM 的不稳定性：

指的是一个 unstable_renderSubtreeIntoContainer() 这个API，它的作用很简单，就是更新组件到传入的 DOM 节点上。

（3）refs

如果使用 ReactDOM.render() 来渲染，会得到一个组件实例！
但是在 JSX 中不会返回一个组件的实例，它只是一个ReactElement，只是告诉React被挂载的组件应该是什么样的：

const myApp = ;

refs 就是为此而生的，它是 React 组件中非常特殊的 prop，可以附加到任何一个组件上。从字
面意思来看， refs 即 reference，组件被调用时会新建一个该组件的实例，而 refs 就会指向这个实例；
它可以是一个回调函数，这个回调函数会在组件被挂载后立即执行

例子：通过 ref 获取DOM实例进行操作原生API操作，比如 获取 input 焦点

import React, { Component } from 'react';
class App extends Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      if (this.myTextInput !== null) {
        // 操作原生的API，获取焦点
        this.myTextInput.focus();
      }
    }
  render() {
    return (
        

            // 指定  ref
             this.myTextInput = ref} />
            
        
    );
  }
}

React 官网还有其他的API