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

react 解析html

react通过js实现路由跳转

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