React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

Gemini 发布于2019-08-21 17:34 / 1366人阅读

摘要：多余的操作其实是代码里面的噪音，不利于我们理解和维护。下一节中我们将介绍小书和容器类组件。

React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson21

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

在 React.js 当中你基本不需要和 DOM 直接打交道。React.js 提供了一些列的 on* 方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener 的 DOM API；以前我们通过手动 DOM 操作进行页面更新（例如借助 jQuery），而在 React.js 当中可以直接通过 setState 的方式重新渲染组件，渲染的时候可以把新的 props 传递给子组件，从而达到页面更新的效果。

React.js 这种重新渲染的机制帮助我们免除了绝大部分的 DOM 更新操作，也让类似于 jQuery 这种以封装 DOM 操作为主的第三方的库从我们的开发工具链中删除。

但是 React.js 并不能完全满足所有 DOM 操作需求，有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框，你需要调用 input.focus() 的 DOM API，比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画，等等。

React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点，你可以给某个 JSX 元素加上 ref属性：

class AutoFocusInput extends Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
       this.input = input} />
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

可以看到我们给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成以后，React.js 就会调用这个函数，并且把这个挂载以后的 DOM 节点传给这个函数。在函数中我们把这个 DOM 元素设置为组件实例的一个属性，这样以后我们就可以通过 this.input 获取到这个 DOM 元素。

然后我们就可以在 componentDidMount 中使用这个 DOM 元素，并且调用 this.input.focus() 的 DOM API。整体就达到了页面加载完成就自动 focus 到输入框的功能（大家可以注意到我们用上了 componentDidMount 这个组件生命周期）。

我们可以给任意代表 HTML 元素标签加上 ref 从而获取到它 DOM 元素然后调用 DOM API。但是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。

顺带一提的是，其实可以给组件标签也加上 ref ，例如：

 this.clock = clock} />

这样你获取到的是这个 Clock 组件在 React.js 内部初始化的实例。但这并不是什么常用的做法，而且也并不建议这么做，所以这里就简单提及，有兴趣的朋友可以自己学习探索。

下一节中我们将介绍《React.js 小书 Lesson22 - props.children 和容器类组件》。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89682.html

React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
React.js 小书 Lesson13 - 渲染列表数据

摘要：一般来说，的值可以直接后台数据返回的，因为后台的都是唯一的。下一节中我们将介绍小书实战分析评论功能一。 React.js 小书 Lesson13 - 渲染列表数据本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson13 转载请注明出处，保留原文链接以及作者信息在线阅读：http://huziketang.com/books/...

Alan 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson25 - 实战分析：评论功能（四）

摘要：接下来是实战环节，我们会继续上一阶段的例子，把评论功能做得更加复杂一点。把已经发布的评论持久化，存放到浏览器的中。评论显示发布日期，如秒前，分钟前，并且会每隔秒更新发布日期。事件监听方法，。下一节中我们将介绍小书实战分析评论功能五。 React.js 小书 Lesson25 - 实战分析：评论功能（四）本文作者：胡子大哈本文原文：http://huziketang.com/book...

mozillazg 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息

摘要：上面的代码小书经过编译以后会变成小书会构建一个对象里描述你结构的信息，包括标签名属性还有子元素等。第二个原因是，有了这样一个对象。负责把这个用来描述信息的对象变成元素，并且渲染到面上。下一节中我们将介绍小书组件的方法。 React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息本文作者：胡子大哈本文原文：http://huziketang.com/books/rea...

ChanceWong 2019-08-21 17:33 评论0 收藏0