知识点
理解react的框架使用中,真实dom存在的意义。
使用真实dom和使用虚拟dom的场景。
灵活掌握并能够合理使用操作真实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 world</h1> </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