学习指标

  • 是什么
  • 特点
  • 根本应用阐明
  • 手写应用实战

（一）为什么须要组件通信

咱们晓得，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-appcd my-appyarn 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批改