React学习笔记—虚拟DOM

Tonny 发布于2019-08-22 10:56 / 1025人阅读

摘要：虚拟之所以快，是因为它不直接操作。此外，实现了一套完整的事件合成机制，能够保持事件冒泡的一致性，跨浏览器执行。大部分情况下，我们都是在构建的组件，也就是操作虚拟。例如就表示组件被插入之前。组件更新后执行组件被移除前执行获取真实的强制更新

React对底层的代码作了封装，在大多数情况下，我们不需要直接去操作DOM。但是有时候我们还是需要使用到底层的代码的，比如输入框获取焦点，这个时候可以通过第三方的类库或者React提供的API实现。

虚拟DOM

React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中。
此外，React实现了一套完整的事件合成机制，能够保持事件冒泡的一致性，跨浏览器执行。甚至可以在IE8中使用HTML5的事件。
大部分情况下，我们都是在构建React的组件，也就是操作虚拟DOM。但是有时候我们需要访问底层的API，可能或通过使用第三方的插件来实现我们的功能，如jQuery。React也提供了接口让我们操作底层API。

Refs和findDOMNode()

为了同浏览器交互，我们有时候需要获取到真实的DOM节点。我们可以通过调用React的React.findDOMNode(component)获取到组件中真实的DOM。

  React.findDOMNode()只在mounted组件中调用，mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常。

看官方的示例：

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      
        
        
      
    );
  }
});

React.render(
  ,
  document.getElementById("example")
);

组件的生命周期

组件的生命周期主要由三个部分组成：

Mounting：组件正在被插入DOM中

Updating：如果DOM需要更新，组件正在被重新渲染

Unmounting：组件从DOM中移除

React提供了方法，让我们在组件状态更新的时候调用，will标识状态开始之前，did表示状态完成后。例如componentWillMount就表示组件被插入DOM之前。

Mounting

getInitialState()：初始化state

componentWillMount()：组件被出入DOM前执行

componentDidMount()：组件被插入DOM后执行

Updating

componentWillReceiveProps(object nextProps):组件获取到新的属性时执行，这个方法应该将this.props同nextProps进行比较，然后通过this.setState()切换状态

shouldComponentUpdate(object nextProps, object nextState):组件发生改变时执行，应该将this.props和nextProps、this.stats和nextState进行比较，返回true或false决定组件是否更新

componentWillUpdate(object nextProps, object nextState)：组件更新前执行，不能在此处调用this.setState()。

componentDidUpdate(object prevProps, object prevState)：组件更新后执行

Unmounting

componentWillUnmount()：组件被移除前执行

Mounted Methods

findDOMNode()：获取真实的DOM

forceUpdate()：强制更新

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

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

React学习笔记

摘要：单向数据流数据一旦更新，会渲染整个。的渲染方式用户输入从获取数据将数据传给顶层组件将每个组件渲染出来由于是单向数据流，所以不会有双向数据绑定数据模型的脏检查确切的操作。你觉得你用的react框架有什么特点呢？ 1)使用jsx语法，可以在js中写html。2)单向数据流：数据一旦更新，会渲染整个app。react的渲染方式：用户输入从API获取数据将数据传给顶层组件 React将...

taoszu 2019-08-23 15:59 评论0 收藏0
React学习笔记—数据展示

摘要：我们使用最基本的事就是用来展现数据。使得展现数据变得简单，并且当数据改变时，能自动保持的更新。使用了内部的虚拟，当数据发生改变，先在虚拟中计算变化，最后将变动的部分反应到真实的中。可以把它看作有着和状态并且可以返回结构的函数。我们使用UI最基本的事就是用来展现数据。React使得展现数据变得简单，并且当数据改变时，React能自动保持UI的更新。开始创建一个简单的Demo： ...

Magicer 2019-08-21 10:28 评论0 收藏0
《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0
学习MVVM及框架的双向绑定笔记

摘要：的数据劫持版本内部使用了来实现数据与视图的双向绑定，体现在对数据的读写处理过程中。这样就形成了数据的双向绑定。 MVVM由以下三个内容组成 View：视图模板 Model：数据模型 ViewModel：作为桥梁负责沟通View和Model，自动渲染模板在JQuery时期，如果需要刷新UI时，需要先取到对应的DOM再更新UI，这样数据和业务的逻辑就和页面有强耦合。在MVVM中，U...

VioletJack 2019-08-23 15:04 评论0 收藏0
react入门笔记

摘要：是程序的入口文件自动化测试定义组件扩大点击区域虚拟的生成数据模板数据模板生成虚拟虚拟就是一个对象，用它来描述真实损耗了性能用虚拟的结构生成真实的来显示发生变化数据模板生成新的虚拟极大提升了性能数据更新比较原始虚拟和新的虚拟的区别找到区别极大 Index.js是程序的入口文件 PWA progressive web application(registerServiceWorker) A...

Hanks10100 2019-08-26 12:23 评论0 收藏0