React学习的小总结（一）

一、React简介

1.React由来

React是为解决两个问题而生的，一是：构建大型网站过程中，数据绑定需要大量操作真实DOM，性能成本较高；二是：双向数据流导致网站的数据流向太混乱，不好控制。这两大问题也是facebook在构建instagram网站时候遇到的，当时市场调研过MVC框架，发现并不能满意，于是提出react框架，并于2013年5月份开源。

结论：用react原因------React是为了解决虚拟DOM性能问题和混乱的数据流的应用框架。

2.React原理

React把用户界面抽象成一个个组件，开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入JSX语法，复用组件就变得容易，同时也可以保证组件结构清晰。有了组件这层抽象，React实现了把代码和真实渲染目标分隔开来。

用途：可在浏览器端渲染到DOM来开发网页，更可以用于开发原生移动应用。

结论：组件组合成视图，JSX语法复用组件。

3.React特点

6点：声明式设计、高效、灵活、JSX语法、组件和单向响应的数据流。

声明式设计指React采用声明范式，可以轻松描述应用（自动dom操作）；

高效指React通过对虚拟DOM的模拟，最大限度的减少了与DOM的交互；

灵活是指React可以和已知的库或者框架很好的配合；

JSX语法是javascript 语法的拓展；

组件---通过React构建组件，使得代码更容易得到复用，能更好的应用于大型开发；

单向响应的数据流--React实现了这点，从而减少了重复代码，比传统绑定数据更简单的原因就在于此。

4.React使用的典型代表公司

国外：Facebook,BBC,GitHub,Instagram,Flipboard,Airbnb,Reddit,Uber,WhatsApp,Yahoo

国内：支付宝、淘宝、豆瓣、豌豆荚、大搜车、Teambition

5.React核心

React的核心是组件

组件设计的目的（三大优势）：

提高代码复用率组件将数据和逻辑封装，类似面向对象的类
降低测试难度组件高内聚低耦合，很容易对单个组件进行测试
降低代码复杂度直观的语法提高了可读性

注：

高内聚：每一个组件专注做自己的功能

低耦合：组件之间耦合度低

6.React的精髓

函数式编程是React的精髓

Functional Programming 属于“结构化编程”的一种，主要思想是把运算过程尽量写成一系列嵌套的函数进行调用。

函数式编程的好处：

代码简单，开发快速因为它把逻辑开发运算过程尽可能地写成了一系列嵌套函数，进行调用
接近自然语言，易于理解 JS函数式的开发语言
更方便的代码管理封装函数使得后期修改更加方便
易于“并发编程” 可以同时进行很多函数的声明和操作
代码的热升级浏览器无刷新的情况下自动
是简单函数，易于测试

过去工业界的编程方式是命令式编程为主，它主要解决的是做什么的问题；

函数式编程对应的是声明式编程，它是人类模仿自己的逻辑思考方式发明出来的。声明式编程的本质是lambda(入)演算。

7.React框架介绍

React专注视图层

现在应用的日趋复杂要求更加强大的开发工具

React并不是完整的MVC/MVVM框架，它专注于提供清晰、简洁的view层解决方案。

而又与模板引擎不同，React不仅专注于解决view层的问题，又是一个包括View和Controller的库。

对于复杂的应用，可以根据应用场景选择业务层框架，并根据需要搭配Flux、Redux、GraphQL/Relay来使用。

React框架没有提供许多概念和复杂的API，它以Minimal API Interface为目标，只提供组件化相关的少量API。同时为了保持灵活性，它也没有自创一套规则，而是尽可能的让开发者使用原生JavaScript进行开发。

Virtual Dom

传统dom更新：真实页面对应一个DOM树，每次需要更新页面都要手动操作DOM进行更新

虚拟dom：React把真实DOM树转换成JavaScript对象树，也就是Virtual Dom，每次更新，就让虚拟DOM树做一次标记，到最后事件循环机制结束之后，所有节点都改变再进行一次DOM的渲染。

前端开发中，DOM操作十分昂贵。性能消耗最大的就是DOM操作，而且这部分代码会让整体项目的代码变得难以维护。而虚拟DOM的出现很好的缓解了这个问题。

注：虚拟DOM指通过JS脚本编译生成的，通过append添加节点到body中的DOM元素；真实dom是HTML里面写入的一些结构在JS脚本里面通过document得到的元素都是真实DOM。

