React.js初探
React.js
菜鸟官方解释:
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它
React特点:
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
Virtual Dom
state创建数据
jsx 模板
数据 + 模板 生成Virtual DOM(虚拟节点就是js创建的一个对象,该对象是对节点的一个描述,包含了该节点的所有信息,attrs,content等)
用虚拟DOM生成真实的DOM,显示
state改变
数据 + 模板生成新的 Virtual DOM
对比新旧Virtual DOM的区别,找到区别。
直接操作DOM改变有区别的地方。
注:因为浏览器在解析网页时,js和html是分开的。就相当于两个模块,js要跨越界限操作别人的东西,所以说代价是比较大的。虚拟dom的创建使得性能很大程度提升,且他的应用 使得跨端应用得意实现 React Native.在android和ios端是不存在dom一说的,所以在创建虚拟dom后,会将虚拟dom生成对应的原生的东西。
Progressive Web Application
字义即:渐进式Web应用
PWA有可以实现什么呢?
可以将app的快捷方式放置到桌面上,全屏运行,与原生app无异
能够在各种网络环境下使用,包括网络差和断网条件下,不会显示undefind
推送消息的能力
其本质是一个网页,没有原生app的各种启动条件,快速响应用户指令
在React.js中。public文件夹下有一个mainfest.json的文件夹,该文件就是用来实现桌面快捷方式的配置,而无网络情况,或网络情况较差时,则使用service worker来实现离线缓存。
Service Worker
Web离线引用解决方案。指在在进过网页后,当网络断开连接后,依然可以再次访问页面。
ServiceWorker的主要能力集中在网络代理和离线缓存上。具体的实现上,可以理解为ServiceWorker是一个能在网页关闭时仍然运行的WebWorker
在通过react脚手架创建项目后,src根目录下是有一个serviceWorker.js文件的,该文件就是用来写app时,提供离线缓存技术。供线下仍可正常访问。
Immutable
保证state中的数据不被修改。修改数据时,不能通过this.state.xx来就该数据需要用特定的方法this.setState({});可以发现和小程序也是一样的了
JSX
百度解释:
JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位,JSX就是用来声明React当中的元素,React使用JSX来描述用户界面。
详细使用:JSX
render() {
return (
<div>
<ul>
<li></li>
</ul>
</div>
)
}
上面代码等同于下面
render() {
return React.createElement('div',{},React.createElement('ul',{},React.craeteElement('li',{})));
}
他的顺序:jsx => createElement => Virtual Dom => 真实Dom
vue和react的虚拟节点的渲染其实是一致的
className
在设置样式时,我们原来都是通过添加class或者id来设置对应的类名,在react中因为创建模板时使用的就是class类,所以在渲染模板时,样式的设置可以通过className=""来设置
Fragment
每个组件都要求有大的标签包裹,但是会产生不必要的DOM,因此react提供了Fragment来坐占位符。这样就不会产生新的节点,且组件不会抱任何错误。
import React, { Component,Fragment } form 'react';
class Demo extends Component {
render() {
return (
<Fragment>
Html content
</Fragment>
)
}
}
dangerouslySetInnerHTML
在render中如果要使某些内容不被转义。
则我们就需要使用dangerouslySetInnerHTML来保持元素不被转义
<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />
dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;
有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;
既可以插入DOM,又可以插入字符串;
但是存在一个问题,因为使用标签内容后会将其转换,所以很有可能遭到XSS攻击。
import React,{ Component,Fragment } from 'react';
import './style/todoList.css' class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: []
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<Fragment>
{/**这里是注释 */}
<input
className="input"
onChange={this.handleInputChange.bind(this)}
value={this.state.inputValue}
/>
<button className="btn" onClick={this.handleSubmit}>提交</button>
<ul>
{
this.state.list.map((item,index) => {
return (
<li
key={index}
onClick={this.handleDeleteItem.bind(this,index)}
dangerouslySetInnerHTML={{__html:item}}
>
</li>
)
})
}
</ul>
</Fragment>
)
};
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
};
handleSubmit() {
this.setState({
list: [...this.state.list,this.state.inputValue],
inputValue: ''
})
};
handleDeleteItem(index) {
let list = [...this.state.list];
list.splice(index,1);
this.setState({
list: list
})
}
}
export default TodoList;
当我们在input中输入<h1>Hello World</h1>时,如果使用了dangerouslySetInnerHTML的话,h1标签就会生效。
htmlFor
在使用label时,一般我们会通过for与input上的id进行绑定。在react中,我们则需要通过htmlFor=""来绑定input
组件传值
父传子
父传子通过属性传递,将需要传递的数据放在子组件上,通过属性的方式传递,子组件通过this.props.attr则就可以获取到父组件传递过来的数据
父组件:
import TodoItem from './TodoItem'
render() {
return (
<ul>
{
this.state.list.map((item,index) => {
return (
<div>
<TodoItem content={item} index={index} />
{/*<li
key={index}
onClick={this.handleItemDelete.bind(this,index)}
dangerouslySetInnerHTML={{__html:item}}
>
</li>*/}
</div>
)
})
}
</ul>
)
}
给子组件将数据挂在到content和index上,
子组件的获取
import React, { Component } from "react"; class TodoItem extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<div>{this.props.content}</div>
)
}
} export default TodoItem;
通过this.props就可以获取到父组件传递过来的数据。
子传父
子传父的话,没有vue那么多的方法,这里需要在父组件先将方法传递给子组件。
子组件调用父组件更改数据的方法。获取将数据作为方法的参数调用传递给父组件的方法就可以。
将方法通过属性的方式挂在到子组件上,不过需要注意的是,这里需要绑定指向为父组件
还是刚才的内容
import React,{ Component,Fragment } from 'react';
import TodoItem from './TodoItem';
import './style/todoList.css'; class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: []
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleItemDelete = this.handleItemDelete.bind(this);
}
render() {
return (
<Fragment>
<div>
<label htmlFor="inputArea">输入内容</label>
<input
id="inputArea"
className="input"
onChange={this.handleInputChange}
value={this.state.inputValue}
/>
<button
className="btn"
onClick={this.handleSubmit}
>提交</button>
</div>
<ul>
{this.getTodoItem()}
</ul>
</Fragment>
)
};
getTodoItem() {
return this.state.list.map((item,index) => {
return (
<TodoItem
key={index}
content={item}
index={index}
deleteItem={this.handleItemDelete}
/>
)
})
}; handleInputChange(e) {
const value = e.target.value;
this.setState(() => ({
inputValue: value
}))
};
handleSubmit() {
this.setState((prevState) => ({
list: [...prevState.list,prevState.inputValue],
inputValue: ''
}))
};
handleItemDelete(index) {
this.setState((prevState) => {
const list = [...prevState.list];
list.splice(index,1);
return {list}
})
}
}
export default TodoList;
deleteItem就是挂在的方法,供子组件调用
子组件
import React, { Component } from "react"; class TodoItem extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
render() {
const { content }= this.props;
return (
<div onClick={this.handleClick}>
{content}
</div>
)
}
handleClick() {
const { deleteItem,index } = this.props;
deleteItem(index);
}
} export default TodoItem;
注:react是单向数据流,举这样一个例子:父组件引用了5个子组件,每个子组件都引用了父组件传递的list.如果不是单向数据流,子组件在对this.props.list= [];做出修改后,其他4个子组件会怎样?
显示这就是一个bug了,修改一个其他的都修改了。显然是一个比较严重的问题。所以react单向数据里就是解决这样一个问题。
父组件传递给子组件的数据,是无法做出修改的。state中的数据有一个只读属性,是无法做出修改的。如果非要修改,需要父组件传递给子组件一个方法,子组件通过调用该方法来实现数据的更改。
setState
该方法用来更新state数据,调用该方法时,就算state中的数据没有做修改,也会重新执行render方法。
setState({
isActive: true,
})
console.log(this.state.isActive)//false
该方法其实是一个异步操作,所以要得到最新的state需要在第二个参数回调函数中获取或者通过async和await来解决啦
async handleClick() {
await this.setState({
isActive: true
})
console.log(this.state.isActive);//true
}
该方法有两个参数
setState((prevState) => {
//prevState是旧的数据
},()=> {
//这里可以得到更新以后的数据
})
PropTypes
组件间传值时,对接受数据的一个限制
详细doc可查看官网https://reactjs.org/docs/typechecking-with-proptypes.html
import { PropTypes } from 'prop-types'
class 组件 extends Component {}
组件.propTypes = {
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
}
isRequired
要求该传值对象不能为空,必须有值
组件.propTypes = {
obj: PropTypes.string.isRequired
}
arrayOf()
要求类型可以为多项
组件.propTypes = {
obj: PropTypes.arrayOf(PropTypes.number,PropTypes.string)
}
defaultProps
为组件间传值的对象设置默认值
class 组件 extends Component {}
组件.defaultProps = {
obj1: 'hello world'
}
设置默认值后,父组件在未传递数据时,会默认使用该默认值
后续继续学习更新
React.js初探的更多相关文章
- React.js初探(一)
前端框架多如牛毛的今天,团队的技术选型很重要,没有最好的,只有最合适的,这话早已经被说烂了. 但是作为一个有追求的前端,对新技术的敏感以及尝试心理还是要有的. 虽然React已经火的不行了,但由于自己 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- React.js深入学习详细解析
今天,继续深入学习react.js. 目录: 一.JSX介绍 二.React组件生命周期详解 三.属性.状态的含义和用法 四.React中事件的用法 五.组件的协同使用 六.React中的双向绑定 ...
- React.js入门必须知道的那些事
首先,React.js是facebook在2013年5月开源的一个前端框架,React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层, React为了更高超的性 ...
- React.js 官网入门教程 分离文件 操作无法正常显示HelloWord
对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...
- React.js入门笔记(再续):评论框的实现
本案例来自React.js中文官网对应内容. 一. 运行环境 <link rel="stylesheet" type="text/css" href=&q ...
随机推荐
- centOS7卸载google-chrome
参考: https://www.jianshu.com/p/39d0b8f578d9
- js取自定义data属性
//20170329 原本以为只能attr或者prop来获取属性,但是今天看别人的代码他自定义了一个属性,却取不到他的属性值,我自己在本地又可以取到,难道是phtml的原因,于是我到网上查找,发现了一 ...
- servlet之@PostConstruct,@PreDestroy
1.@PostConstruct说明 被@PostConstruct修饰的方法会在服务器加载Servlet的时候运行,并且只会被服务器调用一次,类似于Serclet的inti()方法.被@PostCo ...
- adjtimex修改tick值用法举例
测试 用户态下内核时钟计数间隔,默认都是100HZ.因此单个tick代表了10^4 us. 可以设置每个tick代表的时钟长度,因此把tick增加1(即增加为10001us)的影响是每天时间快8.64 ...
- 计蒜客 疑似病毒 (AC自动机 + 可达矩阵)
链接 : Here! 背景 : 开始我同学是用 AC自动机 + DP 的方法来做这道题, 这道题的标签是 AC自动机, 动态规划, 矩阵, 按道理来说 AC自动机 + DP 应该是能过的, 但是他不幸 ...
- hdu 5652
India and China Origins Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...
- GeoTrust 企业(OV)型 通配符(Wildcard) SSL证书
GeoTrust 企业(OV)型 通配符(Wildcard)SSL证书(GeoTrust True BusinessID Wildcard SSL Certificates),支持通配符(Wild ...
- bupt summer training for 16 #1 ——简单题目
D.What a Mess 给n个数,求其中能满足 a[i] % a[j] == 0 的数对之和 n = 1W,max_ai = 100W 不是很大,所以就直接筛就可以了 计算可得最高复杂度 < ...
- mybatis源码阅读-MappedStatement各个属性解析过程(八)
调用方 类org.apache.ibatis.builder.xml.XMLMapperBuilder private void configurationElement(XNode context) ...
- 激活Windows
额外的启动参数(键):/win=act – 在隐藏模式下运行程序,激活 Windows 并退出程序./ofs=act – 在隐藏模式下运行程序,激活 Office 并退出程序./wingvlk – 在 ...