华为OD机试真题 Java 实现【等差数列】【2023 B卷 100分】，附详细解题思路

组件通信

父子组件通信

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

子传父组件

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

修改为下边的方式

兄弟组件通信

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

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

使用上下文通信createContext

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

const MyContext = React.createContext(defaultValue);

​