React中组件通信一共分为三种形式:
- 父子通信
- 子父通信
- 跨组件通信
父子通信
概念:父组件定义一个数据传递给子组件,但是这个数据只有父组件有权利修改,子组件不可以。
父组件中定义数据
constructor () {
super()
this.state = {
name: '小哥哥'
}
}
传递给子组件:
render () {
let { name } = this.state
return (
<Fragment>
<h3> father组件 </h3>
<Son name = { name }></Son>
</Fragment>
)
}
子组件接收数据:
class Son extends Component {
render () {
let { name } = this.props
return (
<Fragment>
<h4> son组件 </h4>
<p> 父亲给我起了个名字: { name } </p>
</Fragment>
)
}
}
这样就完成了简单的父子通信,前面说了父组件是可以修改数据的,所以可以在父组件同定义和触发方法修改数据
父组件中定义方法:
nameChange = () => {
this.setState({
name: '哥哥小'
})
}
父组件中触发方法:
render () {
let { name } = this.state
return (
<Fragment>
<h3> father组件 </h3>
<button onClick = { this.nameChange }> 改名字 </button>
<Son name = { name }></Son>
</Fragment>
)
}
子父通信
子父通信就是在子组件中修改父组件的东西
父组件中定义数据和方法:
constructor () {
super()
this.state = {
name: '小哥哥'
}
}
nameChange = () => {
this.setState({
name: '哥小小'
})
}
父组件将数据和方法传递给子组件:
render () {
let { name } = this.state
return (
<Fragment>
<h3> father组件 </h3>
<Son name = { name } nameChange = { this.nameChange }></Son>
</Fragment>
)
}
子组件调用父组件的方法来修改父组件的数据:
render () {
let { name,nameChange } = this.props
return (
<Fragment>
<h4> son组件 </h4>
<button onClick = { nameChange }> 改名字 </button>
<p> 父亲给我起了个名字: { name } </p>
</Fragment>
)
}
上面是简单的子父通信,后面可以通过ref链来完成子父通信
子组件中定义数据:
class Son extends Component {
constructor() {
super()
this.state={
name : '陈小龙'
}
}
render () {
let { name } = this.state
return (
<Fragment>
<h4>Son组件</h4>
<p>父亲给我起了名字:-----{ name }</p>
</Fragment>
)
}
}
父组件中有两种书写方法:
方法1:
class Father extends Component {
changeName=()=>{
console.log( this )
this.refs.son.setState({//方法1
name : '凌从君'
})
}
render () {
return (
<Fragment>
<h3>Father组件</h3>
<button onClick={ this.changeName }>给儿子改名</button>
<Son ref="son"></Son>//方法1
</Fragment>
)
}
}
方法2:
class Father extends Component {
changeName=()=>{
console.log( this )
//this.refs.son.setState({//方法1
//name : '凌从君'
//})
this.son.setState({
name : '凌从君'
})
}
render () {
return (
<Fragment>
<h3>Father组件</h3>
<button onClick={ this.changeName }>给儿子改名</button>
{/* <Son ref="son"></Son>//方法1 */}
<Son ref={ el => this.son = el }></Son>
</Fragment>
)
}
}
跨组件通信(context)
什么是跨组件通信?
例如:爷爷要给100块钱给孙子,不经过爸爸,这种行为叫做跨组件通信
原先的跨组件传递要一级一级的传递数据,这种形式很是低效,context的出现解决了这个低效的方案
实例:爷爷要给孙子取名字
import React,{Component,Fragment} from 'react'
const NameContext = React.createContext("陈小龙") //步骤1
class GrandFather extends Component{
render () {
return (
<Fragment>
<h2>GrandFather组件</h2>
<Father></Father>
</Fragment>
)
}
}
class Father extends Component {
render () {
return (
<Fragment>
<NameContext.Provider value="陈小龙"> //步骤2
<h3>Father组件</h3>
<Son></Son>
</NameContext.Provider>
</Fragment>
)
}
}
class Son extends Component {
static contextType = NameContext //步骤3
render () {
return (
<Fragment>
<h4>Son组件</h4>
<p>我是儿子---爷爷给我取了个名叫:{ this.context }</p> //步骤4,this.context这个名固定的不可更改
</Fragment>
)
}
}
export default GrandFather
这样,’陈小龙’这个名字就给孙子取好了