乐趣区

关于javascript:Day-35100-React-组件通讯基本介绍

jiezi

学习指标

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

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

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

退出移动版