在React组件的开发实现中,我们并不会用到ReactDOM,只有顶层组件以及由于React模型所限而不得不操作DOM的时候,才会使用它。
1.6.1 ReactDOM
- findDOMNode
- render
- unmoutComponentAtNode(很少使用,是个用于卸载的操作)
1.findDOMNode
DOM真正被添加到HTML中生命周期方法是componentDidMount和componentDidUpdate方法。
React提供的获取DOM元素的方法有两种,
其中一种就是ReactDOM提供的findDOMNode:DOMElement findDOMNode(ReactComponent component)
import React,{ Component } from 'react';
import ReactDOM from 'react-dom';
export default class Demo extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
// this 为当前组件的实例
const dom = ReactDOM.findDOMNode(this);
console.log(dom)
}
render() {
}
}
2.render
因为要把React渲染的V DOM渲染到浏览器的DOM当中,就要使用render方法:
ReactComponent reder(
ReactElement element,
DOMElement container,
[function callback]
)
该方法把元素挂载到container,并返回element的实例(即用refs引用)。如果是无状态的组件,render会返回null。当组件装载完成时,callback就会被调用。
下节直接进入第二章,漫谈React