react组件通信

组件通信

父子组件通信

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      子组件1
      {props.msg}
    </div>
  )
}

// 类子组件
class CSon extends React.Component {
  render() {
    return (
      <div>
        子组件2
        {this.props.msg}
      </div>
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon msg={this.state.message} />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

export default App

props说明

1.单向数据流，props是只读对象。

2.可以传递任何数据类型 ：

数字、字符串、布尔值、数组、对象、函数、JSX

子传父组件

单向数据流，子想修改数据只能告知父组件自行修改。

和vue一样的

修改为下边的方式

兄弟组件通信

通过状态提升机制，利用共同的父组件实现兄弟通信

1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
   • 提供共享状态
   • 提供操作共享状态的方法
2. 要接收数据状态的子组件通过 props 接收数据
3. 要传递数据状态的子组件通过props接收方法，调用方法传递数据
   

报错

一定要记住class内的方法不会为我们绑定this,此时this undefined ,要么箭头函数，要么就bind(this)

这句话如何理解，我们在初始化一个类时，调用该对象方法时，为啥可以正常使用this? 这里就要对this指向有一定理解，

大佬文章学习地址：https://zhuanlan.zhihu.com/p/435803515

使用上下文通信createContext

jsx只是React.createElement(component, props, …children)的语法糖

const MyContext = React.createContext(defaultValue);

创建一个需要共享的Context对象：

• 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；
• defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

​