2019-02-15 15:16:18 weixin_39500025 阅读数 7
  • Javascript DOM操作

    King老师精心打造Javascript DOM操作课程,本课程主要对Javascript针对DOM操作相关内容进行深度剖析,像DOM节点操作、DOM样式操作等,是Javascript进阶技能! 山哥出品,必属精品!

    15641 人正在学习 去看看 何山

ReactNative基本知识整理

  • React简介

    1.1虚拟DOM(Virtual DOM)

    传统的Web应用开发,一般都是通过直接操作真实DOM进行更新操作,但对DOM进行直接操作通常是比较昂贵的,所以React为了尽可能减少对真实DOM的操作,采用Virtual DOM, 一个轻量级的虚拟DOM来更新DOM。
    虚拟DOM是React抽象出的一个对象,React在每次需要渲染时,会先比较当前DOM内容和待渲染内容的差异,然后决定如何最优地更新DOM,这个过程被称为reconciliation。

    1.2Components组件

    所谓组件,就是自己封装的具有独立功能的UI部件。React推荐以组件的方式去构成视图,并建议将功能相对独立的模块抽象为组件。对React而言,界面被分成不同的组件,每个组件都相对独立。
    组件化开发特点:

    • 可组合(Composeable):一个组件易于和其他组件一起使用,或者嵌套在另一个组件内部。如果在一个组件内部创建了另一个组件,那么父组件拥有它创建的子组件
    • 可重用(Reusable):每个组件都可以独立出来,被使用在其他相似的UI场景中
    • 可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护
    • 可测试(Testable):每个组件都是独立的,那么各个组件可以分开测试

    1.3数据流(Data Flow)

    React采用单向的数据流,即从父节点到子节点的传递,因此更加灵活便捷,也提高了代码的可控性。流程如下:
    Action —>Dispatcher —> Store —> View

  • React Native简介

    2.1React Native原理

    原理是在JavaScript中使用React抽象操作系统的原生UI组件,代替DOM元素来渲染界面,比如用<View>组件取代<div>,用<Image>组件替代<img>等。React Native主要运行着两个线程:主线程和JavaScript引擎线程,两个线程之间通过批量化的async消息协议来通信。

    2.2React Native相比Web或原生开发主要特点:

    • APP占用体积小
    • 实现跨平台开发
    • 支持动态更新

    2.3React Native工作原理

    ReactNative框架分为3层,JSX环境层、虚拟DOM层、具体的平台层。Virtual DOM就是一个中间虚拟层,位于JavaScript和实际渲染页面之间。
    虚拟DOM是一个JavaScript的树形结构,主要包含React元素和模块。组件的DOM结构就是映射到对应的虚拟DOM上,React的虚拟DOM采用了batching(批处理)和高效的Diff算法,采用Diff算法,可以将时间复杂度从0(n^3)降到0(n),从而提高界面构建的性能。
    状态变化 —> 计算差异(Diff算法) —> 界面渲染

2017-08-19 10:45:15 itszt888 阅读数 254
  • Javascript DOM操作

    King老师精心打造Javascript DOM操作课程,本课程主要对Javascript针对DOM操作相关内容进行深度剖析,像DOM节点操作、DOM样式操作等,是Javascript进阶技能! 山哥出品,必属精品!

    15641 人正在学习 去看看 何山

reactnative—需要在官网上学习

用react库开发一些移动端应用是reactnative
这里写图片描述
这里写图片描述
这里写图片描述

一般dom的更新都是对整个dom树的更新
React框架对dom 的操作可以减少对dom树的更新。先找虚拟的dom,再在页面上对相应的节点更新,不是对整个dom树的更新。

React.js开发网页小例子
在html中引入js文件
Html文件
这里写图片描述
js文件新写法
这里写图片描述
js文件旧写法(不推荐使用)
这里写图片描述
注意:标签一定要和return在一行
Jsx就是javascriptxml,就是可以在js中写html,要转化语法,从es6转换为jsx

Reactnative开发app小例子
要引入相应的库,除了react基础库外,还有react-native的库
这里写图片描述
这里写图片描述
样式变的构建与引入如上图
这里写图片描述
最后要注册,第一个是项目的名称,必须与init 的项目名称一致,第二个是class后的名字。
这里写图片描述
这里写图片描述

View——-可以嵌套

