React（四）：事件总线、setState的细节、PureComponent、ref

一、事件总线

这里的事件总线和vue中基本一个思路。

在React中可以通过第三方库来进行任意组件通信，安装：

npm install hy-event-store

使用：

1、在某个地方新建jsx文件对外暴露事件总线

// 创建事件总线
import { HYEventBus } from 'hy-event-store';
const eventBus = new HYEventBus();export default eventBus;

2、在需要接收值的组件中，在挂在完毕的生命周期函数中绑定事件和被触发时的回调，最好写上销毁的代码：

//事件的回调getData(name,age) {console.log(name,age,this);this.setState({name: name, age: age})}//1.挂载完毕后绑定事件接收别的地方传过来的值componentDidMount() {eventBus.on('getData', this.getData.bind(this))}//3.销毁的时候解绑componentWillUnmount() {eventBus.off('getData', this.getData)}

3、另一个组件触发，并传值

sendData() {//2.某个组件中触发事件并传值eventBus.emit('getData', 'zzy', 18)}render() {return (<div><h1>GrandSon组件</h1><button onClick={() => this.sendData()}>点击传值给App</button></div>)}

二、关于setState的原理

开发中我们并不能直接通过修改state的值来让界面发生更新：
因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；
React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来通过数据劫持监听数据的变化；
我们必须通过setState来告知React数据已经发生了变化；
源码先简单lou一眼：

1. setState的三种使用方式

我们基于以下组件进行操作

export class Son extends React.Component {constructor() {super();this.state = {name: 'zzy',age: 18,}}changeName() {this.setState(...)}render() {return (<div><h1>{this.state.name}</h1><button onClick={() => this.changeName()}>点击修改名字</button></div>)}
}

（1）基本使用

我们之前用的最多的就是直接传入一个配置对象，然后给state中数据重新赋值。这里的原理是借助了Object.assign(state, newState)对state和传入的对象进行合并，如果key重复那么就进行值的覆盖，没改的继续保留

//1.基本使用,传入配置对象,不是覆盖原来的state,而是进行对象的合并
this.setState({name: 'ht'  //原理:对象的合并Object.assign(state, newState)
})

（2）传入一个回调

setState的参数除了可以传配置对象外，还可以传入一个回调函数，通过return一个对象，对象中包含我们要修改的值，也可以实现数据的更新和页面的重新渲染。

这个回调可以接收两个参数：state和props，分别对应的是上一个修改状态的state和props的值们。

注意是上一个修改状态！如果在一个回调中多次执行setState更改数据，那么参数state保存的是上一个修改状态的值！如果不明白请看本节2.1.1部分

//2.传入一个回调，可以接收修改之前的state和props
this.setState((state,props) => {console.log(state,props);return {name: 'ht' //这里也可以进行更改}
})

（3）第一个参数是对象，第二个参数是回调

setState是一个异步调用。

如果在setState下面使用name，我们会发现拿到的是原来的name，这就证明了setState是一个异步调用，那么如果我们想在数据变化后再基于数据进行一些操作怎么办？这时候可以传入第二个参数：一个回调函数，该回调函数执行的时机就是数据更新完且render调用完毕后。

//3.setState是一个异步调用
//如果想等数据更新后做一些操作，可以传入第二个参数：回调
//第二个参数执行的时机就是数据更新完之后
this.setState({ name