### axios
相当于ajax请求，易用、简洁且高效的http库
### 1.进入项目，下载axios
cnpm install axios --save
### 2. 引入 axios
import axios from " axios " ;
### 3. 方法
get ( ) post ( ) all ( )
axios.get ( " 路径 " ) . then ( function ( ret ) {//=====>获取数据成功后，返回数据
console.log ( ret ) ;
} ) . catch ( function ( msg ) {//=====>获取数据失败后， 返回数据
console.log ( msg ) ;
} )
### 生命周期
### 1. 概念 ：
组件从初始化到更新， 到销毁的过程
### 2. 生命周期的三个阶段
搭载时 更新时 卸载时
### 3. 作用 ：
在不同 的阶段，处理不同的业务逻辑，让代码更合理
### 4. 搭载时生命周期的方法 ，到特定阶段，自动执行的方法
1. constructor
2. componentWillMount ( ) 渲染前调用
3. render ( ) 渲染时调用
4 . componentDidMount ( ) 渲染后调用
### 5. 更新时的方法
shouldComponentUpdate( ) 是否允许更新 ，返回一个布尔值 true false
render ( ) 更新渲染页面
componentDidUpdate ( ) 在组建完成更新后立即被调用
### 6. 卸载时
componentWillUnmount( ) 组件销毁前调用
### react的路由
### 1. 概念 ：
由单个页面（1个HTML）客户端跳转应用 ，SPA单页web应用（1个HTML）
### 2. 进入项目，下载路由
cnpm install react-router-dom --save
### 3. 引入路由在App.js中
import {
BrowserRouter as Router ,
Link ,
Route
} from " react-router-dom " ;
### 4. 配置路由
<Router >
点击跳转到list页面 //==>相当于a标签
<Link to = " / " > 点击跳转到首页 </Link >
< Route path ="/list " component = { List } />//===》List 是组件
< Route path = " / " exact component = { Index } />//==》exact 是精准匹配
<Route path = " /login " component = { Login }
<Router>
### 5. 也可以在list.js 页面中跳转
import { Link } from " react-router-dom " ;
< Link to = " /login " > 跳转到登录页 </Link >
看问题4
### 6. 路由传值
常见的 ：
在App.js页面中
< Route path = " /cc " component= { List } />
在news.js页面中
<Link to = " / cc ? id = 1 > 点击跳转 < /Link >
在list.js页面中获取id的值
console.log ( this . props ) ;
console.log ( this . props . location . search ) ; //---> ?id = 1
动态路由传值
在App.js页面中
< Route path = " /dd /:id " component= { List } />
在news.js页面中
<Link to = " /dd /1 > 点击跳转 < /Link >
在list.js页面中获取id的值
console.log ( this . props ) ;
console.log ( this . props .match. params ) ; //---> id : 1
### 7. 点击事件，点击页面跳转的方法
点击input框跳转页面到首页
dj ( ) {
this .props . history . push ( " / " ) ;
}
### Ant Design 框架 ===》antd
### 1. 先创建项目
create - react - app 项目名（tt）
### 2. 进入项目下载框架
cnpm install antd --save
### 3. 在index.js 中引入antd的样式
import " antd / dist / antd . css " ;
### 4. 在哪个js文件中需要用到框架，就在哪个文件引用组件
如 : import { Tabs } from " antd " ;
在 <div > 复制的代码引入 </div>
### antd 移动端组件
### 1. 在项目中下载组件
cnpm install antd - mobile --save
### 2. 在index.js 入口文件引入样式
import " antd-mobile / dist / antd-mobile . css " ;
### 3. 在哪个js 文件需要使用，就在哪个文件引用组件
### redux 公共状态管理包
### 1. 进入项目，下载 redux
cnpm install redux --save
### 2. redux 核心概念
1.action (行为) 用来描述一个动作事件，不去修改store中的state，必须有一个type字段来表示将要执行的操作 ，就是告诉仓库要执行什么操作
2.dispatch 一个派发方法，将action 派发给reducer 更改state
3.reducer 接收一个action，改变（更新）state
4.store 存储state数据
提供subscribe() 监听仓库数据的方法
### 创建仓库
import {createStore} from "redux";//--->引入redux模块中的creteStore
import reducer from "./store/r1";//--->引入reducer函数
var store=createStore(r1);//--->创建仓库
export default store;
### 创建reduce.js，操作仓库
var s={//--->定义一个初始状态
t1:"hello world",
arr:[]
}
function reducer(state=s,action){
//--->传入旧的state action 返回新的state action{type:"add",d:{id:123}}
switch (action.type) {
case "add":
//对数据进行操作
break;
case "edit":
// alert(action.d.title)
// state.t1=action.d.title;
var s1=JSON.parse(JSON.stringify(state))//--->深度复制
s1.t1=action.d.title;
return s1;
default:
return state
}
}
export default reducer;
###在home.js中
import React, {Component} from 'react';
import store from "../re/re";//--->引入store仓库文件
class Home extends Component {
constructor(props) {
super(props);
var s=store.getState();//-->获取仓库中的文件，数据
this.ho=this.ho.bind(this);//--->改变this的指向
store.subscribe(this.ho);//注册监听器 更新仓库 再次调用
this.state={
g:s
}
}
ho(){
var s1=store.getState();//--->获取仓库
this.setState({g:s1});//--->更新仓库
}
render() {
return (
<div>
home组件
{this.state.g.t1}
</div>
);
}
}
export default Home;
###在App.js中
import React from 'react';
import store from "../re/re";//--->引入仓库文件，，数据
import Home from "../home/home";
class App extends React.Component {
constructor(props) {
super(props);
var s=store.getState();//--->获取仓库中的状态，数据
this.gets=this.gets.bind(this);//--->改变this指向
store.subscribe(this.gets);//--->注册监听器 每次更新仓库 会在次调用
console.log(s);
this.state={
ss:s
}
}
xg(){
//仓库触发action
store.dispatch({type:"edit",d:{title:"redux1122333"}})
}
gets(){
var s=store.getState();
this.setState({ss:s});
}
render() {
return (
<div>
11111
{this.state.ss.t1}
<input type="button" value="修改" onClick={this.xg.bind(this)}/>
<Home> </Home>
</div>
);
}
}
export default App;
###react-redux 跟redux差不多，不过比redux麻烦一些，更贴合react
### 1. 下载
cnpm install react - redux --save
cnpm install redux --save
### 2. 用redux创建仓库，和reducer操作仓库
### 3. 在index.js入口文件中引入
import { Provider } from " react - redux " ;
import store from " ./ store/store 路径 " ;
在： <Provider store = { store } > <App /> </Provider >
###4. react-redux 有几个方法
import { connect } from " react-redux "
function mapStateToProps ( state ) {
arr : state . arr //====>this.props.arr.map()
tt : state . title //===>this . props .tt
}
function mapDispatchToProps ( dispatch ) {
add1 ( n ) :{-------------》this.props.add1( n )
add是上面添加事件的方法 n 是每一项或者下标
dispatch ( { type : " add " , data : { tt : n } } ) //----->action.data.tt
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Cart);
网友评论