浅谈React

  1. React是什么?

React 是一个采用声明式,高效而且灵活的用来构建用户界面的框架。

React.js是Facebook推出的前端UI库.底层是虚拟DOM技术,可以极大地提高浏览器的渲染效率.

React是一个view层的框架,是一个js版的UI库.

2.React的优势:

a.虚拟DOM b.组件化 (把复杂的DOM结构封装到组件内部,只给外部提供组件的名字,使用者可以很方便的使用组件名展示复杂的DOM结构)

推荐关于组件与组件化的博客:

https://www.jianshu.com/p/cac0beae8876

https://blog.csdn.net/blog_jihq/article/details/79191008

3.React在移动端,PC端的优缺点:

a.原生应用app Objective-C/swift,iOS java Android 优点: a.充分利用手机硬件的性能优势 b.运行速度块,用户体验好 c.可以上传至应用商店,用户方便查找并使用 缺点: a.开发周期长 b.上线审核严格且复杂 c.如果有新版本,新版本需要重新上传重新审核,迭代麻烦 b.web应用app 优点: a.跨平台 b.开发周期短 c.不需要审核 缺点: a.加载速度不如原生应用 b.无法充分使用手机硬件的特点 c.混合应用 Hybrid app 当前app的趋势,原生+web,原生是主体.里面内嵌web页面

4.React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。我们不需要一定使用 JSX,但它有以下优点:

  • a.JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • b.它是类型安全的,在编译过程中就能发现错误。
  • c.使用 JSX 编写模板更加简单快速。

注意:

由于 JSX 就是 JavaScript,一些标识符像 classfor 不建议作为 XML 属性名。作为替代,React DOM 使用 classNamehtmlFor 来做对应的属性。

JSX语法注意点: * 1.xml标签写到小括号里面,小括号也可以不加 * 2.xml标签的内容里可以用大括号包裹表达式进行数据的灵活展示 * 3.JSX语法里的xml标签有且只允许有一个根标签 * 4.如果xml标签是单标签,最后必须加 /

5.React组件

React创建组件的语法: let 组件名(首字母大写) = React.createClass({ render:function(){ return 组件的JSX结构 } });

如何向自定义组件内传值 ? 自定义组件如何接受外部的值 ? *使用props对象,每个组件都自带一个props对象. * 该对象是只读的,props对象负责存储自定义组件的所有属性名和属性值

如何获取自定义组件的内容 ? * 需要使用props的children属性获取自定义组件里的内容,值是一个数组,里面存储自定义组件的所有内容

如何设置自定义组件的样式 ? * 注意: 样式要设置给最终的DOM元素,而不是给自定义组件设置样式 a. 通过给DOM元素设置class,react里设置class属性名是className b. 行间css样式 b.1 style的值需要使用{{}}包裹,样式之间用逗号分隔 b.2 直接在{}里填对象

let styleP = {color:'blue',textAlign:'center'};        let C = React.createClass({            render:function () {                return <div className="Cs">                    <h2 style={{fontSize:'30px',color:'red'}}>{this.props.h2V}</h2>                    <p style={styleP}>{this.props.pV}</p>                </div>            }        });

6.React事件

给组件绑定事件: react里的组件是虚拟的,而绑定事件一定只能给真正的DOM元素绑定,而不能给虚拟的组件绑定事件

事件函数里的形参 e 表示事件对象 * e.target表示事件源对象 * 还可以通过DOM元素设置ref属性获取对应的元素 事件函数里的形参 e 表示事件对象 e.target表示事件源对象 还可以通过DOM元素设置ref属性获取对应的元素

在react里,普通的变量值不会改变,不会影响视图的更新

this 的总结

this 的本质就是:this跟作用域无关的,只跟执行上下文有关。

