2018-01-06 17:50:32 hejiasu 阅读数 2408
  • Javascript DOM操作

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

    15643 人正在学习 去看看 何山

获取真实的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的基础,事实也证明这两个假设是合理而精确的,保证了整体界面构建的性能。
    
2017-08-19 10:45:15 itszt888 阅读数 254
  • Javascript DOM操作

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

    15643 人正在学习 去看看 何山

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来实现
这里写图片描述

这里写图片描述

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

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

    15643 人正在学习 去看看 何山

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算法) —> 界面渲染

2018-09-05 09:18:04 lavender_32 阅读数 41
  • Javascript DOM操作

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

    15643 人正在学习 去看看 何山

ReactNative入门
1、RN原理:
RN就是一个JS文件;本质是JAVA与JS互相调用来通信;JS调用JAVA是JS唤起Native模块,调用完成后Native层通过bridge来取线程中的数据;JAVA调用JS;
从JS开发者的角度看,利用JavaScript编写逻辑,并且根据React独创的 Virtual DOM 机制,利用虚拟DOM渲染页面,JS执行完页面也就渲染完成了;
从IOS开发者的角度,RN就是以JS的形式告诉Objective-C需要执行什么,然后IOS去执行,同理安卓则是监听事件的形式执行JS,RN与原生的这些交互才是RN能适应三端的原因
2、RN安装:
必须安装:Node、React Native 命令行工具、Python2 以及 JDK 和 Andriod Studio
流程见官网:https://reactnative.cn/docs/getting-started/
3、RN基础概念:
ReactElement和ReactClass
ReactElement是一个描述DOM节点或component实例的字面级对象。通过主要包含:ReactElement分为 DOM Element 和 Component Elements 两类
ReactClass是我们写的components,由于虚拟DOM,我们的代码都是通过Components组装起来的
4、关于React:
特性:1、组件化;2、虚拟DOM;3、JSX语法糖;4、单向数据绑定;
生命周期:
Reactv16.3之前是7个阶段,在之后减去了3个阶段,新增了2个阶段:

constructor() {
    1. Initializing state
  }
  componentWillMount() { // 最新去掉
    // 在render之前,永远只执行一次
  }
  componentDidMount() {
    //组件加载完成
  }
  componentWillReceiveProps() { // 最新去掉
    // 再接收一个新的props的时候被调用
  }
  shouldComponentUpdate() {
    // 返回Boolen,在接受新的props或state时调用
  }
  componentWillUpdate(nextProps, nextState) { // 最新去掉
    // 接受一个新的props或state,但还没render时调用

  }
  static getDerivedStateFromProps(){ 
    //新增,配合componentDidUpdate,可以覆盖componentWillReceiveProps的所有用法
    // 在组件构建之后(虚拟dom之后,实际dom挂载之前) ,以及每次获取新的props之后
 }
  render() {
    // 虚拟DOM渲染
  }
  getSnapshotBeforeUpdate(prevProps, prevState) { 
    //新增,配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法
    // update发生的时候,在render之后,但在节点挂载前
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // 更新后立即执行
  }

  componentWillUnmount() {
    // 执行一些需要清理的任务
  }
2017-08-01 10:15:01 qq_32204197 阅读数 96
  • Javascript DOM操作

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

    15643 人正在学习 去看看 何山
React:react是一套用简洁的语法来高效的绘制DOM的一套框架。
react独创了virtual DOM机制,virtual dom 是存在内存中的javascript的对象,他与DOM是一一队应的关系。也就是说只要virtual DOM 存在就可以渲染出DOM。
react只是注重于UI层面的绘制。

Refs

阅读数 235

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