react入门基础（三）

### 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);

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,591评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,448评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,823评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,204评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,228评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,190评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,078评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,923评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,334评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,550评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,727评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,428评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,022评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,672评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,826评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,734评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,619评论 2赞 354

推荐阅读更多精彩内容