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'
- 看文档使用
  jsx 复制代码
```
   //接口后台允许了跨域否则获取不到数据
   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'

看文档使用

jsx 复制代码

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表示严格匹配

jsx 复制代码

   <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

react 解析html

react通过js实现路由跳转

要引入Redirect
定义一个flag
render里边判断flag，来决定是否跳转
执行js跳转
- 通过js改变flag状态
- 之后就可以通过Redirect进行跳转
  - <Redirect to={{pathname:"/"}} />

React 笔记 父子组件传值

React父子组件传值

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

远程测试APP接口

React生命周期函数

react-Router

动态路由及get传值

react 解析html

react通过js实现路由跳转

React 笔记父子组件传值