React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
diff算法
和 虚拟DOM
实现视图的高效更新> JSX --TO--> EveryThing
- JSX --> HTML
- JSX --> native ios或android中的组件(XML)
- JSX --> VR
- JSX --> 物联网
组件化
开发方式,符合现代Web开发的趋势React将DOM抽象为虚拟DOM,虚拟DOM其实就是用一个对象来描述DOM,通过对比前后两个对象的差异,最终只把变化的部分重新渲染,提高渲染的效率为什么用虚拟dom,当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大
当你使用React的时候,在某个时间点 render() 函数创建了一棵React元素树,
在下一个state或者props更新的时候,render() 函数将创建一棵新的React元素树,
React将对比这两棵树的不同之处,计算出如何高效的更新UI(只更新变化的地方)
React中有两种假定:
// 旧树
// 新树
执行过程:destory Counter -> insert Counter
// 旧
// 新
只更新:className 属性
// 旧
// 新
只更新:color属性
// 旧
- first
- second
// 新
- first
- second
- third
执行过程:
React会匹配新旧两个first ,匹配两个second ,然后添加 third tree
// 旧
- Duke
- Villanova
// 新
- Connecticut
- Duke
- Villanova
在没有key属性时执行过程:
React将改变每一个子删除重新创建,而非保持 Duke 和 Villanova 不变
为了解决以上问题,React提供了一个 key 属性。当子节点带有key属性,React会通过key来匹配原始树和后来的树。
// 旧
- Duke
- Villanova
// 新
- Connecticut
- Duke
- Villanova
执行过程:
现在 React 知道带有key '2014' 的元素是新的,对于 '2015' 和 '2016' 仅仅移动位置即可
- {item.name}
npm i -S react react-dom
react
:react 是React库的入口点react-dom
:提供了针对DOM的方法,比如:把创建的虚拟DOM,渲染到页面上// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'
// 2. 创建 虚拟DOM
// 参数1:元素名称 参数2:元素属性对象(null表示无) 参数3:当前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
title: 'hello react'
}, 'Hello React!!!')
// 3. 渲染
// 参数1:虚拟dom对象 参数2:dom对象表示渲染到哪个元素内 参数3:回调函数
ReactDOM.render(divVD, document.getElementById('app'))
createElement()
方式,代码编写不友好,太复杂var dv = React.createElement(
"div",
{ className: "shopping-list" },
React.createElement(
"h1",
null,
"Shopping List for "
),
React.createElement(
"ul",
null,
React.createElement(
"li",
null,
"Instagram"
),
React.createElement(
"li",
null,
"WhatsApp"
)
)
)
// 渲染
ReactDOM.render(dv, document.getElementById('app'))
npm i -D babel-preset-react
(依赖与:babel-core/babel-loader)注意:JSX的语法需要通过 babel-preset-react 编译后,才能被解析执行
/* 1 在 .babelrc 开启babel对 JSX 的转换 */
{
"presets": [
"env", "react"
]
}
/* 2 webpack.config.js */
module: [
rules: [
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
]
]
/* 3 在 js 文件中 使用 JSX */
const dv = (
Hello JSX!
)
/* 4 渲染 JSX 到页面中 */
ReactDOM.render(dv, document.getElementById('app'))
注意 1: 如果在 JSX 中给元素添加类, 需要使用 className
代替 class
htmlFor
代替{/* 中间是注释的内容 */}
React 组件可以让你把UI分割为独立、可复用的片段,并将每一片段视为相互独立的部分。
props
),并且返回一个React对象,用来描述展示在页面中的内容函数式组件 和 class 组件的使用场景说明:
1 如果一个组件仅仅是为了展示数据,那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑,需要操作数据,那么就需要使用 class 创建组件,因为,此时需要使用 state
JavaScript函数创建
null
()
包裹,避免换行问题function Welcome(props) {
return (
// 此处注释的写法
{/* 此处 注释的写法 必须要{}包裹 */}
Shopping List for {props.name}
- Instagram
- WhatsApp
)
}
ReactDOM.render(
,
document.getElementById('app')
)
class创建
在es6中class仅仅是一个语法糖,不是真正的类,本质上还是构造函数+原型 实现继承
// ES6中class关键字的简单使用
// - **ES6中的所有的代码都是运行在严格模式中的**
// - 1 它是用来定义类的,是ES6中实现面向对象编程的新方式
// - 2 使用`static`关键字定义静态属性
// - 3 使用`constructor`构造函数,创建实例属性
// - [参考](http://es6.ruanyifeng.com/#docs/class)
// 语法:
class Person {
// 实例的构造函数 constructor
constructor(age){
// 实例属性
this.age = age
}
// 在class中定义方法 此处为实例方法 通过实例打点调用
sayHello () {
console.log('大家好,我今年' + this.age + '了');
}
// 静态方法 通过构造函数打点调用 Person.doudou()
static doudou () {
console.log('我是小明,我新get了一个技能,会暖床');
}
}
// 添加静态属性
Person.staticName = '静态属性'
// 实例化对象
const p = new Person(19)
// 实现继承的方式
class American extends Person {
constructor() {
// 必须调用super(), super表示父类的构造函数
super()
this.skin = 'white'
this.eyeColor = 'white'
}
}
// 创建react对象
// 注意:基于 `ES6` 中的class,需要配合 `babel` 将代码转化为浏览器识别的ES5语法
// 安装:`npm i -D babel-preset-env`
// react对象继承字React.Component
class ShoppingList extends React.Component {
constructor(props) {
super(props)
}
// class创建的组件中 必须有rander方法 且显示return一个react对象或者null
render() {
return (
Shopping List for {this.props.name}
- Instagram
- WhatsApp
)
}
}
只读的对象
叫做 props
,无法给props添加属性props
props
对象中的属性function Welcome(props){
// props ---> { username: 'zs', age: 20 }
return (
Welcome React
姓名:{props.username}----年龄是:{props.age}
)
}
// 给 Hello组件 传递 props:username 和 age(如果你想要传递numb类型是数据 就需要向下面这样)
ReactDOM.reander( , ......)
// 创建Hello2.js组件文件
// 1. 引入React模块
// 由于 JSX 编译后会调用 React.createElement 方法,所以在你的 JSX 代码中必须首先拿到React。
import React from 'react'
// 2. 使用function构造函数创建组件
function Hello2(props){
return (
这是Hello2组件
这是大大的H1标签,我大,我骄傲!!!
这是小小的h6标签,我小,我傲娇!!!
)
}
// 3. 导出组件
export default Hello2
// app.js中 使用组件:
import Hello2 from './components/Hello2'
props
props
是只读的,无法给props
添加或修改属性props.children
:获取组件的内容,比如:
组件内容
中的 组件内容
// props 是一个包含数据的对象参数,不要试图修改 props 参数
// 返回值:react元素
function Welcome(props) {
// 返回的 react元素中必须只有一个根元素
return hello, {props.name}
}
class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return Hello, {this.props.name}
}
}
状态即数据
组件内部
使用的数据class
创建的组件才具有状态注意:不要在 state
中添加 render()
方法中不需要的数据,会影响渲染性能!
注意:不要在 render()
方法中调用 setState() 方法来修改state
的值
this.state.name = 'rose'
方式设置state(不推荐!!!!)// 例:
class Hello extends React.Component {
constructor() {
// es6继承必须用super调用父类的constructor
super()
this.state = {
gender: 'male'
}
}
render() {
return (
性别:{ this.state.gender }
)
}
}
// 1、JSX
const element = (
Hello, world!
)
// 2、JSX -> createElement
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
)
// React elements: 使用对象的形式描述页面结构
// Note: 这是简化后的对象结构
const element = {
type: 'h1',
props: {
className: 'greeting',
},
children: ['Hello, world']
}
和
[
{ user: '张三', content: '哈哈,沙发' },
{ user: '张三2', content: '哈哈,板凳' },
{ user: '张三3', content: '哈哈,凉席' },
{ user: '张三4', content: '哈哈,砖头' },
{ user: '张三5', content: '哈哈,楼下山炮' }
]
// 属性扩展
// 1. 直接写行内样式:
// 2. 抽离为对象形式
var styleH3 = {color:'blue'}
var styleObj = {
liStyle:{border:'1px solid red', fontSize:'12px'},
h3Style:{color:'green'}
}
评论内容:{props.content}
// 3. 使用样式表定义样式:
import '../css/comment.css'
评论人:{props.user}
组件生命周期函数的定义:从组件被创建,到组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着组件各种各样的事件,那么这些事件,统称为组件的生命周期函数!
constructor()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
constructor()
constructor()
的参数props
获取class Greeting extends React.Component {
constructor(props) {
// 获取 props
super(props)
// 初始化 state
this.state = {
count: props.initCount
}
}
}
// 初始化 props
// 语法:通过静态属性 defaultProps 来初始化props
Greeting.defaultProps = {
initCount: 0
};
componentWillMount()
同步
地设置状态将不会触发重渲染setState()
方法来改变状态值componentWillMount() {
console.warn(document.getElementById('btn')) // null
this.setState({
count: this.state.count + 1
})
}
render()
注意:不要在render方法中调用 setState()
方法,否则会递归渲染
render()
,render()
又重新改变状态render() {
console.warn(document.getElementById('btn')) // null
return (
{
this.state.count === 4
? null
:
}
)
}
componentDidMount()
setState()
修改状态的值componentDidMount() {
// 此时,就可以获取到组件内部的DOM对象
console.warn('componentDidMount', document.getElementById('btn'))
}
props
或者state
改变的时候,都会触发运行阶段的函数componentWillReceiveProps()
props
前触发这个方法props
值this.props
获取到上一次的值this.props
和nextProps
并在该方法中使用this.setState()
处理状态改变state
不会触发该方法componentWillReceiveProps(nextProps) {
console.warn('componentWillReceiveProps', nextProps)
}
shouldComponentUpdate()
true
重新渲染,否则不渲染false
,那么,后续render()
方法不会被调用// - 参数:
// - 第一个参数:最新属性对象
// - 第二个参数:最新状态对象
shouldComponentUpdate(nextProps, nextState) {
console.warn('shouldComponentUpdate', nextProps, nextState)
return nextState.count % 2 === 0
}
componentWillUpdate()
componentWillUpdate(nextProps, nextState) {
console.warn('componentWillUpdate', nextProps, nextState)
}
render() 渲染
Mounting
阶段的render
是同一个函数componentDidUpdate()
componentDidUpdate(prevProps, prevState) {
console.warn('componentDidUpdate', prevProps, prevState)
}
componentWillUnmount()
作用:在卸载组件的时候,执行清理工作,比如
componentDidMount
创建的DOM对象React.createClass({})
方式,创建有状态组件,该方式已经被废弃!!!require('create-react-class')
,可以在不适用ES6的情况下,创建有状态组件createReactClass()
方式创建组件中的两个函数var createReactClass = require('create-react-class');
var Greeting = createReactClass({
// 初始化 props
getDefaultProps: function() {
console.log('getDefaultProps');
return {
title: 'Basic counter!!!'
}
},
// 初始化 state
getInitialState: function() {
console.log('getInitialState');
return {
count: 0
}
},
render: function() {
console.log('render');
return (
{this.props.title}
{this.state.count}
);
},
handleIncrement: function() {
var newCount = this.state.count + 1;
this.setState({count: newCount});
},
propTypes: {
title: React.PropTypes.string
}
});
ReactDOM.render(
React.createElement(Greeting),
document.getElementById('app')
);
setState()
方法修改状态,状态改变后,React会重新渲染组件// 修改state(不推荐使用)
// https://facebook.github.io/react/docs/state-and-lifecycle.html#do-not-modify-state-directly
this.state.test = '这样方式,不会重新渲染组件';
constructor(props) {
super(props)
// 正确姿势!!!
// -------------- 初始化 state --------------
this.state = {
count: props.initCount
}
}
componentWillMount() {
// -------------- 修改 state 的值 --------------
// 方式一:
this.setState({
count: this.state.count + 1
})
this.setState({
count: this.state.count + 1
}, function(){
// 由于 setState() 是异步操作,所以,如果想立即获取修改后的state
// 需要在回调函数中获取
// https://doc.react-china.org/docs/react-component.html#setstate
});
// 方式二:
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
}
})
// 或者 - 注意: => 后面需要带有小括号,因为返回的是一个对象
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}))
}
onClick
绑定2 JS原生方式绑定(通过 ref
获取元素)
ref
是React提供的一个特殊属性ref
的使用说明:react refonClick
用来绑定单击事件
ref
属性,然后,获取元素绑定事件// JSX
// 将当前DOM的引用赋值给 this.txtInput 属性
this.txtInput = input } type="button" value="我是豆豆" />
componentDidMount() {
// 通过 this.txtInput 属性获取元素绑定事件
this.txtInput.addEventListener(() => {
this.setState({
count:this.state.count + 1
})
})
}
bind
绑定箭头函数
绑定bind
能够调用函数,改变函数内部this的指向,并返回一个新函数bind
第一个参数为返回函数中this的指向,后面的参数为传给返回函数的参数// 自定义方法:
handleBtnClick(arg1, arg2) {
this.setState({
msg: '点击事件修改state的值' + arg1 + arg2
})
}
render() {
return (
{this.state.msg}
)
}
bind
constructor() {
super()
this.handleBtnClick = this.handleBtnClick.bind(this)
}
// render() 方法中:
箭头函数
中的this由所处的环境决定,自身不绑定this { this.handleBtnClick('参数1', '参数2') }
} />
handleBtnClick(arg1, arg2) {
this.setState({
msg: '在构造函数中绑定this并传参' + arg1 + arg2
});
}
在HTML当中,像input
,textarea
和select
这类表单元素会维持自身状态,并根据用户输入进行更新。
在React中,可变的状态通常保存在组件的state
中,并且只能用setState()
方法进行更新.
React根据初始状态渲染表单组件,接受用户后续输入,改变表单组件内部的状态。
因此,将那些值由React控制的表单元素称为:受控组件。
受控组件的特点:
// 模拟实现文本框数据的双向绑定
// 当文本框内容改变的时候,触发这个事件,重新给state赋值
handleTextChange = event => {
console.log(event.target.value)
this.setState({
msg: event.target.value
})
}
[
{name: '小明', content: '沙发!!!'},
{name: '小红', content: '小明,居然是你'},
{name: '小刚', content: '小明,放学你别走!!!'},
]
npm i -S prop-types
propTypes
(对象),来约束props
// 引入模块
import PropTypes from 'prop-types'
// ...以下代码是类的静态属性:
// propTypes 静态属性的名称是固定的!!!
static propTypes = {
initCount: PropTypes.number, // 规定属性的类型
initAge: PropTypes.number.isRequired // 规定属性的类型,且规定为必传字段
}
react中的单向数据流动:
1 数据应该是从上往下流动的,也就是由父组件将数据传递给子组件
2 数据应该是由父组件提供,子组件要使用数据的时候,直接从子组件中获取
在我们的评论列表案例中:数据是由CommentList组件(父组件)提供的
子组件 CommentItem 负责渲染评论列表,数据是由 父组件提供的
子组件 CommentForm 负责获取用户输入的评论内容,最终也是把用户名和评论内容传递给了父组件,由父组件负责处理这些数据( 把数据交给 CommentItem 由这个组件负责渲染 )
props
注意:如果不熟悉React中的数据流,不推荐使用这个属性
props
PropTypes
类型限制来使用class Grandfather extends React.Component {
// 类型限制(必须),静态属性名称固定
static childContextTypes = {
color: PropTypes.string.isRequired
}
// 传递给孙子组件的数据
getChildContext() {
return {
color: 'red'
}
}
render() {
return (
)
}
}
class Child extends React.Component {
// 类型限制,静态属性名字固定
static contextTypes = {
color: PropTypes.string
}
render() {
return (
// 从上下文对象中获取爷爷组件传递过来的数据
爷爷告诉文字是红色的
)
}
}
class Father extends React.Component {
render() {
return (
)
}
}
npm i -S react-router-dom
Router
组件本身只是一个容器,真正的路由要通过Route组件
定义2 使用
作为根容器,包裹整个应用(JSX)
作为链接地址,并指定to
属性
展示路由内容// 1 导入组件
import {
HashRouter as Router,
Link, Route
} from 'react-router-dom'
// 2 使用
// 3 设置 Link
首页
电影
关于
// 4 设置 Route
// exact 表示:绝对匹配(完全匹配,只匹配:/)
:作为整个组件的根元素,是路由容器,只能有一个唯一的子元素
:类似于vue中的
标签,to
属性指定路由地址
:类似于vue中的
,指定路由内容(组件)展示位置Route
中的path属性来配置路由参数this.props.match.params
获取// 配置路由参数
// 获取路由参数
const type = this.props.match.params.movieType
history.push()
方法用于在JS中实现页面跳转history.go(-1)
用来实现页面的前进(1)和后退(-1)this.props.history.push('/movie/movieDetail/' + movieId)
fetch()
方法返回一个Promise
对象/*
通过fetch请求回来的数据,是一个Promise对象.
调用then()方法,通过参数response,获取到响应对象
调用 response.json() 方法,解析服务器响应数据
再次调用then()方法,通过参数data,就获取到数据了
*/
fetch('/api/movie/' + this.state.movieType)
// response.json() 读取response对象,并返回一个被解析为JSON格式的promise对象
.then((response) => response.json())
// 通过 data 获取到数据
.then((data) => {
console.log(data);
this.setState({
movieList: data.subjects,
loaing: false
})
})
npm i -S fetch-jsonp
JSONP
实现跨域获取数据,只能获取GET请求fetch-jsonp
/* movielist.js */
fetchJsonp('https://api.douban.com/v2/movie/in_theaters')
.then(rep => rep.json())
.then(data => { console.log(data) })
webpack-dev-server
代理配置如下:// webpack-dev-server的配置
devServer: {
// https://webpack.js.org/configuration/dev-server/#devserver-proxy
// https://github.com/chimurai/http-proxy-middleware#http-proxy-options
// http://www.jianshu.com/p/3bdff821f859
proxy: {
// 使用:/api/movie/in_theaters
// 访问 ‘/api/movie/in_theaters’ ==> 'https://api.douban.com/v2/movie/in_theaters'
'/api': {
// 代理的目标服务器地址
target: 'https://api.douban.com/v2',
// https请求需要该设置
secure: false,
// 必须设置该项
changeOrigin: true,
// '/api/movie/in_theaters' 路径重写为:'/movie/in_theaters'
pathRewrite: {"^/api" : ""}
}
}
}
/* movielist.js */
fetch('/api/movie/in_theaters')
.then(function(data) {
// 将服务器返回的数据转化为 json 格式
return data.json()
})
.then(function(rep) {
// 获取上面格式化后的数据
console.log(rep);
})
// 通过Express的中间件来处理所有请求
app.use('*', function (req, res, next) {
// 设置请求头为允许跨域
res.header('Access-Control-Allow-Origin', '*');
// 设置服务器支持的所有头信息字段
res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,Accept,X-Requested-With');
// 设置服务器支持的所有跨域请求的方法
res.header('Access-Control-Allow-Methods', 'POST,GET');
// next()方法表示进入下一个路由
next();
});
Action:行为的抽象,视图中的每个用户交互都是一个action
Reducer:行为响应的抽象,也就是:根据action行为,执行相应的逻辑操作,更新state
Store:
getState()
:获取statedispatch(action)
:更新state/* action */
// 在 redux 中,action 就是一个对象
// action 必须提供一个:type属性,表示当前动作的标识
// 其他的参数:表示这个动作需要用到的一些数据
{ type: 'ADD_TODO', name: '要添加的任务名称' }
// 这个动作表示要切换任务状态
{ type: 'TOGGLE_TODO', id: 1 }
/* reducer */
// 第一个参数:表示状态(数据),我们需要给初始状态设置默认值
// 第二个参数:表示 action 行为
function todo(state = [], action) {
switch(action.type) {
case 'ADD_TODO':
state.push({ id: Math.random(), name: action.name, completed: false })
return state
case 'TOGGLE_TODO':
for(var i = 0; i < state.length; i++) {
if (state[i].id === action.id) {
state[i].completed = !state[i].completed
break
}
}
return state
default:
return state
}
}
// 要执行 ADD_TODO 这个动作:
dispatch( { type: 'ADD_TODO', name: '要添加的任务名称' } )
// 内部会调用 reducer
todo(undefined, { type: 'ADD_TODO', name: '要添加的任务名称' })