组件和函数式编程

react把过去不断重复构建UI的过程抽象成组件，且在给定参数的情况下约定渲染对应的UI界面。函数式编程使得React能充分利用很多函数方法减少冗余代码。

JSX语法

React为方便view层组件化，承载了构建HTML结构化页面的职责。从这点看来，React与其他JavaScript模板语言有着异曲同工之处，不同的是React是通过创建和更新虚拟元素来管理整个Virtual DOM的。

JSX将HTML语法直接加入到JavaScript代码中，然后通过翻译器转换成纯JavaScript语法由浏览器解读。实际开发中，JSX在产品打包阶段就已经编译成了纯JavaScript，会让代码更直观和便于维护。

编译过程是由Bable的JSX编译器实现的。

下面有更详细的介绍。

二、JSX语法

JSX是类XML语法的ECMAscript扩展，它完美的利用了JavaScript自带的语法和特性，并结合HTML语法来创建虚拟元素。

组件的写法就是JSX语法，创建react的一个组件（分为高低版写法）

低版（15版-----13年5月份开源一直到17年9月份）

下载react的一些文件（react.min.js 构建；react-dom.min.js 渲染； browser.min.js 转换浏览器不认识的语法babel）
导入各个文件

<script src="react/react.min.js" type="text/javascript" charset="utf-8"></script>
<script src="react/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="react/browser.min.js" type="text/javascript" charset="utf-8"></script>

3.创建dom元素（容器）

<div id="out"></div>

4.创建组件（React.createClass()创建组件，去实现组件中的render方法，在render方法中通过return返回JSX生成页面中的HTML内容------------创建、渲染、返回结点）

<script type="text/babel">	

//创建组件
var React1 = React.createClass({
			tap1(){
				console.log("aaa")
			},
			render(){
				return(
					<div>
						<h1>hello react</h1>
						<p className="p1">Lorem ipsum dolor sit amet, consectetur                 adipisicing elit. Quibusdam facilis aspernatur ipsum rerum similique aut enim at est labore incidunt neque praesentium! Harum magni quia esse cumque libero. Cum dignissimos.</p>
                        <button onClick={this.tap1}>事件1</button>
					</div>
				)
			}	
		})




</script>

5.渲染组件（render方法 ReactDOM.render(<组件/>，node节点)）

ReactDOM.render(<React1/>,document.getElementById("out"))

高版（16版本------17年9月份出的）

下载react的一些文件（react.production.min.js ；react-dom.production.min.js ； browser.min.js）
导入各个文件

<script src="react/react.production.min.js" type="text/javascript" charset="utf-8"</script>
<script src="react/react-dom.production.min.js" type="text/javascript" charset="utf-8"></script>
<script src="react/browser.min.js" type="text/javascript" charset="utf-8"></script>

3.创建dom元素（容器）

<div id="out"></div>

4.创建组件

class Demo extends React.Component{
			constructor(props){
				super(props)
			}
			
			render(){
				return(
					<div>
						<h1>hello</h1>
					</div>
				)
			}
		}

5.渲染

ReactDOM.render(<Demo/>,document.getElementById("out"))

注：1.XML语法：

定义标签时只允许被一个标签包裹
单标签一定要闭合
严格区分大小写

2.元素类型：小写首字母对应DOM元素，大写首字母对应组件元素自然（即组件标签）。

3.react中写css的方式

(1).基于类名，在style中写修饰，class类名用的是className，保持原生JS的用法

<style type="text/css">
.p1{
		color: red;
		background: yellow;
	}
</style>

//写在组件返回的的标签中，也是返回的标签之一，注意类名
<p className="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

(2).基于inner css（Facebook主张的方式）

每个组件都具有自己的属性和功能，reactjs行间样式均是由json形式存在的{color:"red"}，react 将变量嵌套jsx中，style={变量名称}，外面“{}”是对变量名称的一个解析。

<p style={{"color":"blue","background":"orange"}}>Lorem ipsum dolor</p>

(3).原型链和全局变量

//全局变量
//写在JavaScript里面，在组件创建外面；写在组件的render方法里面，在return之前写，也可以这用调用
var obj2={
	background:"pink",
}

