ref与DOM-findDomNode-unmountComponentAtNode知识点及应用例子

 知识点

1. 理解react的框架使用中，真实dom存在的意义。

2. 使用真实dom和使用虚拟dom的场景。

3. 灵活掌握并能够合理使用操作真实dom的方法。

 ReactDOM只包含了unmountComponentAtNode()、findDOMNode()、createPortal()和render()等为数不多的几个方法

 1、真实dom存在的意义

        什么情况下需要真实的dom节点？react的虚拟dom不能实现的原生dom的api的情况

        比如：文本框自动聚焦，音频视频相关的api，获取元素的宽高和位置等。

        基本原则是：能不用真实dom节点尽量不用，实在不能用虚拟dom的时候，才使用真实dom节点。再一种情况是，现有的一些库是针对dom操作而构建的，那么想要把这些库和react结合在一起，就必须要使用真实dom节点，比如swiper betterScroll echarts等等。
 

 

---

 findDOMNode()

        React提供获取DOM元素的方法有两种，其中一种就是 findDOMNode：当组件被渲染到DOM中后，findDOMNode返回该React组件实例相应的DOM节点。它可以用于获取表单的value以及用于DOM的测量。

        另外一种：在虚拟dom中添加ref属性，即可在组件实例的refs属性中获取该真实dom节点。由于组件实例化的时候，真实dom节点是在最后才生成的，获取真实dom节点应该是在componentDidMount这个生命周期中：

class HelloWorld extends Component{
    render(){
        return <div>
            <h1 ref="h">hello worldh1>
        div>
    }
    componentDidMount(){
        console.log(this.refs.h); // 打印的是h1这个dom节点。
    }
 
}

注意，findDOMNode()只能获取已挂载的组件，并且不能用于函数组件。在组件的生命周期中，它只能存在于componentDidMount()和componentDidUpdate()两个回调函数中

 unmountComponentAtNode()

unmountComponentAtNode该方法的作用是：从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state

比如：许多文件，勾选一个下载，如果不使用unmountComponentAtNode方法清除时间，会出现即使勾选另外一个文件，但下载的还是第一次勾选的文件

参考图片里的写法

 

需求: (下载/导出 用post请求时:)

实例:   react部分代码

1、点击下载按钮，需要传给后端数据，到数据扁平，不是那么复杂，只需url地址即可完成下载，后端不用处理复杂数据，就可以这样写下载/导出:

---

页面显示: 这样写法调接口，在Network中不显示

点击按钮"全部导出"

---

2、下载/导出，需要传给后端数据，如果这个数据复杂，有对象，有数组，会这样调接口进行下载/导出

通过先调一个接口传值，给后端，后端处理好，返回一个url地址，前端window.open(url)，实现下载/导出。这个过程点击下载按钮实际上调用两次接口，实现下载，一次axios.post，一次windoe.open