8-react-组件通信

参考：https://blog.youkuaiyun.com/l1336037686/article/details/85505473

组件之间通信的方式：

1.props

公共的数据放在父组件上，特有的数据放在自己组件内部。

通过props可以传递一般数据和函数数据，只能一层层传递

一般数据->父组件传递给子组件，子组件读取

函数数据->父组件传递给子组件，子组件调用函数

如下边的代码段，由于数据在父组件中，如果子组件需要使用到这些数据，就要父组件在标签中传递过去，如果子组件要对数据进行操作，那父组件就传递一个方法过去，子组件接收之后调用

export default class Search extends Component {

	search = ()=>{
		//获取用户的输入(连续解构赋值+重命名)
		const {keyWordElement:{value:keyWord}} = this
		//发送请求前通知App更新状态
		this.props.updateAppState({isFirst:false,isLoading:true})
		//发送网络请求
		axios.get(`/api1/search/users?q=${keyWord}`).then(
			response => {
				//请求成功后通知App更新状态
				this.props.updateAppState({isLoading:false,users:response.data.items})
			},
			error => {
				//请求失败后通知App更新状态
				this.props.updateAppState({isLoading:false,err:error.message})
			}
		)
	}

	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">搜索github用户</h3>
				<div>
					<input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
					<button onClick={this.search}>搜索</button>
				</div>
			</section>
		)
	}
}

2.消息订阅与发布机制

不限组件，这样就可以把数据放在真正需要的地方

工具库: PubSubJS

下载: npm install pubsub-js --save

使用:

1. import  PubSub from 'pubsub-js'   //引入
2. PubSub.subscribe('delete',function(data){})  //订阅
3. PubSub.publish('消息名',data)  //发布消息
4. PubSub.unsubscribe(name)  //关闭消息订阅

 消息订阅

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

componentDidMount(){
	this.token = PubSub.subscribe('CUMT',(_,stateObj)=>{
		this.setState(stateObj)
	})
}

componentWillUnmount(){
	PubSub.unsubscribe(this.token)
}

发布消息 

search = ()=>{
	//获取用户的输入(连续解构赋值+重命名)
	const {keyWordElement:{value:keyWord}} = this
	//发送请求前通知List更新状态
	PubSub.publish('CUMT',{isFirst:false,isLoading:true})
	//发送网络请求
	axios.get(`/api1/search/users?q=${keyWord}`).then(
		response => {
			//请求成功后通知List更新状态
			PubSub.publish('CUMT',{isLoading:false,users:response.data.items})
		},
		error => {
			//请求失败后通知App更新状态
			PubSub.publish('CUMT',{isLoading:false,err:error.message})
		}
	)
}

3.redux