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 <div ref={this.wrapper}>{this.props.children}</div>;
}
}
(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(<App/>, document.getElementById('root'));
ReactDOM 的不稳定性:
指的是一个 unstable_renderSubtreeIntoContainer()
这个API,它的作用很简单,就是更新组件到传入的 DOM 节点上。
(3)refs
如果使用 ReactDOM.render()
来渲染,会得到一个组件实例!
但是在 JSX 中不会返回一个组件的实例,它只是一个ReactElement,只是告诉React被挂载的组件应该是什么样的:
const myApp = <App />;
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 (
<div>
// 指定 ref
<input type="text" ref={(ref) => this.myTextInput = ref} />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
}