美文网首页
React 和 ReactDOM

React 和 ReactDOM

作者: 爱吃豆包 | 来源:发表于2019-11-19 16:47 被阅读0次

ReactDOM API:只有 findDOMNode 、 unmountComponentAtNoderender

(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>
    );
  }
}

React 官网还有其他的API

相关文章

网友评论

      本文标题:React 和 ReactDOM

      本文链接:https://www.haomeiwen.com/subject/wfiwictx.html