学习目标
- 是什么
- 特点
- 基本使用说明
- 手写使用实战
(一)为什么需要组件通讯
我们知道,React为了实现一次代码编写多次使用的目的,我们在使用React开发的过程中,会将重复多次使用逻辑和功能代码拆成了一个个组件,在根组件下,多个组件共同组成了我们看到的一整个页面。
(二)什么是组件通讯
1、组件通讯的定义
根据刚才的讲解,我们知道了组件和组件的传值就是组件通讯。
2、那么React组件通讯有什么特点呢?
React遵循从上到下的数据流向,即单向数据流。
比如,数据是从父节点传递到子节点。如果顶层(父级)的某个props改变了,react会重新渲染所有的子节点。
为什么是React要设计成单向数据流的形式呢?
是因为单向数据流,简单容易回溯。不会发生,网状数据流的情况。
比如,父组件的数据通过props传递给子组件,子组件更重新了props,这样会导致父组件和其他关联组件的数据更新,UI渲染也会随着数据而更新。可能会导致严重的数据紊乱和不可控制。
3、组件通讯类型
组件通讯的类型有:
- 父子组件
- 兄弟组件(非嵌套组件)
- 祖孙组件(跨级组件)
接下来,我们以父子组件之间的通讯来介绍下用法。
(四)组件通讯的基本用法
1、安装步骤
网址:https://create-react-app.dev/...
yarn create react-app my-app
# npx create-react-app my-app
cd my-app
yarn start
npx 有版本问题,这里采用了yarn的安装方式
2、类型
类别
- 类组件
- 函数组件
类组件(性能不如函数组件 【需要实例化】) state 生命周期
组件名,一定要大写
// 类组件
class DemoClass extends React.Component {
constructor(props) {
super(props)
this.state = {
name: '传智播客',
}
}
render() {
return (
<div className="App">
<h1>Hello~Class-{this.props.name}</h1>
</div>
);
}
}
//函数组件
function DemoHooks(props) {
const divTitle = "我是APP";
const divStyle = {
color: 'red',
fontSize: '30px'
}
// 箭头函数
const clickBtn = () => {
console.log('[ 点击2 ] >')
props.setName('传智--');
}
return (
<div title={divTitle} className="App" style={divStyle} >
<h1>Hi~Hooks</h1>
<p>我是P标签--{divTitle}--{props.name}</p>
<button onClick={clickBtn}>点击事件</button>
</ div >
);
}
export default DemoHooks;
const {name,age}=this.props //class 组件
3、子组件父组件再渲染到子组件
借助了state实现了,把props传递到组件中,再借助setState 方法来更改;
在class 组件中,借助this.setState方法来实现。
//父组件
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
name: '北京',
count: 0
}
}
setName = (name) => {
this.setState({ name: name + this.state.count++ })
console.log('[ 子组件修改父组件发方法setName ] >', this.state.name)
}
render() {
return (
<>
<DemoHooks setName={this.setName} {...this.state}></DemoHooks>
<DemoClass {...this.state} />
</>
);
}
}
//子组件
//函数组件
function DemoHooks(props) {
const divTitle = "我是APP";
const divStyle = {
color: 'red',
fontSize: '30px'
}
// 箭头函数
const clickBtn = () => {
console.log('[ 点击2 ] >')
props.setName('北京--');
}
return (
<div title={divTitle} className="App" style={divStyle} >
<h1>Hi~Hooks</h1>
<p>我是P标签--{divTitle}--{props.name}</p>
<button onClick={clickBtn}>点击事件</button>
</ div >
);
}
4、兄弟组件之间的通讯
我们刚才讲到,React是单向数据流,那如果是兄弟之间的组件应当如何通讯呢?
是通过父组件,创建变量,传递到子组件,如果想进行通讯?那就按照this.setState的方式,从子组件执行父组件props过来的方法调用,在父组件中更改数据后,再更新到所有子组件中。
同理,跨级子节点也可以这样去更改。
好了,总结一下,今天我们讲的是React 组件之间的通讯方式,从函数组件和类组件两种。学习了React 单向数据流传递的实现机制下,父组件向子组件传递是使用props,子组件向父组件通讯是使用this.setState来更新数据的,以及兄弟组件传值的方式。
以上
相关问题:单向数据绑定 vs 双向数据绑定
所谓数据绑定,就是指View
层和Model
层之间的映射关系。
单向数据绑定:Model
的更新会触发View
的更新,而View
的更新不会触发Model
的更新,它们的作用是单向的。
双向数据绑定:Model
的更新会触发View
的更新,View
的更新也会触发Model
的更新,它们的作用是相互的。
https://segmentfault.com/a/11...
修改Props 需要通过state更改需求,传到组件中,改变内部的Props修改
写在最后的话
学习路上,常常会懈怠。
《有想实现目标需要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy...
如果有需要的伙伴,可以加我微信:ardenzhaogx
或者可以关注我的公众号:国星聊成长(我会分享成长的方法)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。