ReactDom（render、findDOMNode、unmountComponentAtNode）

目录

ReactDom

render

findDOMNode

unmountComponentAtNode

---

ReactDom

react-dom是React剥离出的涉及DOM操作的部分。

render

render用于将React渲染的虚拟DOM渲染到浏览器DOM。

注意有可选参数callback函数，当组件装载完毕时，callback 就会被调用。

render(ReactElement element,DOMElement container,[function callback])

findDOMNode

用于获取真正的DOM元素，以便对DOM节点进行操作。

可以传入组件或ref来获取原生dom（ref加在原生dom上，获取到的就是原生dom；ref加在组件上，获取到的是组件实例），还可以传入原生dom，获取到的还是原生dom，没什么用；

// 无用
// let  Btn = document.getElementById('btn')
// ReactDOM.findDOMNode(Btn).style.color = 'red'


let btn =  <APP />
cosnt dom=ReactDOM.findDOMNode(btn)

<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM

 

unmountComponentAtNode

用于执行卸载操作，执行在componentWillUnmount之前。

import ReactDOM from "react-dom";
function App() {
  return (
    <button onClick={()=>{ReactDOM.unmountComponentAtNode(rootElement)}}>点击卸载</button>
  )
}
ReactDOM.unmountComponentAtNode(rootElement)}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);