浅谈React
- 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，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。
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 {...}