react安装
直接下载使用
你也可以直接使用 BootCDN 的 React CDN 库,地址如下:
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
使用实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
- react.min.js - React 的核心库
- react-dom.min.js - 提供与 DOM 相关的功能
- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和
babel-sublime包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目:
$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start
//项目目录
|____my-app
|____README.md
|____node_modules/
| |____package.json
|____.gitignore
|____public
| |____favicon.ico
| |____index.html
|____src
| |____App.css
| |____App.js
| |____App.test.js
| |____index.css
| |____index.js
| |____logo.svg
在浏览器中打开 http://localhost:3000/ ,即可显示
react组件的构建
React.createClass (ES5)
用React.creatClass构建组件是React最传统,也是兼容性最好的方法。
const List = React.createClass({
getDefaultProps() {
return {
color : "#f00",
text : "我是列表"
}
},
render() {
const {color,test} = this.props;
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
})
调用的时候只需要,每一次调用都会被编译成React.createElement(List)方法来创建List实例,这意味着每次调用就会创建一次li;
ES6 class
import React, {Component} from 'react';
class List extends Component {
constructor(props) {
super(props)
}
static defaultProps = {
color : "#f00",
text : "我是列表"
};
render() {
const {color,test} = this.props;
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
}
无状态函数
function List({color="#f00",test="我是列表"}){
return (
<li className={`btn btn-${color}`}>{test}</li>
)
}
1.无状态函数构建的组件称为无状态组件,这种构建方式是0.14版本后新增的,官方推崇.
2.在合适的情况下我们都应该使用这种组件方式。无状态组件不像上述两种方法在调用时会创建新实例,它创建时始终保持了一个实例,避免了不必要的检查和内存分配,做到了内存优化。
react生命周期
React 生命周期分为三种状态 1. 实例化 2.更新 3.销毁
实例化
当组件在客户端被实例化,第一次被创建时,以下方法依次被调用:
1. getDefaultProps 设置属性的默认值。 es6对应 deftaultProps
2. getInitialState 用来初始化每个实例的state。 es6 对应 constructor函数中的this.state
3. componentWillMount 渲染前
4. render 渲染
5. componentDidMount 渲染后
当组件在服务端被实例化,首次被创建时,以下方法依次被调用:
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
componentDidMount 不会在服务端被渲染的过程中调用。
getDefaultProps
对于每个组件实例来讲,这个方法只会调用一次,该组件类的所有后续应用,getDefaultPops 将不会再被调用,其返回的对象可以用于设置默认的 props(properties的缩写) 值。
更新
6、componentWillReceiveProps(nextProps)
组件初始化时不调用,组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候
8、componentWillUpdata(nextProps, nextState)
组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state
9、render()组件渲染
10、componentDidUpdate()
组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。
卸载
11、componentWillUnmount()
组件将要卸载时调用,一些事件监听和定时器需要在此时清除。
createClass和ES6的不同
ES6 class | createClass |
---|---|
static propTypes | propTypes |
defaultProps | getDefaultProps |
constructor (this.state) | getInitialState |
React中使用原生事件
import React, { Component } form 'react';
class App extends Component {
constructor () {
super();
}
componentDidMount () {
this.refs.button.addEventListener('click', e => {
handleClick(e);
})
}
handleClick (e) {
console.log(e)
}
componentWillUnmount () {
this.refs.button.removeEventListener('click')
}
render () {
return (
<button ref="button">按钮</button>
)
}
}
一定要注意在React中使用原生DOM事件时,一定要在组件卸载时手动移除,否则很可能出现内存泄漏的问题。2而使用合成事件系统时则不需要,因为React内部以及处理了。
组件间通信
父组件向子组件通信
这是最简单也是最常用的一种通信方式:父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。
下面是演示代码:
父组件 App.js:
import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";
export default class App extends Component{
render(){
return(
<div>
<Sub title = "今年过节不收礼" />
</div>
)
}
}
子组件 SubComponent.js:
import React from "react";
const Sub = (props) => {
return(
<h1>
{ props.title }
</h1>
)
}
export default Sub;
子组件向父组件通信
利用回调函数,可以实现子组件向父组件通信:父组件将一个函数作为 props 传递给子组件,子组件调用该回调函数,便可以向父组件通信。
下面是演示代码:
SubComponent.js:
import React from "react";
const Sub = (props) => {
const cb = (msg) => {
return () => {
props.callback(msg)
}
}
return(
<div>
<button onClick = { cb("我们通信把") }>点击我</button>
</div>
)
}
export default Sub;
App.js:
import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";
export default class App extends Component{
callback(msg){
console.log(msg);
}
render(){
return(
<div>
<Sub callback = { this.callback.bind(this) } />
</div>
)
}
}
跨级组件之间通信
所谓跨级组件通信,就是父组件向子组件的子组件通信,向更深层的子组件通信。跨级组件通信可以采用下面两种方式:
- 中间组件层层传递 props
- 使用 context 对象
使用 context 是另一种可行的方式,context 相当于一个全局变量,是一个大容器,我们可以把要通信的内容放在这个容器中,这样一来,不管嵌套有多深,都可以随意取用。
使用 context 也很简单,需要满足两个条件:
- 上级组件要声明自己支持 context,并提供一个函数来返回相应的 context 对象
- 子组件要声明自己需要使用 context
下面以代码说明,我们新建 3 个文件:父组件 App.js,子组件 Sub.js,子组件的子组件 SubSub.js。
App.js:
import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";
export default class App extends Component{
// 父组件声明自己支持 context
static childContextTypes = {
color:PropTypes.string,
callback:PropTypes.func,
}
// 父组件提供一个函数,用来返回相应的 context 对象
getChildContext(){
return{
color:"red",
callback:this.callback.bind(this)
}
}
callback(msg){
console.log(msg)
}
render(){
return(
<div>
<Sub></Sub>
</div>
);
}
}
Sub.js:
import React from "react";
import SubSub from "./SubSub";
const Sub = (props) =>{
return(
<div>
<SubSub />
</div>
);
}
export default Sub;
SubSub.js:
import React,{ Component } from "react";
import PropTypes from "prop-types";
export default class SubSub extends Component{
// 子组件声明自己需要使用 context
static contextTypes = {
color:PropTypes.string,
callback:PropTypes.func,
}
render(){
const style = { color:this.context.color }
const cb = (msg) => {
return () => {
this.context.callback(msg);
}
}
return(
<div style = { style }>
SUBSUB
<button onClick = { cb("我胡汉三又回来了!") }>点击我</button>
</div>
);
}
}
如果是父组件向子组件单向通信,可以使用变量,如果子组件想向父组件通信,同样可以由父组件提供一个回调函数,供子组件调用,回传参数。
在使用 context 时,有两点需要注意:
- 父组件需要声明自己支持 context,并提供 context 中属性的 PropTypes
- 子组件需要声明自己需要使用 context,并提供其需要使用的 context 属性的PropTypes
- 父组件需提供一个 getChildContext 函数,以返回一个初始的 context 对象
- 如果组件中使用构造函数(constructor),还需要在构造函数中传入第二个参数 context,并在 super 调用父类构造函数是传入 context,否则会造成组件中无法使用 context。
constructor(props,context){
super(props,context);
}
改变 context 对象
我们不应该也不能直接改变 context 对象中的属性,要想改变 context 对象,只有让其和父组件的 state 或者 props 进行关联,在父组件的 state 或 props 变化时,会自动调用 getChildContext 方法,返回新的 context 对象,而后子组件进行相应的渲染。
修改 App.js,让 context 对象可变:
import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";
export default class App extends Component{
constructor(props) {
super(props);
this.state = {
color:"red"
};
}
// 父组件声明自己支持 context
static childContextTypes = {
color:PropTypes.string,
callback:PropTypes.func,
}
// 父组件提供一个函数,用来返回相应的 context 对象
getChildContext(){
return{
color:this.state.color,
callback:this.callback.bind(this)
}
}
// 在此回调中修改父组件的 state
callback(color){
this.setState({
color,
})
}
render(){
return(
<div>
<Sub></Sub>
</div>
);
}
}
此时,在子组件的 cb 方法中,传入相应的颜色参数,就可以改变 context 对象了,进而影响到子组件:
return(
<div style = { style }>
SUBSUB
<button onClick = { cb("blue") }>点击我</button>
</div>
);
context 同样可以应在无状态组件上,只需将 context 作为第二个参数传入:
import React,{ Component } from "react";
import PropTypes from "prop-types";
const SubSub = (props,context) => {
const style = { color:context.color }
const cb = (msg) => {
return () => {
context.callback(msg);
}
}
return(
<div style = { style }>
SUBSUB
<button onClick = { cb("我胡汉三又回来了!") }>点击我</button>
</div>
);
}
SubSub.contextTypes = {
color:PropTypes.string,
callback:PropTypes.func,
}
export default SubSub;
非嵌套组件间通信
非嵌套组件,就是没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件。对于非嵌套组件,可以采用下面两种方式:
- 利用二者共同父组件的 context 对象进行通信
- 使用自定义事件的方式
如果采用组件间共同的父级来进行中转,会增加子组件和父组件之间的耦合度,如果组件层次较深的话,找到二者公共的父组件不是一件容易的事.
这里我们采用自定义事件的方式来实现非嵌套组件间的通信。
我们需要使用一个 events 包:
npm install events --save
新建一个 ev.js,引入 events 包,并向外提供一个事件对象,供通信时使用:
import { EventEmitter } from "events";
export default new EventEmitter();
App.js:
import React, { Component } from 'react';
import Foo from "./Foo";
import Boo from "./Boo";
import "./App.css";
export default class App extends Component{
render(){
return(
<div>
<Foo />
<Boo />
</div>
);
}
}
Foo.js:
import React,{ Component } from "react";
import emitter from "./ev"
export default class Foo extends Component{
constructor(props) {
super(props);
this.state = {
msg:null,
};
}
componentDidMount(){
// 声明一个自定义事件
// 在组件装载完成以后
this.eventEmitter = emitter.addListener("callMe",(msg)=>{
this.setState({
msg
})
});
}
// 组件销毁前移除事件监听
componentWillUnmount(){
emitter.removeListener(this.eventEmitter);
}
render(){
return(
<div>
{ this.state.msg }
我是非嵌套 1 号
</div>
);
}
}
Boo.js:
import React,{ Component } from "react";
import emitter from "./ev"
export default class Boo extends Component{
render(){
const cb = (msg) => {
return () => {
// 触发自定义事件
emitter.emit("callMe","Hello")
}
}
return(
<div>
我是非嵌套 2 号
<button onClick = { cb("blue") }>点击我</button>
</div>
);
}
}
自定义事件是典型的发布/订阅模式,通过向事件对象上添加监听器和触发事件来实现组件间通信。
组件通信的总结
- 父组件向子组件通信:使用 props
- 子组件向父组件通信:使用 props 回调
- 跨级组件间通信:使用 context 对象
- 非嵌套组件间通信:使用事件订阅
react结合redux
什么是redux?
- 简单点回答就是,一个管理数据的全局对象,但是它有单一状态树的概念,所谓的单一状态树,就是指“所有的state都以一个对象树的形式储存在一个单一的 store 中。”
- 页面中的所有状态或者数据,都应该用这种状态树的形式来描述;页面上的任何变化,都应该先去改变这个状态树,然后再通过某种方式实现到页面上。
- 或者换句话说,我们要做的核心工作,就是用单个对象去描述页面的状态,然后通过改变这个对象来操控页面。
redux核心概念通俗化
Action:是把数据从应用传到 store 的有效载荷,通俗一点就是描述一个动作
比如:
你的女朋友给你发了个消息,消息的内容就是,”快去给我清空购物车”, 那么这个内容在redux中就是action的意思
Reducer:Action 只是描述了有事情发生了这一事实,并没有指明应用如何更新 state。而这正是 reducer 要做的事情。 一般称其为规则
比如:
你女朋友已经给你发完消息了,但是只是一个消息,你是执行者,你是怎么执行的他不关心,那么你执行的这个过程就是reducer,为什么叫规则那,因为你执行的这个过程本就是规则,你先得有钱,然后登录他的帐号,然后结算
Store:Store 就是把 Reducer 和 action 联系到一起的对象。
Store 有以下职责:
维持应用的 state;
提供getState()
方法获取 state;
提供 dispatch(action)
方法更新 state;
通过 subscribe(listener)
注册监听器;
安装
npm install redux --save (单纯只使用redux)
npm install react-redux --save (结合react使用redux)
注意:
1.Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的,因为 React 允许你以 state 的形式来描述界面,而 Redux 非常擅长控制 state 的变化。
2.Redux 和 React 的结合需要用到 redux-react 这个库
案例说明
目录
├── README.md
├── index.js
├── action
│ └── home.js
│ └── about.js
├── actionType
│ ├── index.js
├── reducer
│ └── home.js
│ └── about.js
│ └── index.js
└── view
└── Home.jsx
└── About.jsx
ActionType
抛出两个type常量
export const SET_AGE = 'SET_AGE'
export const SET_NAME = 'SET_NAME'
Action
创建action
//home.js
import {SET_NAME, SET_AGE} from '../actionType'
export function set_age (age) {
return {
type: SET_AGE,
age
}
}
export function set_name (name) {
return {
type: SET_AGE,
name
}
}
//about.js同上,就是一个模拟,可以写不同的数据
reducer规则
//reducer/home.js
import {SET_NAME, SET_AGE} from '../ActionType'
const initialState = {
name: 'Vicky',
age: 22
}
export default (state = initialState, action) => {
switch (action.type) {
case SET_NAME:
return Object.assign({}, state, {
name: action.name
})
case SET_AGE:
return Object.assign({}, state, {
age: action.age
})
default:
return state
}
}
//reducer/about.js 同上写法可自定义
//reducer/index.js
import {combineReducers} from 'redux'
import home from './home'
import about from './about'
export default combineReducers(
{
home,
about
}
)
view
bindActionCreators:把 action creators 转成拥有同名 keys 的对象,但使用 dispatch 把每个 action creator 包围起来,这样可以直接调用它们。
connect:连接 React 组件与 Redux store。
view
import React, { Component } from 'react';
import * as pageActions from '../../action'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
class Inbox extends Component {
constructor (props) {
super(props)
console.log(this.props)
}
render() {
return (
<div className="Inbox">
index
</div>
)
}
}
function mapStateToProps(state) {
return {
pageState: state.home
}
}
function mapDispatchToProps(dispatch) {
return {
pageActions: bindActionCreators(pageActions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Inbox)
// export default Inbox;
index.js
将react和redux结合
createStore:创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。
<Provider /> :
是由 React Redux 提供的高阶组件,用来让你将 Redux 绑定到 React,让所有容器组件都可以访问 store,而不必显示地传递它。只需要在渲染根组件时使用即可。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux'
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect
} from 'react-router-dom'
import {Provider} from 'react-redux'
import Home from './view/Inbox'
import About from './view/About'
import rootReducer from './Reducer'
//创建store
const store = createStore(rootReducer)
const BasicExample = () => (
<Router>
<div>
<Switch>
<Route exact path="/home" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</div>
</Router>
)
ReactDOM.render(
<Provider store={store}>
<BasicExample />
</Provider>,
document.getElementById('root')
);
redux工作流程
首先,用户发出 Action。
store.dispatch(action);
然后,Store 自动调用 Reducer,并且传入两个参数:当前 State 和收到的 Action。 Reducer 会返回新的 State 。
let nextState = todoApp(previousState, action);
State 一旦有变化,Store 就会调用监听函数。
// 设置监听函数
store.subscribe(listener);
listener可以通过store.getState()得到当前状态。如果使用的是 React,这时可以触发重新渲染 View。
function listerner() {
let newState = store.getState();
component.setState(newState);
}