ASCII码 ASCII码

Day 35/100 React 组件通讯基本介绍

发布于：2022-04-12 11:19:43  栏目：技术文档

学习目标是什么特点基本使用说明手写使用实战（一）为什么需要组件通讯我们知道，React为了实现一次代码编写多次使用的目的，我们在使用React开发的过程中，会将重复多次使用逻辑和功能代码拆成了一个个组件，在根组件下，多个组件共同组成了我们看到的一整个页面。

（二）什么是组件通讯1、组件通讯的定义根据刚才的讲解，我们知道了组件和组件的传值就是组件通讯。

2、那么React组件通讯有什么特点呢？React遵循从上到下的数据流向，即单向数据流。

比如，数据是从父节点传递到子节点。如果顶层（父级）的某个props改变了，react会重新渲染所有的子节点。

为什么是React要设计成单向数据流的形式呢？是因为单向数据流，简单容易回溯。不会发生，网状数据流的情况。

比如，父组件的数据通过props传递给子组件，子组件更重新了props，这样会导致父组件和其他关联组件的数据更新，UI渲染也会随着数据而更新。可能会导致严重的数据紊乱和不可控制。

3、组件通讯类型组件通讯的类型有：

父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）接下来，我们以父子组件之间的通讯来介绍下用法。

（四）组件通讯的基本用法1、安装步骤网址：https://create-react-app.dev/…

  1. yarn create react-app my-app
  2. # npx create-react-app my-app
  3. cd my-app
  4. yarn start

、类型类别

类组件函数组件​ 类组件（性能不如函数组件 【需要实例化】） state 生命周期

组件名，一定要大写

  1. // 类组件
  2. class DemoClass extends React.Component {
  3.   constructor(props) {
  4.     super(props)
  5.     this.state = {
  6.       name: '传智播客',
  7.     }
  8.   }
  9.   render() {
  10.     return (
  11.       <div className="App">
  12.         <h1>Hello~Class-{this.props.name}</h1>
  13.       </div>
  14.     );
  15.   }
  16. }
  1. //函数组件
  2. function DemoHooks(props) {
  3.   const divTitle = "我是APP";
  4.   const divStyle = {
  5.     color: 'red',
  6.     fontSize: '30px'
  7.   }
  8.   // 箭头函数
  9.   const clickBtn = () => {
  10.     console.log('[ 点击2 ] >')
  11.     props.setName('传智--');
  12.   }
  14.   return (
  15.     <div title={divTitle} className="App" style={divStyle} >
  16.       <h1>Hi~Hooks</h1>
  17.       <p>我是P标签--{divTitle}--{props.name}</p>
  18.       <button onClick={clickBtn}>点击事件</button>
  19.     </ div >
  20.   );
  21. }
  23. export default DemoHooks;
  1. const {name,age}=this.props //class 组件

3、子组件父组件再渲染到子组件借助了state实现了，把props传递到组件中，再借助setState 方法来更改；

在class 组件中，借助this.setState方法来实现。

  1. //父组件
  2. class App extends React.Component {
  3.   constructor(props) {
  4.     super(props)
  5.     this.state = {
  6.       name: '北京',
  7.       count: 0
  8.     }
  9.   }
  10.   setName = (name) => {
  11.     this.setState({ name: name + this.state.count++ })
  12.     console.log('[ 子组件修改父组件发方法setName ] >', this.state.name)
  13.   }
  14.   render() {
  15.     return (
  16.       <>
  17.         <DemoHooks setName={this.setName} {...this.state}></DemoHooks>
  18.         <DemoClass {...this.state} />
  19.       </>
  20.     );
  21.   }
  22. }
  1. //子组件
  2. //函数组件
  3. function DemoHooks(props) {
  4.   const divTitle = "我是APP";
  5.   const divStyle = {
  6.     color: 'red',
  7.     fontSize: '30px'
  8.   }
  9.   // 箭头函数
  10.   const clickBtn = () => {
  11.     console.log('[ 点击2 ] >')
  12.     props.setName('北京--');
  13.   }
  15.   return (
  16.     <div title={divTitle} className="App" style={divStyle} >
  17.       <h1>Hi~Hooks</h1>
  18.       <p>我是P标签--{divTitle}--{props.name}</p>
  19.       <button onClick={clickBtn}>点击事件</button>
  20.     </ div >
  21.   );
  22. }

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修改

以上就是全部内容，希望对大家有所帮助，

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行