React 笔记父子组件传值

本文介绍: 使用 url 模块解析 url 地址在react 里面使用URL模块需要安装 url 模块 cnpm install url —save。说明：父组件可以给子组件传值，还可以给子组件传方法，以及把整个父组件传给子组件。还可以子组件给父组件传值。组件加载之前，组件加载完成，以及组件更新数据，组件销毁。触发一系列的方法，这就是组件的生命周期函数。通过 propTy pe s 定义父组件传给子组件的类型。

Re a ct父子组件传值

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

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

axios https://github.com/axios/axios axios 作者觉得jsonp不太友好，推荐使用CORS方式更为干净（后端运行跨域）

安装 axios 模块 npm in st ta ll axios —save
在哪里使用就在那里引用 import axios fro m ‘axios’

看文档使用

   //接口后台允许了跨域否则获取不到数据
   let api = 'http://xxx?a=getList&amp;id=20'
   axios.get(api).then(function(response){
     console.log(response)
   }).catch((error)=&gt;{
     console.log(error)
  })

fetch–jsonp https://github.com/cam son g/fetch–jsonp

安装 npm install fet-jsonp —save
import Fetc hJson p fro m ‘fetch–jsonp’

看文档使用

let api = http://xxx?a=getList&amp;id=20&amp;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=getLi st&id=20
jsonp请求地址的时候
- http://xxx?a=getLi st&id=20&callback=?

React 生命周期 函数

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

组件加载的时候触发的函数：
- c on struct or componentWillMount render componentDidMount（加载完成）
组件更新时触发的函数：
- sh o ul dCo mp onentUpdate（是否要更新数据，如果返回 false则不执行更新） componentWillUpdate(组件将要更新时触发) render componentDidUpdate(组件数据更新完成)
你在父组件里面改变props传值的时候触发的：
- componentWillReceivePro ps
组件销毁的时候触发的函数：
- componentWillUnm ount （组件销毁的时候触发的生命周期函数）

react-Router

react-Router 可以让根组件动态的去挂载不用的其他组件。根据用户访问的地址动态的加载不同的组件

re act路由的配置

找到官方文档 https://re acttraining.com/re act-router/web/example/basic
安装 cnpm install re act-router–dom —save
找到项目的根组件引入 react-router–dom
- import {Brow serRouter as Router,Switch,Route,Lin k} from “react-router–dom”;

复制官网文档根组件里面的内容进行修改

exa ct表示严格匹配

   <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>