dom reactnative_reactnative dom - CSDN
精华内容
参与话题
  • react native获取到真实的DOM节点

    千次阅读 2018-12-28 15:35:25
    this.state:开发中,组件肯定要与用户进行交互,React的一大创新就是将组件看成了一个状态机,一开始有一个初始状态,然后用户交互,导致状态变化,从而触发重新渲染页面 1、当用户点击组件,导致状态变化,this....

    this.state:开发中,组件肯定要与用户进行交互,React的一大创新就是将组件看成了一个状态机,一开始有一个初始状态,然后用户交互,导致状态变化,从而触发重新渲染页面

    1、当用户点击组件,导致状态变化,this.setSate方法就修改状态值,每次修改以后,会自动调用this.render方法,再次渲染组件
    2、可以把组件看成一个状态机,根据不同的status有不同的UI展示,只要使用setState改变状态值,根据diff算法算出有差值后,就会执行ReactDom的render方法,重新渲染界面
    this.props和this.state都用于描述组件的特性,区别在于:
    this.props表示那些一旦定义,就不再更改的特性;
    this.state是会随着用户交互而产生改变的特性

    获取真实的Dom节点:
    1、在React Native中,组件并不是真实的DOM节点,而是存在于内存中的一种数据结构,叫虚拟DOM
    2、只有当它插入文档后,才会变成真实的DOM

    在之前的html,JavaScript中需要通过ID,className等来获取,在react native中真实的Dom节点通过ref获取

    clicking(){
    this.setState({
    	title:'变化了'
    })
    //获取topView还有那个Text那个节点:
    this.refs.topView
    this.refs.event 
    }
    render() {
            return (
                <View style={styles.container}>
                    <View style={styles.top_topContainer} ref="topView">
                       <Image style={styles.Icon} source={require('./imgs/hb.jpg')}/>
    			        <TextInput 
    			        style={styles.userStyle}
    			        placeholder='请输入用户名'
    			        clearButtonMode='always' //never 永远不显示删除 always 一直显示  
    			        clearTextOnFocus={true}  //获取焦点时是否清空文字 、
    			        enablesReturnKeyAutomatically={false}  //是否自动启用回车键,有内容就显示,没有就不启用
    			        returnKeyType = 'go'  //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索 
    			        onChangeText={()=>{console.warn('用户名是...')}} //文字修改完重新给state的query赋值
    			        />
    			        <TextInput 
    			        style={styles.userStyle}
    			        placeholder='请输入密码'
    			        clearButtonMode='always' //never 永远不显示删除 always 一直显示  
    			        clearTextOnFocus={true}  //获取焦点时是否清空文字 
    			        password={true}
    			        enablesReturnKeyAutomatically={false}  //是否自动启用回车键,有内容就显示,没有就不启用
    			        returnKeyType = 'go'  //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索 
    			        onChangeText={()=>{console.warn('用户名是...')}} //文字修改完重新给state的query赋值
    			        />
                    </View>
                    <View style={styles.loginStyle}>
                <TouchableOpacity onPress={()=>{this.clicking()}}>
                        <Text style={{textAlign:'center'}} ref="event">文章学习</Text>
                </TouchableOpacity>
            </View>
                </View>
            );
        }
    

    ref就可以获取某一个真实的dom节点

    展开全文
  • ReactJs和React Native的关系

    千次阅读 2018-11-07 13:51:48
    最近在学习和开发react native的过程中,看了社区很多大牛的的文章,自己总结的一些东西。 1.react Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部...

    最近在学习和开发react native的过程中,看了社区很多大牛的的文章,自己总结的一些东西。

    1.react Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你从操作dom中解脱出来,只需要操作数据就会改变相应的dom。

    2.react native的目的是用前端的技术将jsx通过babel编译成reactElement,在创建对应的原生组件在移动端运行的app,但是性能可能比原声app差一点。 

    3.react和react native的底层原理是相同的,都是使用js实现虚拟dom树来驱动页面的渲染,react是驱动HTML dom的渲染,react native是驱动原生组件的渲染。

    4.二者都是基于组件(component)开发,然后组件和组件之间通过props传递方法,每个组件都有一个状态(state),当某个方法改变了这个状态值时,整个组件就会重绘,从而达到刷新。另外,说到重绘就要提到虚拟dom了,就是用js模拟dom结构,等整个组件的dom更新完毕,它会有一个diff的过程,对比出哪些组件发生了变化,然后才渲染到页面,简单来说只更新了相比之前改变了的部分,而不是全部刷新,所以效率很高。

    虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并。

    展开全文
  • React Native学习一:初识React Native

    千次阅读 2017-01-20 13:50:07
    React Native概述什么是React NativeReact Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)...

    React Native概述

    什么是React Native

    React Native是Facebook在React.js Config 2015 大会上推出的一个用于开发Android和iOS App的一个框架。主要编程语言是JavaScript,UI使用JSX(一种语法类似于XML的UI描述语言)。

    React Native与React.js区别

    那么React Native与React.js有什么区别呢?
    任何一种跨平台框架都有两个部分:UI和逻辑。对于这两种技术来说,UI都使用的是JSX,而逻辑都是用的是JavaScript。
    React Native与React.js的主要区别还是JSX,不管是React Native还是React.js,在UI上都是用了一种技术:虚拟DOM(Virtual DOM)。

    那么什么是虚拟DOM呢?
    其实JSX只是一种语法糖。DOM(Document Object Model 文档对象模型)是WEB前端描述网页的一种树形数据结构,WEB通过DOM管理Element,而DOM的效率是比较低的,为了提高DOM的效率,React.js提供了虚拟DOM,这项技术的工作是完全在内存中实现的,而且是增量修改DOM树,所以效率非常高。

    对于WEB来说,在实际渲染时,仍然需要DOM,所以最终渲染时,虚拟DOM仍然要转换成实际DOM。而对于Android或者iOS,就没有DOM的概念,UI完全是本地控件实现的,如Android中的TextView和EditText等。所以React Native就应运而生,如果说React.js是在运行时将虚拟DOM映射成实际DOM,那么React Native就是在运行时将虚拟DOM映射成Android或者iOS的本地控件。
    从这一点可以看出,React.js用于WEB开发,而React Native用于开发Android和iOS App,它们都将UI抽象成虚拟DOM,只是实际运行时,前者将虚拟DOM映射成了DOM,后者将虚拟DOM映射成Android或iOS的本地控件。

    为什么需要 React Native?

    What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.
    摘自2015.3.26 React Native的发布稿,加粗的关键字传达了React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率。这个理念似乎迎合了业界普遍存在的痛点。

    React Native项目成员Tom Occhino发表的React Native: Bringing modern web techniques to mobile,详细描述了React Native的设计理念。Occhino认为尽管Native开发成本更高,但现阶段Native仍然是必须的,因为Web的用户体验仍无法超越Native:

    • Native的原生控件有更好的体验;
    • Native有更好的手势识别;
    • Native有更合适的线程模型,尽管Web Worker可以解决一部分问题,但如图像解码、文本渲染仍无法多线程渲染,这影响了Web的流畅性。

    Occhino没提到的还有Native能实现更丰富细腻的动画效果,归根结底是现阶段Native具有更好的人机交互体验。笔者认为这些例子是有说服力的,也是React Native出现的直接原因。

    “Learn once, write anywhere”同样出自Occhino的文章。因为不同Native平台上的用户体验是不同的,React Native不强求一份原生代码支持多个平台,所以不提“Write once, run anywhere”(Java),提出了“Learn once, write anywhere”。

    这里写图片描述

    这张图是笔者根据理解画的一张示意图,自下而上依次是:

    1. React:不同平台上编写基于React的代码,“Learn once, write anywhere”。
    2. Virtual DOM:相对Browser环境下的DOM而言,Virtual DOM是DOM在内存中的一种轻量级表达方式(原话是lightweight representation of the document),可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信。
    3. Web/iOS/Android:上层与用户交互的UI界面。

    React Native的优势

    上面讲到React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率,是如何实现的呢?

    由于React Native的UI仍然使用Android或iOS的本地控件,所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript,但由于JavaScript是即时编译的,也就是第一次使用时会将JavaScript代码编译成二进制文件,所以JavaScript得运行效率比较高。因此,React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多(国内外比较流行的Hybrid混合开发方式,原理是依赖Android或iOS的webview浏览器显示HTML5,是纯的WEB程序在移动端的运行),因为这些技术直接使用HTML5进行渲染,而HTML5会大量使用DOM技术,DOM在PC端的WEB应用中也不算快,在移动端就更慢了。

    React Native一旦虚拟DOM映射本地控件完成,理论上来说,使用React Native所编写的App的运行效率和我们使用本地语言(Android的Java,iOS的OC或Swift)开发的App达到一致。

    总结:
    基于React Native的App在运行效率上接近于Native App,而且还具有混合开发模式的两个优点:

    • 热更新(无需重新编译上传App即可更新,而且还不用通过App Store审核)
    • 跨平台(降低了学习成本,使用同样的技术开发Android和iOS应用)

    React Native特点

    虚拟DOM

    提到React最先想到的就是虚拟DOM。因为这个想法实现是太好了。简而言之就是,React中UI界面是一棵DOM树,对应的我们创建一个全局唯一的数据模型,每次数据模型有任何变化,都将整个数据模型应用到UI DOM树上,由React来负责去更新需要更新的界面部分。
    传统的DOM比较需要一个节点一个节点比,时间复杂度是O(N3),React 通过分层求异的策略,对 tree diff 进行算法优化,简单说,这种虚拟DOM算法是同级的进行比较,并不进行跨层级比较,所以比较一次只需要O(N)的时间,效率非常高。当然这种情况下如果你对组件进行跨层级的移动,虚拟DOM会认为是删除了一个组件而新建了一个组件,会影响效率,所以开发中一般不进行跨层次的移动组件。
    此外,React对同层级的比较中通过设置唯一 key的策略来优化了比较策略,大大的提高了效率,具体的看下这篇博客—不可思议的react diff,写得很清楚。这里就不再赘述。

    JSX定义界面

    JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,将HTML直接嵌入到JavaScript代码中。看下示例代码:

    var React = require(‘React’);
    var message =
      <div class=“hello”>
        <span>Hello World</span>
      </div>;
    React.renderComponent(message, document.body);

    很奇怪的写法。但是确很直观,开发起来也很快。不需要过多考虑模板的概念,只需要考虑如何用代码构建整个界面。

    单向数据流

    React本身只是View层,对于事件传输层FB建议使用Flux这种单向传输架构。Flux 是一种架构思想,它分为View(视图层)、Action(动作)、Dispatcher(派发器)、Store(数据层)四层。数据流的流向参考下图:
    这里写图片描述

    首先用户访问 View,并通过View 发出用户的 Action。Dispatcher 接到Action后就要求 Store 进行相应的更新。store更新后会发一个事件到View上,最后View更新页面。简单的理解可以认为它是一种全局的消息发布订阅模型。Action可以来自于用户的某个界面操作,比如点击等;也可以来自服务器端的网络返回。当数据模型发生变化时,就触发刷新整个界面。
    看下这篇文章—Flux架构入门。在RN中用的比较多的Flux框架是Redux,可以看这个链接进行学习—Redux自述

    独特的数据模型

    React的所有数据都是只读的,如果需要修改它,那么你只能产生一份包含新的修改的数据。这样做是为了让代码更加的安全和易于维护。React将用户界面看做简单的状态机器。当组件处于某个状态时,那么就输出这个状态对应的界面。在React中,只要简单的去更新某个组件的状态,React就公以最高效的方式去比较两个界面并更新DOM树。

    React-Native生命周期

    与Activity类似,RN也有自己的生命周期。先看下我在网上找的一张生命周期图,很完整:
    这里写图片描述

    下面分点讲下各种方法:

    • getDefaultProps:在组件创建之前,会先调用 getDefaultProps(),这是全局调用一次。在组件被创建前加载。
    • getInitialState(),来初始化组件的状态。
    • componentWillMount:准备开始加载组件。在整个生命周期中只被调用一次,可以在这里做一些业务初始化操作,也可以设置组件状态。
    • componentDidMount:在组件第一次绘制之后调用,这个函数调用的时候,其虚拟DOM已经构建完成,你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是,RN 框架是先调用子组件的componentDidMount(),然后调用父组件的函数。从这个函数开始,就可以和 JS 其他框架交互了,例如设置计时setTimeout 或发起网络请求。这个函数之后,就进入了稳定运行状态,等待事件触发。
    • componentWillReceiveProps:如果组件收到新的props,就会调用componentWillReceiveProps(),在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState()来更新你的组件状态,这里调用并不会触发额外的 render() 调用。
    • shouldComponentUpdate:当组件接收到新的属性和状态改变的话,都会触发调用shouldComponentUpdate(…),这个函数的返回值决定是否需要更新组件,如果true表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。
    • componentWillUpdate:如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(…) 返回为true,就会开始准更新组件,并调用componentWillUpdate(),在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用this.setState来修改状态。紧接着这个函数,就会调用 render() 来更新界面了
    • componentDidUpdate:调用了 render() 更新完成界面之后,会调用 componentDidUpdate()来得到通知。
    • componentWillUnmount当组件要被从界面上移除的时候,就会调用componentWillUnmount()。在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。
    展开全文
  • ReactNative中获取真实的DOM节点

    千次阅读 2018-01-06 18:05:02
    ReactNative中,可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值,根据diff算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面 但是组件并不是真实的 ...

    获取真实的DOM节点

    • 在ReactNative中,可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值,根据diff算法算出来有差以后,就会执行ReactDom的render方法,重新渲染页面
    • 但是组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM),只有当它插入文档以后,才会变成真实的 DOM
    • 需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性
    export default class AClass extends Component<{}> {
      render() {
        return (
    
            <View style={styles.container}>
    
                <TouchableOpacity activeOpacity={0.5}
                              onPressIn={() => this.activeEvent()}>
    
                    <View ref = 'changeColor' style = {styles.innerViewStyle}>
                         <Text>变颜色</Text>
                    </View>
    
                </TouchableOpacity>
            </View>
        );
      }
    
      activeEvent(){
        this.refs.changeColor.backgroundColor = 'yellow'
      }
    }
    • 补充:
      什么是DOM Diff算法

           Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化。在React中,构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面,然后由React来比较两个界面的区别,这就需要对DOM树进行Diff算法分析。
         即给定任意两棵树,找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3),这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的,势必需要对算法进行优化。这看上去非常有难度,然而Facebook工程师却做到了,他们结合Web界面的特点做出了两个简单的假设,使得Diff算法复杂度直接降低到O(n)
      1、两个相同组件产生类似的DOM结构,不同的组件产生不同的DOM结构;
      2、对于同一层次的一组子节点,它们可以通过唯一的id进行区分。
          算法上的优化是React整个界面Render的基础,事实也证明这两个假设是合理而精确的,保证了整体界面构建的性能。
      
    展开全文
  • React Native调试技巧与心得

    万次阅读 2016-08-15 22:44:27
    在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。 ...
  • react-native操作“dom

    2019-04-24 23:12:49
    在弄react-native的时候,突然发现它不能像js一样获取页面的dom,那如果我要修改一些dom的属性值、文本什么的,要怎么做呢? 后来查谷歌,发现了一个名词:虚拟DOMReact在内存中维护一个快速响应的DOM描述。...
  • React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷 新”整个页面,由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经...
  • 此文是我的出版书籍《React Native 精解与实战》连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战,以及 React Native 与 iOS、...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • (一)前言 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩...
  • 前言React Native 是最近非常火的一个话题,因为它的语法简介,跨平台等特性,赢得了各大平台的青睐,虽然前期是有一些坑。基本概念解释React 是一套可以用简洁的语法高效绘制 DOM 的框架,所谓的“高效”,是因为 ...
  • React Native发布重构路线图

    千次阅读 2018-11-03 09:55:10
    React Native作为时下最热门的跨平台开发方案,在这两年的移动跨平台方案中可谓一枝独秀,在很多的移动产品中都可以看到它们的影子,相比国内的Weex,RN的迭代更加频繁,性能上也无限的接近原生应用。不过,RN从性能...
  • React Native for Web使得可以使用React DOM在Web上运行React Native组件和API。查看在Web上运行的React Native示例的实时演示。 快速开始 1.首先对于不太了解Webpack的同学可以先看一下这篇文章:...
  • React Native 三端同构实战

    千次阅读 2018-11-14 10:43:41
    React Native 三端(Web、iOS、Android)同构是指在不改动原 React Native 的代码下,让其在浏览器中运行出和在 React Native 环境下一样的页面。对于使用 React Native 开发的页面,如果又单独为 Web 平台重复写一...
  • 2018年 React Native

    2018-07-22 17:21:23
    自从上次发布关于React Native的更新状态已经有一段时间了。 在Facebook内部,我们将React Native技术应用到更多的重要项目中。我们最受欢迎的产品之一是Marketplace,作为我们的顶级应用,每月有8亿人使用。自2015...
  • React Native与JSBridge

    2020-05-07 19:20:43
    React Native原理 ReactJS:JSX控制虚拟DOM,通过React框架,最终渲染到浏览器的真实DOM中; React Native:JSX代码通过RN框架的编译后,通过Bridge实现了与原生框架之间的通信。调用RN提供的API就相当与通过Bridge...
  • React Native运行原理解析

    万次阅读 2020-09-05 17:34:36
    Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建...
  • 在去年也整理过 《移动端跨平台开发的深度解析》 的对比文章,时隔一年之后,本篇将重新由 环境搭建、实现原理、编程开发、插件开发、编译运行、性能稳定、发展未来 等七个方面,对当前的 React Native 和 ...
  • 2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了。文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能优化的文章。 本文谈到的 React ...
1 2 3 4 5 ... 20
收藏数 10,717
精华内容 4,286
关键字:

dom reactnative