React 中 *** 作 DOM 的方法

在以往的工作当中，通常会遇到需要处理 DOM 的时候， DOM *** 作属于一个常规的范畴，我们可能需要通过它绑定一个事件、调整滚动条的位置、管理焦点、文本选择、媒体播放等等。

基于工程页面、逻辑复杂性、复用性等等因素可以选择合适的方案方便我们 *** 作 DOM 。

在页面比较简单和逻辑并不复杂的时候，我们可以根据实际情况选择比较简单的选择器方案；当工程逻辑较复杂的时候，我们要考虑组件的复用性、多人协作的不可控性等多种因素，选择方案的时候往往要考虑更多可能的场景。

如上所述，如果我们的使用场景单一，不需要复用的话，我们可以保证获取的 DOM 一致性的时候，可以考虑使用选择器获取 DOM 。

可以使用 documentgetElementXX 开头的方法：

可使用方法如下：

实际使用场景：

页面逻辑复杂的时候会有复用性的问题，如果使用 id 或者选择器就容易引发问题，这时我们可以选择使用 ref 。

ref 可以获取到相应的 DOM 节点，而且也可以得到详细信息，它得到的一个对象，包括 props，state 等。

React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。 ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。

ref 的值根据节点的类型而有所不同：

React 也支持另一种设置 refs 的方式，称为“回调 refs”。

不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

父组件想要 *** 作子组件且没有控制权的时候可以选择使用 findDOMNode 。

findDOMNode 只在已挂载的组件上可用（即：已经存在 DOM 中的组件）。如果尝试调用未挂载的组件将会引发异常。

findDOMNode 不能用于函数组件。

如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用，例如获取表单字段的值或者执行 DOM 检测。

当组件渲染的内容为 null 或 false 时，findDOMNode 也会返回 null。当组件渲染的是字符串时，findDOMNode 返回的是字符串对应的 DOM 节点。从 React 16 开始，组件可能会返回有多个子节点的 fragment，在这种情况下，findDOMNode 会返回第一个非空子节点对应的 DOM 节点。

react 项目

create react app + 下面命令

Note: 项目中必须有packagejson ， 否则上面的命令会报错

1- 按照依赖

2- 配置脚本

3- Create the main file (告诉storybook去哪找stories)

4- write stories

每个story是组件的一个状态，如上例：按钮组件的两个实例

Button

├── With Text

└── With Emoji

5- 启动storybook

1- 获取完整的webpack默认配置

// storybook/mainjs

执行命令

2- webpackFinal添加配置

函数

参数： 第一个参数是storybook使用的webpack配置，第二个参数是接收的来自storybook的对象， 可以告诉你这些配置来自哪里

For example, here’s a storybook/mainjs to add Sass support:

添加插件配置

Using Your Existing Config---merge two config

默认情况下，Storybook加载根babelrc文件并加载这些配置。但有时这些选择可能会导致故事书抛出错误。

在这种情况下，您可以为Storybook提供一个定制的babelrc。为此，在Storybook config目录中创建一个名为babelrc文件的文件（默认情况下，它是Storybook）。

然后Storybook将只从该文件加载Babel配置。目前我们不支持packagejson中的 Babel config

1- Typescript configuration presets

2- Setting up TypeScript with ts-loader

3- Setting up TypeScript with babel-loader

3- Using TypeScript with the TSDocgen addon

storybook info addon 能自动为每个组件生成属性表文档， 但是不适用与typescript

解决方案：react docgen typescript loader预处理typescript文件，以向Info插件提供所需的内容，webpack配置如上

组件正常使用info即可

请参阅react docgen typescript loader文档，以向typescript接口写入属性说明和其他注释。

可以在storybook/previewjs中添加其他的说明

注意：对于只导出为默认值的组件，无法生成组件docgen信息。通过使用命名导出导出组件，可以解决此问题。

4- Setting up Jest tests

This is an example jestconfigjs file for jest:

6- Building your TypeScript Storybook

