一、状态机setState是一个异步操作
setState用来修改state中的初始状态,但是它异步操作,不能在setState之后马上获取到最新的数据。可以使用setState的第二个参数来获取到最新的数据
setState(要修改的数据对象,()=>{...})
在第二个参数(回调函数)中可以获取到state中最新的数据。
示例代码:
import React, { Component } from 'react'
export default class State extends Component {
state = {
num :100
}
addNum(){
var n = this.state.num;
n++;
this.setState({ num : n },()=>{
console.log(this.state.num,1111111111)//在回调函数中可以获取到state中最新的数据
})
console.log(this.state.num,222222222222)//此时获取到的数据不是最新的
}
render() {
return (
<div>
<h2>数量:{ this.state.num }</h2>
<button onClick={ ()=>this.addNum() }>点击增加</button>
</div>
)
}
}
二、组件通信
1.父子组件
在父组件使用子组件时,通过自定义属性进行数据的传递,在子组件中通过props来接收。
(1)父组件
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
state = {
msg : '天道酬勤'
}
render() {
return (
<div>
<h1>这是父组件</h1>
<hr/>
<Child data={this.state.msg} />
</div>
)
}
}
(2)子组件
import React, { Component } from 'react'
class Child extends Component {
render() {
return (
<div>
<h2>这是子组件</h2>
{/* 通过this.props来获取父组件传递的数据 */}
<p>父组件的内容:{ this.props.data }</p>
</div>
)
}
}
export default Child;
2.子父组件
使用自定义事件来实现子父组件通信
在父组件使用子组件时,传递一个自定义事件,用来让子组件触发或者进行数据的传递
import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
state = {
msg : '天道酬勤',
str:''
}
getStr(e){
this.setState({ str:e })
}
render() {
return (
<div>
<h1>这是父组件</h1>
<p>子组件:{ this.state.str }</p>
<hr/>
<Child data={this.state.msg} sendStr={ (str)=>this.getStr(str) } />
</div>
)
}
}
在子组件中,通过this.props.自定义事件名 来触发父组件的函数并传递参数
import React, { Component } from 'react'
class Child extends Component {
send(){
console.log(this)
//调用父组件传递的函数
this.props.sendStr('这是子组件的数据');
}
render() {
return (
<div>
<h2>这是子组件</h2>
{/* 通过this.props来获取父组件传递的数据 */}
<p>父组件的内容:{ this.props.data }</p>
<button onClick={ ()=>this.send() }>反馈数据</button>
</div>
)
}
}
export default Child;
3.非父子组件
(1)设置一个公用容器
创建/src/bus.js,并引入events类中的EventEmitter事件监听器
const EventEmitter = require('events');
const MyEvent = new EventEmitter();
export default MyEvent;
(2)在项目启动文件中进行Component原型的挂载
/src/index.js
import React,{ Component } from 'react';
import bus from './bus'
Component.prototype.bus = bus;//将容器挂载到Component的原型上
(3)页面组件中使用
①数据发生端
this.bus.emit('事件名称','要传递的数据')
②数据接收端
constructor(){
super();
this.bus.on('事件名称',(形参)=>{
...
})
}