这里写图片描述
这里写图片描述
纵向一定要设置flex:1
这里写图片描述
样式
这里写图片描述

样式继承,两个Text可以嵌套,下面的划线的文本内容又加粗又是红颜色
这里写图片描述

图片—必须引入Image,uri后跟图片路径
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

Flexbox
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

flexDirection:默认是column
这里写图片描述
flexWrap:’wrap’ 当一行排不下时换行排列 ‘wrap-reverse’
这里写图片描述
flexFlow
这里写图片描述
这里写图片描述
justifyContent:控制主轴对齐方式
三者要一起使用
这里写图片描述
这里写图片描述
这里写图片描述
alignItems: 控制次轴对齐方式
这里写图片描述
当flexDirection是row时
这里写图片描述
alginSelf:控制自己对齐方式
这里写图片描述
这里写图片描述
这里写图片描述

放大,缩小等

Align-content只支持网页版 在手机上不发生作用
这里写图片描述
这里写图片描述
这里写图片描述
flex:num,分配主轴方向的比重,占几份
这里写图片描述

组件化
这里写图片描述
文本组件—Text
这里写图片描述

按钮Button是不存在的,而是如下TouchableOpacity
这里写图片描述
点击之后按钮的颜色会变浅
也可以用TouchableHightlight
这里写图片描述
这里写图片描述
underlayColor是点击之后变颜色,onPress是点击之后有弹窗
Click方法是弹出一个小窗
这里写图片描述

对按钮设置成一个组件,就可以被多次复用
先在js中封装按钮,如下
这里写图片描述

然后在android.js中引入组件,并写上标签
这里写图片描述

子父组件之间的数据传递
在android.js中写
这里写图片描述
在button.js中写
这里写图片描述

怎么构建自己的自定义组件
file—setting—-

State的用法—-(重要)
在构造器里初始化state—–引用state—-setstate重新设置值

这里写图片描述
这里写图片描述
文本框
这里写图片描述
这里写图片描述

双向数据绑定用onchangeText,state来实现
这里写图片描述

这里写图片描述

2018-03-09 10:53:14 vivian_king 阅读数 40
  • Javascript DOM操作

    King老师精心打造Javascript DOM操作课程,本课程主要对Javascript针对DOM操作相关内容进行深度剖析,像DOM节点操作、DOM样式操作等,是Javascript进阶技能! 山哥出品,必属精品!

    15641 人正在学习 去看看 何山

React Native中没有DOM的概念,只有组件的概念。

因此在ReactJS中使用的Html标签以及对DOM的操作是不起作用的。

不过组件的生命周期、JSX的语法、事件绑定、自定义属性等,在RN和ReactJS中是一样的。

用组件嵌套组件的方式实现,效果图:

效果图

其中的大概逻辑是:

MargginBox :使用Box,childName=”borderBox”,通过{this.props.children}把内部子组件传给子组件Box

BorderBox :使用Box,childName=”paddingBox”,通过{this.props.children}把内部子组件传给子组件Box

PaddingBox :使用Box,childName=”elementBox”,通过{this.props.children}把内部子组件传给子组件Box

ElementBox :最内层的组件

Sample Code

2017-04-04 11:35:07 yeputi1015 阅读数 222
  • Javascript DOM操作

    King老师精心打造Javascript DOM操作课程,本课程主要对Javascript针对DOM操作相关内容进行深度剖析,像DOM节点操作、DOM样式操作等,是Javascript进阶技能! 山哥出品,必属精品!

    15641 人正在学习 去看看 何山

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 (这个知道就成啦)


JSX简介

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到"<   />"JSX就当HTML解析,遇到"{ }"就当JavaScript解析。利用"< />"及"{}"配合使用,可以在开发布局文件时进行参数的传递方法调用等。

如下(JS写法)

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

等价于(JSX写法)

复制代码
var root =(
  <ul className="my-list">
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);
复制代码

后者将XML语法直接加入JS中,通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯JS再由浏览器执行。在实际开发中,JSX在产品打包阶段都已经编译成纯JavaScript,JSX的语法不会带来任何性能影响。另外,由于JSX只是一种语法,因此JavaScript的关键字class, for等也不能出现在XML中,而要如例子中所示,使用className, htmlFor代替,这和原生DOM在JavaScript中的创建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已,除了用JSX,我们也可以用JS代码来创建虚拟DOM.


