React 笔记父子组件传值

React父子组件传值

react中的组件：解决HTML标签构建应用的不足。
使用组件开发的好处：把公共的功能单独抽离成一个文件作为一个组件，哪里使用哪里引入。
父子组件：组件的相互调用中，我们把调用者称为父组件，被调用者称为子组件；
父子组件传值（react父子组件通信）
- 父组件给子组件传值
  1. 在调用子组件的时候定义一个属性
  2. 子组件里面 this.props.msg
  说明：父组件可以给子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件。还可以子组件给父组件传值
- 父组件主动获取子组件的数据
  1. 调用子组件的时候指定ref的值
  2. 通过this.refs.header 获取整个子组件实例（DOM（组件）加载完成以后获取）
- 父组件给子组件传值
  - defaultProps：父组件传值中，如果父组件调用子组件的时候不给子组件传值，则可以在子组件中使用defaultProps定义的默认值
  - propType：验证父组件传值的类型合法性
    - 引入import PropTypes from ‘prop-type’;
    - 类.PropTypes={name:PropTypes.string}
      
      通过propTypes定义父组件传给子组件的类型
  - 都是定义在子组件里边的

react中没有提供专门请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据

axios https://github.com/axios/axios axios作者觉得jsonp不太友好，推荐使用CORS方式更为干净（后端运行跨域）
- 安装axios模块 npm insttall axios --save
- 在哪里使用就在那里引用 import axios from ‘axios’
- 看文档使用
```
   //接口后台允许了跨域否则获取不到数据let api = 'http://xxx?a=getList&id=20'axios.get(api).then(function(response){console.log(response)}).catch((error)=>{console.log(error)})
```

fetch-jsonp https://github.com/camsong/fetch-jsonp

安装 npm install fet-jsonp --save
import FetchJsonp from ‘fetch-jsonp’

看文档使用

let api = http://xxx?a=getList&id=20&callback=?FetchJsonp(api).then(function(response) {return response.json() }).then(function(json) {console.log('parsed json', json) }).catch(function(ex) {console.log('parsing failed', ex)})

其他请求数据的方法也可以自己封装模块用原生js实现数据请求也可以

远程测试APP接口

get请求
- http://xxx?a=getList&id=20
jsonp请求地址的时候
- http://xxx?a=getList&id=20&callback=?

React生命周期函数

组件加载之前，组件加载完成，以及组件更新数据，组件销毁。触发一系列的方法，这就是组件的生命周期函数

组件加载的时候触发的函数：
- constructor componentWillMount render componentDidMount（加载完成）
组件更新时触发的函数：
- shouldComponentUpdate（是否要更新数据，如果返回false则不执行更新） componentWillUpdate(组件将要更新时触发) render componentDidUpdate(组件数据更新完成)
你在父组件里面改变props传值的时候触发的：
- componentWillReceiveProps
组件销毁的时候触发的函数：
- componentWillUnmount （组件销毁的时候触发的生命周期函数）

react-Router

react-Router 可以让根组件动态的去挂载不用的其他组件。根据用户访问的地址动态的加载不同的组件
react路由的配置
- 找到官方文档 https://reacttraining.com/react-router/web/example/basic
- 安装 cnpm install react-router-dom --save
- 找到项目的根组件引入 react-router-dom
  - import {BrowserRouter as Router,Switch,Route,Link} from “react-router-dom”;
- 复制官网文档根组件里面的内容进行修改
  - exact表示严格匹配
```
   <Router><div><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/dashboard">Dashboard</Link></li></ul><hr /><Switch><Route exact path="/"><Home /></Route><Route path="/about"><About /></Route><Route path="/dashboard"><Dashboard /></Route></Switch></div></Router>
```

动态路由及get传值

一个页面切换到另外一个页面进行传值
- get传值
  - 获取get传值 this.props.location.search // 得到?aid=4
    - 解析?aid=4
      
      使用url模块解析url地址在react里面使用URL模块需要安装url模块 cnpm install url --save
      - 使用url.parse(this.props.location.search,true)
      - aid=url.parse(this.props.location.search,true).query.aid
- 动态路由
  - 获取动态路由的传值 this.props.match.params.aid
- localStorage
总结动态路由及get传值
- 动态路由传值
  1. 动态路由配置
    (1)
  2. 对应的动态路由加载的组件里面获取传值
    (1) this.props.match.params
- react get传值
  - this.props.location.search