react-组件间传参

react-组件间传参

状态在哪里，操作状态的方法就在那里

父组件向子组件传参

class Parent extends React.Compnent{
    render(){
        return(
        <Son a={1}/>
        )
    }
}

class Son extends React.Component{
    render(){}
    componentDidMount(){
        console.log(this.props.a)//1
    }
    
    
}

子组件向父组件传参

• 通过子组件向父组件传参，能够间接的实现兄弟组件共享一个数据的效果

• **重点：**父组件定义一个函数，将这个函数通过属性传递给子组件，子组件调用这个函数时，传入的参数，父组件就能够接受到了

class Parent extends React.Component{
	render(){
		return (
			<Son a={this.a}/>
		)
	}
	//a函数
	a=(data)=>{
		console.log(data)//hahaha
	}
}

class Son extends React.Component{
    render(){
        
        return(
        <input onKeyUp={this.keyDown} />
        )
    }
    //键盘按下时触发的函数
    keyDown=()=>{
        this.props.a("hahaha")
    }
    
    
    
}

总结：

如何确定将数据放在哪个组件的state中：

• 一个组件使用：数据放在这单个组件中
• 多个组件使用：数据放在这些组件的父组件或爷爷组件中

关于父子组件之间的通信：

• 父组件给子组件传参：props
• 子组件给父组件传参：也是props,只是父组件传给子组件的是函数，子组件调用函数可给父组件传参

defaultCheck只在第一次起作用，checked在每一次点击时起作用

动态的操作checked需要与onchange事件搭配使用

react-任意组件间的通信

消息订阅与发布机制

PubSubJs：

• pub:(publish)发布
• sub:(subscribe)订阅

pubsub-js:就是用来实现发布订阅的，可以把它看过vue中的eventBus，看作是函数的载体

• 订阅方：创建一个函数，并且将这个函数传给pubsub做托管

  • var token=PubSub.subscribe("myTopic",myFunction[托管的函数])
    //token，是当前订阅函数的唯一id，可以用来取消订阅
    

• 发布方：发布的意思就是通过调用订阅方指定的函数，实现传参或执行操作功能

  • PubSub.publish('myTopic','需要发送给订阅者的内容')
    

第一步：添加pubsub-js

• yarn add pubsub-js
  

**第二步：**在组件中导入

• import PubSub from 'pubsub-js'
  

**第三步：**调用PubSub订阅函数(一般是在componentDidMount钩子函数中订阅)

•   componentDidMount(){
      this.token=PubSub.subscribe("changeState",this.changeStateObj)
    }
  

demo

List.jsx

import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
export default class List extends Component {
  state={
    users:[],//拿到的用户信息
    isFirst:true,//是否第一次访问
    isLoading:false,//是否正在加载
    err:"",//返回的错误信息
  
  }

  changeStateObj=(msg,value)=>{
    this.setState(value)
  }

  componentDidMount(){
    this.token=PubSub.subscribe("changeState",this.changeStateObj)
  }
  componentWillUnmount(){
    PubSub.unsubscribe(this.token)
  }
 
  render() {
    let {users,isFirst,isLoading,err}=this.state
    return (
      <div className="row">
        {
          isFirst?<h2>输入搜索内容搜索用户</h2>:
          isLoading?<h2>Loading...</h2>:
          err?<h2>{err}</h2>:
        
          users.map(item=>{
            return    <div key={item.id} className="card">
                <a href={item.html_url} target="_blank">
                  <img src={item.avatar_url} style={{ width: "100px" }} />
                </a>
                <p className="card-text">{item.login}</p>
              </div>
        })}
  
       
      </div>  
    )
  }
}

Search.jsx

import React, { Component } from 'react'
import axios from 'axios'
import './index.css'
import PubSub from 'pubsub-js'

export default class Search extends Component {
  

  search = () => {
    //获取输入框中的值
    const { value } = this.keyWordElement;
    PubSub.publish('changeState',{isFirst:false,isLoading:true})
    //发送请求
    axios.get(`/api1/search/users2?q=${value}`).then(
      result => {
        PubSub.publish('changeState',{isLoading:false,users:result.data.items})

      },
      reason => {
        PubSub.publish('changeState',{isLoading:false,err:reason.message})

      })
  }



  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索github用户</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" />&nbsp;<button onClick={this.search}>搜索</button>
        </div>
      </section>
    )
  }
}
  

App.jsx

import React, { Component } from 'react'
import Search from './components/Search'
import List from './components/List'
import './App.css'

export default class App extends Component {



  render() {
    return (
      <div className="container">
        <Search />
        <List/>
      </div>
    )
  }
}

发送ajax请求的方式有哪些？

• xhr:xmlHttpRequest：传统的ajax
  • jQuery:封装了xhr
  • axios:封装了xhr
• **fetch(取来)😗*window内置的，不用借用第三方库，直接使用
  • 缺点：目前不是很好用，没有请求发送拦截器

xhr

fetch

• 缺点：兼容性不高
• 优点：没有用xhr，不用安装第三方库，原生

fetch最优写法

let getData=async()=>{	
	try{
        let result=await fetch(url);
        let data=await result.json();
    }catch(error){
        console.log('请求错误',error)
    }
}