ref与DOM-findDomNode-unmountComponentAtNode

课程目标

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

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

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

知识点

react中提供了ref这个属性来获取原生的dom节点，使用方式：在虚拟dom中添加ref属性，即可在组件实例的refs属性中获取该真实dom节点。由于组件实例化的时候，真实dom节点是在最后才生成的。所以，我们获取真实dom节点应该是在componentDidMount这个生命周期中。

class HelloWorld extends Component{

render(){

return <div>

<h1 ref="h">hello world</h1>

</div>

}

componentDidMount(){

consolelog(thisrefsh); // 打印的是h1这个dom节点。

}

}

ref也可以使用在组件标签上使用，此时获取的是该组件标签的组件实例。如下：

class Button extends Component{

render(){

return <button>确定</button>

}

}

let btn = ReactcreateElement()

propsref function

propsref(btn)

class HelloWrold extends Component{

getBtnThis = btn => {

consolelog(btn) // Button组件的第二个组件实例

}

render(){

return <div>

<Button ref="btn"></Button>

/

let btn = new Button()

btnref === typeof function

btnref(btn)

}

findDomNode这个方法可以根据组件实例（每个组件实例都对应的有一段dom节点获取该组）件实例所对应的真实dom节点。该方法的使用如下

/

context 一个组件的组件实例

dom 该组件实例所对应的真实dom节点。

/

const dom = ReactfindDomNode(context);

unmountComponentAtNode该方法的作用是：从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state。如果在 container 内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回 true；如果没有组件被移除1，则返回 false。

const result = ReactunmountComponentAtNode(DOMElement container)

掌握在什么情况下需要真实的dom节点；react的虚拟dom不能实现的原生dom的api的情况，比如：文本框自动聚焦，音频视频相关的api，获取元素的宽高和位置等。基本原则是：能不用真实dom节点尽量不用，实在不能用虚拟dom的时候，才使用真实dom节点。再一种情况是，现有的一些库是针对dom *** 作而构建的，那么想要把这些库和react结合在一起，就必须要使用真实dom节点，比如swiper betterScroll echarts等等。

授课思路

是不是设置过他的styleheight我遇到过这种情况。可能是你在CSS里面设置了 canvas的width和height是画布的实际宽高 canvas的styleheight是他显示出来的宽和高，如果上下2个的大小不一样，会把上面的图形拉伸/缩小到下面的大校

1documentgetElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2documentgetElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3documentgetElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4documentgetElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5documentquerySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6documentquerySelectorAll("div")

获取所有满足条件的元素

7三个特殊节点

8childNodes 所有节点。包括各种节点

9fristChild 获取一个元素的第一个子节点

10lastChild 获取一个元素的最后一个子节点

11parentNode 获取一个元素的父节点

12previousSibling 获取一个元素的上一个兄弟节点

13nextSibling 获取一个元素的下一个节点

14children 只获取子元素

15firstElementChild 获取第一个元素子节点

16lastElementChild 获取最后一个元素子节点

17nextElementsibling 获取下一个元素兄弟节点

18previousElementsibling 获取上一个元素兄弟节点

19parentElement 获取父元素节点

20childElementCount 获取子元素的个数

1documentcreateElement(元素名) 创建一个元素节点

2documentcreateTextNode("这是新创建的一段文本") 创建一个文本节点

3appendChild() 添加元素到容器中

4insertBefore() 在一个节点前插入新节点

5removeChild() 删除子节点

6replaceChild() 替换子节点

7cloneNode() 克隆节点 传入true则复制所有节点

8setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9romveAttribute() 删除属性

参数：要删除的属性名

10getAttribute() 获取属性的值

参数：属性名

11访问 元素 id 名

boxid

12访问 元素 class 名

boxclassName

boxclassList 类数组

13获取标签名

boxtagName

boxnodeName

14innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15innerText属性

16outerHTML

跟innerHTML相比多包括了一个它自身

1访问行内（内联）样式表

2内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

eCharts总体架构：

eCharts的底层库 Zrender，用面向对象的方式把实体抽象成为图形元素，调用 Canvas API设置样式，然后构建路径，进行图形元素渲染。

M - 数据管理层（storage），负责存储元素，进行增删改查。

C – 控制层（handle），负责事件处理，重要是是监听事件的作用坐标。

V – 视图层（painter），负责绘图 *** 作，canvas元素生命周期管理，视图渲染，更新控制。

eCharts前端初始化流程：

1、为eCharts准备一个具备大小（宽高）的Dom

      <div id="main" style="width: 600px;height:400px;"></div>

2、基于准备好的dom，初始化echarts实例

      var myChart = echartsinit(documentgetElementById('main')，‘null’，{renderer：‘svg’});

3、指定图表的配置项和数据

       var option = { … }

4、使用刚指定的配置项和数据显示图表。

     myChartsetOption(option);

eCharts初始化底层实现关键步骤：

1获取并记录dom成全局变量：__DEV__。

2校验当前dom上是否存在Echarts图表实例： getInstanceByDom(dom)

3创建一个图表实例 ：new ECharts(dom, theme, opts)

    1)调用载ZRender绘图引擎，创建一个实例zr：zrenderinit（）

        a)根据参数选用canvas或GVG渲染器：renderer

        b)根据参数配置图表分辨比：devicePixelRatio

        c)根据参数配置图表尺寸：width、height

    2)做一个事件监听（信息中心）：new EventProcessor（）

    3)准备图表和组件的视图实例 ：prepareView（）

        a)根据系列类型选择模型：doPrepare（）

        b)创建视图实例：new Clazz( )

    4)根据配置项注册图表项

        a)注册主题：registerTheme（）

        b)注册选项预处理器：registerPreprocessor（）

        c)注册处理器：registerProcessor（）

        d)注册坐标系统：registerCoordinateSystem（）

        e)注册图表布局：registerLayout（）

        f)注册图表行为：registerAction（）

        g)注册视图：registerVisual（）

    5)渲染组件：renderComponents（）

    6)渲染每个图表：renderSeries（）

        a)数据渲染：zrstoragegetDisplayList()

        b)更新覆盖层状态updateHoverLayerStatus（）

    7)为实例初始化鼠标事件：initEvents（）

    8)启用连接，进行状态设置等：enableConnect(chart);

说明：本文仅为个人解读，欢迎指正

以上就是关于ref与DOM-findDomNode-unmountComponentAtNode全部的内容，包括:ref与DOM-findDomNode-unmountComponentAtNode、怎么改变ECharts的canvas的width和height、JS DOM对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！