2018-06-28 16:47:32 u013121755 阅读数 251
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57467 人正在学习 去看看 李宁

一、Props: props是实现组件组合的关键。props是React的一种从父组件向子组件传输数据的机制。他们在子组件中是不能被修改的;props由父组件传输出去,也被父组件缩“拥有”。

二、state: React的组件可以在this.state里保存可变的数据

三、react中的事件:React中的事件,是通过自动事件委托来实现高性能。React不会将事件处理程序附加到节点自身。相反,他会讲一个单独的事件处理侦听器附加到文档的根节点,当事件触发的时候,React将他映射到适当的组件元素。当组件被卸载的时候,React还会自动的移除对应的事件侦听器。(事件的命名:原生的HTML不是驼峰命名,React中的事件的名称是驼峰命名)。

四、JSX编写代码时注意规范: 1.标签特性才去驼峰式大小写的风格 2.所有元素都必须闭合(没有闭合标签就自闭合) 3.特性名称基于DOM API

五、JSX的使用小技巧:1.单一根节点: React的render中的return方法只能渲染一个跟节点,即只能有一个父级大标签。2.条件语句:在编写jsx的时候if可能会被转化为非法的js语句,因此可以使用三元表达式来解决条件判断中出出现的问题,还可以将条件外置,在jsx外部判断之后赋值,然后在jsx中渲染。

六、空格:JSX不会再多行之间自动渲染一个空格,因此想要一个空格,可以手动插入,使用{“ ”}。这样就可以在多行之间实现一个空格。

七、使用dangerousSetInnerHTML,可以实现在JSX的内部渲染任何的HTML标签。

这么做的意义在于,{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象,可以通过方法调用返回净化后的数据,随后这种标记过的数据可以。注意__html是两个_

被传递给 dangerouslySetInnerHTML。

八、内联样式:在React组件中,可将内联样式指定为一个JavaScript对象。样式的名称才去驼峰式大小写规则,以保持和DOM属性的一致性。此外,并不需要指定像素单位,React会在幕后自动的追加正确的单位。

九、React引入了key特性,key是一个唯一标识符,允许你在需要进行插入、删除、替换和移动时快速的查找元素。每次在循环中创建一个组件的时候,最好能为每个子元素都提供一个key,这样可以帮助React进行匹配同时又能避免性能的瓶颈。

十、子级校正:在React中为了让虚拟的DOM喝真是的DOM保持一致,就需要找出必不可少的最小变化数量,这一过程就叫做子级校正。

十一、refs: 在React中我们大部分是在操作虚拟的DOM,但是在那些有必要操作真是DOM的少数情况下,React提供了一个后门,称为refs。refs可以像字符串属性那样用于任何组件。

2019-09-10 09:48:33 qq_41629150 阅读数 11
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57467 人正在学习 去看看 李宁
  • 路由组件

    React-router-dom中提供的路由组件
    BrowserRouter // history模式路由组件
    HashRouter // hash模式路由组件
    NavLink // 声明式跳转组件,可以通过activeClassName(string)和activeStyle(Object)设置激活样式,to:string/Object
    Link // 声明式跳转组件; to: string/object,要跳转的路由路径
    Route // 路由匹配组件,path: 路由路径;exact严格匹配;component:组件,render函数返回一个组件的调用
    Reirect // 重定向组件
    Switch // 排他性组件
    Prompt // 后置守卫 <Prompt when={} message={}/>when为true时阻止,message可以是简单的提示语,也可以是一个函数
    前置后卫通过自定一个组件,使其返回一个Route组件
    
  • 路由传参

    参数数据: {history,location,match} = props;
    传递: to={{pathname: '',search:'?a=',hash:'#a1}}
    
  • 编程式跳转

    history.push('';
    history.push({pathname:'',search:'?a=11&b=12'});
    history.replace({pathname:'',search:'?a=12'});
    history.go(-1)
    
2018-08-10 10:58:38 m0_37467586 阅读数 1422
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57467 人正在学习 去看看 李宁

1.该跳转的触发时react路由的切换,当路由变动时,才会触发
2.触发路由变化的几个方式:
a.修改地址栏:正常通过
b.页面<Link/>/<NavLink/>/<Redirect/>:正常通过
c.<a>标签:不通过。
不通过的症状:点击取消时,url已经发生变化,但是页面为变化,出现url和ui不同步。
建议:慎用或是改进

2019-12-04 10:49:02 weixin_41606276 阅读数 24
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57467 人正在学习 去看看 李宁

1、在dom中直接使用三目运算动态改变style,react是动态渲染组件的,所以可以做到实时更新 

<div className={this.state.flag?'style1':'style2'}></div>

2、使用ref获取dom

<div ref={e => (this.dom1 = e)}></div>
const top = this.dom1.style.top;

 

2019-04-16 16:09:51 qq_40352733 阅读数 49
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57467 人正在学习 去看看 李宁

什么是虚拟dom?

一、DOM是什么?

DOM 全称是 Document Object Model,也就是文档对象模型。说白了,DOM对象本身也是一个js对象,所以严格说,并不是操作dom这个对象慢,而是操作这个对象后,会触发浏览器的一些行为。例如:布局(layout)和绘制(paint。

二、浏览器呈现页面机制

浏览器的主要组件包括:

1、用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面。
浏览器引擎 - 在用户界面和渲染引擎之间传送指令。

2、渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。

3、网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。

4、用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。

5、JavaScript 解释器。用于解析和执行 JavaScript 代码,比如chrome的javascript解释器是V8。

6、数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5)定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库
在这里插入图片描述浏览器

虚拟dom有什么好处

React生命周期

阅读数 550

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