react的事件是合成事件((Synethic event)，不是原生事件

<buttononClick={thishandleClick}></button><inputvalue={thisstatename}onChange={thishandleChange}/>

合成事件与原生事件的区别

1 写法不同，合成事是驼峰写法，而原生事件是全部小写

2 执行时机不同，合成事全部委托到document上，而原生事件绑定到DOM元素本身

3 合成事件中可以是任何类型，比如thishandleClick这个函数，而原生事件中只能是字符串

react事件执行大致流程如下图

React中的事件机制分为两个阶段:事件注册和事件触发:

事件注册

React在组件加载(mount)和更新(update)时,其中的ReactDOMComponent会对传入的 事件属性 进行处理，对相关事件进行注册和存储。document中注册的事件不处理具体的事件，仅对事件进行分发。ReactBrowserEventEmitter作为事件注册入口，担负着事件注册和事件触发。注册事件的回调函数由EventPluginHub来统一管理，根据事件的类型(type)和组件标识(_rootNodeID)为key唯一标识事件并进行存储。

事件执行

事件执行时，document上绑定事件ReactEventListenerdispatchEvent会对事件进行分发，根据之前存储的类型(type)和组件标识(_rootNodeID)找到触发事件的组件。ReactEventEmitter利用EventPluginHub中注入(inject)的plugins(例如:SimpleEventPlugin、EnterLeaveEventPlugin)会将原生的DOM事件转化成合成的事件，然后批量执行存储的回调函数，回调函数的执行分为两步，第一步是将所有的合成事件放到事件队列里面，第二步是逐个执行。需要注意的是，浏览器原生会为每个事件的每个listener创建一个事件对象，可以从这个事件对象获取到事件的引用。这会造成高额的内存分配，React在启动时就会为每种对象分配内存池，用到某一个事件对象时就可以从这个内存池进行复用，节省内存。

1减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次

2统一规范，解决 ie 事件兼容问题，简化事件逻辑

3对开发者友好

React Event的主要四个文件是ReactBrowerEventEmitterjs（负责节点绑定的回调函数，该回调函数执行过程中构建合成事件对象，获取组件实例的绑定回调并执行，若有state变更，则重绘组件），ReactEventListenerjs（负责事件注册和事件分发），ReactEventEmitter（负责事件的执行），EventPluginHubjs（负责事件的存储）和ReactEventEmitterMixinjs（负责事件的合成）。

1进入统一的事件分发函数(dispatchEvent)

2结合原生事件找到当前节点对应的ReactDOMComponent对象

3开始事件的合成

31 根据当前事件类型生成指定的合成对象

32 封装原生事件和冒泡机制

33 查找当前元素以及他所有父级

34 在listenerBank查找事件回调并合成到 event(合成事件结束)

4批量处理合成事件内的回调事件（事件触发完成 end）

1创建项目

2cd到该文件夹

3运行（开发模式）

如果再起一个服务器，可能会出现端口号不会自动排的现象，针对这种情况，可以在packagejson中自行设置端口号，如下图

4模拟数据服务器

    41  >

当然默认的权重是最低的，实际开发很多时候还是使用三元

React中的DOM也是虚拟DOM（virtual DOM），这点跟我们以前讲的Vue非常类似。只有当它插入文档以后，才会变成真实的DOM。React也是在虚拟DOM发生变化时，进行比对后，只渲染变化的部分，它是React极高性能的主要原因之一。

OK 初始化一下，写个效果是什么呢？就是点击Button的时候，给input添加光标

比较简单不多说，其实我个人在vue中比较喜欢偏向vdom的 *** 作，react还不熟悉！

目的 : 获取文本框的值

工具 : reactjs

要想获取文本框的值，首先我们需要看一下官方文档的解释：

这里的意思是说当文本框的内容改变的时候，文本框的输入的内容就会作为一个参数进行传递。因此我们就可以获取到文本框里面的内容就好了。

提供以下代码可供参考使用:

     super (props)

     thisstate = {

       screen: thisinitScreen(),

       txtValue: null,

       dataSource: new ListViewDataSource({

         rowHasChanged: (row1, row2) => row1 !== row2

       }),

       loaded: false

     }

   }

 。。。。

  <TextInput

    selectTextOnFocus = {true}

    onChangeText={(text) => {

    thisstatetxtValue = text

    thisgetContent()

    }}

 。。。

 /获取文本框中的值/

 getContent () {

     ToastAndroidshow(thisstatetxtValue, ToastAndroidLONG)

   }

以上就是关于React 中 *** 作 DOM 的方法全部的内容，包括:React 中 *** 作 DOM 的方法、storybook2 --- React、react事件注册等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！