//写在组件创建返回出去的标签中
<p style={obj2}>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>



//原型链
<p style={this.obj1}>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

//组件创建之后，渲染之前
React1.prototype.obj1={
	color:"#fff",
	background:"orange"
}

4.react中事件机制

react自定义了一套符合w3c标准的事件机制，如：点击onClick,触摸结束onTouchEnd

//1.组件自身定义的事件，写在组件内部，和render同级,通过this.方法名调用
tap1(){
	console.log("aaa")
}
<button onClick={this.tap1}>事件1</button>


//2.全局函数，直接大括号调用
function tap(){
	console.log("bbb")
}
<button onClick={tap}>事件2</button>

//3.添加到组件实例的原型链上，通过this调用
React1.prototype.tap2=function(){
	console.log("cccc")
}
<button onClick={this.tap2}>事件3</button>

//调用时候加（），会自动调用。一刷新就触发，而且只触发一次
<button onClick={this.tap1()}>事件3</button>

//事件中函数传参：绑定this，第一个参数hi传给a,第二个参数hello传给b，很多个参数可以传
function tap(a,b){
			console.log("bbb")
			console.log(a,b)
}
<button onClick={tap.bind(this,"hi","hello")}>事件4</button>

5.HTML转义

react会将所有要显示到DOM中的字符转义，防止XSS(跨站脚本攻击)

后台传过来的数据带页面标签的是不能直接转义的，具体转义的写法如下；

//加载字符串
var  str = “hello  world”；

<h2>{str}</h2>

//加载带标签的
var str1 = "<span>hello,world<span>"；
<h1 dangerouslySetInnerHTML={{__html: str}}></h1>



// 加载带标签的结构模板
var content='<strong>content</strong>';   
 
React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

6.JSX中

写逻辑，写在render和return之间

return返回标签：注释标签的方式{/*标签*/}

Return返回结点是用小括号，用大括号是对象，用来返回数据

7.组件嵌套

<script type="text/babel">
//父组件 嵌套子组件
var Demo=React.createClass({
	 render(){	
			return(
				<div>
					<h1>hello react</h1>
					
					<hr/>
					
					<Child/>	
				</div>	
			)
	 }
})


//子组件
var Child=React.createClass({
		render(){
			return(
				<div>
					<h1>子组件</h1>
				</div>
			)
		}
	})

//渲染组件
ReactDOM.render(<Demo/>,document.getElementById('out'))
</script>

不能多个节点渲染，否则最后一个组件会覆盖前面的

8.高版能在低版里面写，但是低版不能在高版本里面写，低版的createClass方法已经被弃除了，不能用

9.注意script的type类型是text/babel

10.组件里面有且只有一个根节点

三、React webpack

1.目前react组件缺点：

所有组件都写在一个js文件里面，不好维护，写多个js去引入也无法识别
通过browser.js将jsx转换成js, 性能比较慢

2.解决方法：借助前端构建工具webpack

其主要作用是实现模块化，代码整合，代码分割。webpack整合之后，不需要使用browser将JSX转换成js了

注：模块指的是一组具有同等属性和功能的集合，和类的概念类似。react模块化指的是一个js中存放一个或者多个组件，这些组件通过commonjs规范对外提供接口，在其他组件中可以调用这些对外提供成接口的组件。

3.webpack的使用

全局安装webpack npm i webpack -g / npm i webpack-cli -g

(注：webpack4推荐node版本大于8.0，而且需要安装webpack-cli,官方不支持全局安装webpack,因为这样会影响项目的weback升级。只需要在项目里安装就行了，目前是4的版本)

npm innit 项目工程化
项目安装依赖 npm i webpack -D
安装webpack支持react的核心工具 npm i jsx-loader --save-dev
安装 react react-dom依赖（2017.9.27最新版本弃用createClass 安装老版本需要@一下：[email protected] [email protected] -D 若有路由，Npm I [email protected] –D）
安装 npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
配置文件打包输出

4.react ES5 ES6的写法

1.node.js模块的引入

//ES5
var React = require("react");

//ES6
import React  from "react"

2.组件的声明

//ES5
React.createClass

//ES6
class Todolist extends React.Component{}

1.声1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。

React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。React 把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar。开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入 JSX 语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。

React学习的小总结（一）

猜你喜欢