React学习04-父子、兄弟间通信和网络请求

父子通信

1.子传父：props,要求父组件提前给子组件传递一个函数

//父组件
  state={
    users:[], //初始化状态
    isFirst:true, //是否为第一次打开页面
    isLoading:false, //是否处于加载中
    err:'', //存储请求相关错误信息
  }
//提前给子组件传递一个函数
  updateAppState=(stateObj)=>{
    this.setState(stateObj)
  }
<Search updateAppState={this.updateAppState}/>

//子组件 传值
this.props.updateAppState({isFirst:false,isLoading:true})

2.父传子：props

//父组件
<List  {...this.state}/>

//子组件
const {users,isFirst,isLoading,err} =this.props //接收数据

ajax—axios

1、跨域：可以发送数据，但不能接收
解决：
（1）配置代理——单个地址

 "proxy":"http://localhost:5000"  //package.json
//App.js
  getStudentData=()=>{
    axios.get('http://localhost:3000/students').then(
      response=>(console.log('success',response.data)),
      error=>(console.log('error',error))
    )
  }

（2）多个地址
新建src/setupProxy.js
高版本http-proxy-middleware配置，如果还用低版本方法，会出现项目无法启动，报错无法连接到服务器。

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy.createProxyMiddleware('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

兄弟组件间的通信(消息订阅-发布机制)

PubSubJS

npm i pubsub-js

1.消息订阅 PubSub.subscribe（订阅名，（name订阅的函数名,paramater传递的参数）=>{}）

state={
    users:[], //初始化状态
    isFirst:true, //是否为第一次打开页面
    isLoading:false, //是否处于加载中
    err:'', //存储请求相关错误信息
  }

  componentDidMount(){
    this.token=PubSub.subscribe('stateObj',(_,stateObj)=>{
      this.setState(stateObj)
    })
  }
//取消订阅
  componentWillUnmount(){
    PubSub.unsubscribe(this.token)
  }

2.消息发布PubSub.publish(触发的事件名（即订阅名），参数)

    PubSub.publish('stateObj',{isFirst:false,isLoading:true})

fetch（关注分离的设计思想）

1.xhr（jQuery，axios），fetch
优化后

    try {
      const response = await fetch(`/api1/search/users2?q=${keyWord}`) //await要配合async使用
      const data = await response.json()
      PubSub.publish('stateObj',{isFirst:false,isLoading:false,users:data.items})
      
    } catch (error) {
      PubSub.publish('stateObj',{isFirst:false,isLoading:false,err:error.message})
    }

2.兼容性不好

案例总结

1、defaultChecked和checked区别：defaultCheked只有第一次有效
2、状态在哪里，操作状态的方法就在哪里
3、如何确定把数据放在哪个组件的state中？
（1）单个组件使用：放在自身的state中；
（2）多个组件使用：放在他们共同的父组件state中（状态提升）