7.React组件的生命周期

  • 概念:组件从创建、到运行、再到销毁,这期间总是伴随着各种各样的事件,那么,这些事件统称为 组件的生命周期函数;
  • 组件生命周期分为三部分:
    • 组件创建阶段:生命周期函数,有一个显著的特点:组件一生只执行一次;
    • 组件运行阶段:这些函数,也有显著的特点:一生会根据属性props 和 状态 state 的改变,有选择性的触发0次或多次;
    • 组件销毁阶段:这些函数,也有显著的特点:一生只执行一次;
    • React中组件的生命周期-详解

8.React组件间通信

a. 父向子--props对象 b. 子向父--回调函数 c. 兄弟之间--中间人模式

9.React路由相关

React里的路由是通过引入react-router-dom模块实现的 * 1.BrowserRouter 组件,这是React里Router的接口实现,所有的路由模块,跳转模块都要写到BrowserRouter组件里 * 2.Route 组件, 路由的展示组件,该组件负责展示路由模块 path属性, 字符串,用来匹配Link里的to值 component属性 组件,当匹配上path时,会显示对应的component exact属性, 知名该路由是否排他 * 3.Link组件 路由的切换组件,该组件负责跳转 to属性, 表示需要跳转的路由

路由传值: * 1.params--直接将想要传递的参数以 / 的形式连续拼接在路径的后面 * 特点: 1.需要对路由进行配置 2.刷新网页,值依然存在 3.如果传递的参数过多,url网址的内容过长 * 2.query, 如果进入query方式传值,Link的to属性值就不是字符串,而是一个对象,通过该对象的query属性进行传值 * 特点: 1.不需要配置路由 2.刷新网页,值被销毁 3.可以传对象 * 3.state, 如果进入state方式传值,Link的to属性值就不是字符串,而是一个对象,通过该对象的state属性进行传值 * 特点: 1.不需要配置路由 2.刷新网页,值被销毁 3.可以传对象

注意: React里,绑定的自定义事件里直接获取this会报错,需要人为改变this的指向,我们通过bind函数改变this的指向 但是触发的函数直接写成箭头函数,不需要修改this指向

拓展: 箭头函数

箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。

引入箭头函数有两个方面的作用:更简短的函数并且不绑定this

var obj = {  i: 10,  b: () => console.log(this.i, this),  c: function() {    console.log( this.i, this)  }}obj.b(); // undefinedobj.c(); // 10, Object {...}

本文分享自微信公众号 - 生南星(gh_36d61425a5dc),作者:生南星

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React简单地网络请求(代码),React与Vue组件化的区别

    生南星
  • 完整代码

    生南星
  • Angular与React相关

    组件化 (把复杂的DOM结构封装到组件内部,只给外部提供组件的名字,使用者可以很方便的使用组件名展示复杂的DOM结构)

    生南星
  • day 83 Vue学习三之vue组件

      我们在进行vue开发的时候,还记得我们自己创建的vm对象吗,这个vm对象我们称为一个大组件,根组件(页面上叫Root),在一个网页的开发中,根据网页上的功能...

    用户2398817
  • 解读React的新Context API

    如上图, 组件A需要传递信息给组件E, 需要通过props,先传递给组件B,然后把信息通过组件B传递给组件D,最后才传递给组件E. 这个过程中可能组件B和组件D...

    JianLiang
  • 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法...

    张果
  • 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

    张果
  • web前端工程师眼中的母亲节

    很多人的眼中都认为程序员很闷骚,很无聊。其实在我们程序员眼中不仅仅只有代码,还有爱,因为我们也是一个正常的人! 我们在代码中也可以彰显对父母的爱:

    用户1272076
  • 高级 Vue 组件模式 (1)

    去年,曾经阅读过一系列关于高级 react 组件模式的文章,今年上半年,又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章,碰巧最近接手了一个...

    littlelyon
  • HBase写入过快性能分析及调优

    整个写入流程从客户端调用API开始,数据会通过protobuf编码成一个请求,通过scoket实现的IPC模块被送达server的RPC队列中。最后由负责处理R...

    大数据技术架构

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动