使用JSX的好处是:1.在开发中对界面的布局,可读性更好2.开发效率感觉会高一些
2015-12-01 00:32:52 spaljay 阅读数 81
  • Javascript DOM操作

    King老师精心打造Javascript DOM操作课程,本课程主要对Javascript针对DOM操作相关内容进行深度剖析,像DOM节点操作、DOM样式操作等,是Javascript进阶技能! 山哥出品,必属精品!

    15641 人正在学习 去看看 何山
看到十一月的试读活动的时候,一下子就被React Native的介绍给吸引住了:真的可以通过纯前端的解决方案来进行移动端APP的开发吗?

在看到ReactJS的解决方案之前,也有思考和实践过这个问题。之前的解决方案是通过PhoneGap,也就是现在的Cordova,通过APP的外壳包装了一个WebView的容器。具体过程是先完成一个纯HTML+CSS+Javascript在移动设备分辨率上的实现,然后将整个目录结构放到PhoneGap的目录中,最后通过调用PhoneGap的命令,将整个目录编译成不同平台上的应用文件,比如IOS的APP,android上的APK。这个解决方案在某种程度上使得即便没有从事过移动端开发的经验,也可以通过纯前端的技术,只是利用app本身作为Web容器,从而实现移动开发,同时一份代码,解决了多个移动平台。同时也可以利用相对比较成熟的JS效果库实现丰富的动态视觉功能。

听上去解决方案非常完美,但是在真正实现了之后,发现原生的JS在移动端不仅运行缓慢,有明显的卡顿感,而且用户很明显可以感受到是浏览器的体验,而不是真正的APP。这两点原因直接使得通过前端方案实现移动端开发的方案搁浅。除此之外,PhoneGap调试的繁琐步骤也是一个巨大的槽点。即便之前提到的两点问题不存在,但是PhoneGAP在移动设备上调试JS必须通过载入一个特殊的JS,然后连接到台式机端口上,通过chrome的开发者工具进行调试。

因此看到这次试读活动的主题之后,我对于reactJS是如何克服PhoneGAP的缺陷有了非常大的兴趣。首先关注的就是性能问题,如何使得HTML在移动端的渲染和JS的运行效率能够将效果媲美原生API编写的APP。其次就是调试性如何,是否能给开发带来革命性的便利。

通过了解reactJS的相关知识,React不再使用text/javaScript标记JS代码段,而是通过text/babel,因为reactJS的JSX语法和传统的JS不兼容。reactJS必须的三个的三个库中有一个叫browser.js的库,就是用于将JSX语法转换成JS的语法。但是在真正上线的时候,不再会由浏览器即时转换,而是通过服务器端提前完成。而JSX语法在使用的过程中,相当于可以将JS变成了动态组织HTML的逻辑语言。浏览器的DOM可以动态的拼装生成。

在编写了一些reactJS的实例之后,发现这门技术更多的像是在用后台语言的方式在前端处理HTML。目前主流的技术果然都是在某些点上是相通的。比如nodejs就是在用JS的语法编写后台代码,而angularJS则是以开发动态语言页面模板的方式编写HTML模板。reactJS则是另辟蹊径,脱离了原来网页上DOM结构的限制,由自己封装的Virtual DOM接管浏览器上DOM元素的生成和渲染。而ReactJS重新定义的DOM,正是解决当下的性能杀手——复杂频繁的DOM操作的有效方案。ReactJS通过自己维护虚拟的DOM树,每次动态变化只需要DIFF不同的部分,大大提高了显示上的性能。

reactJS是基于组件化的开发,所以另一点优化就是把组件当作了状态机,用户只需要关注组件状态的变化,通过事件驱动机制,自动渲染UI的变化。

在调试上,reactJS通过相关浏览器插件可以直接在浏览器上进行调试。我的疑问是是否reactJS能够保证在不同设备上执行的一致性?使得只要在PC上调通在手机端也能保证正常运行?但是浏览器插件可以直接查看组件的状态确实非常方便。

试读样章中将笔墨集中在了flux,但是由于关于flux的具体描述并没有收入在样章之中,只能通过文中的描述推测是用于传递组件的状态,控制和处理状态之间的转化。如果有幸得到赠阅的机会,可以解答我心中的这个疑惑。

React Native & Code Push

阅读数 1624

react-native 的简介

阅读数 933

没有更多推荐了,返回首页