破题

考察点：是否有大型项目经验。
状态管理框架思考点：在不同组件通信中保持一致性、排除副作用。
此题为：列举题。
解题思路：一个基本，多个场景。即先定主题，再列举场景。
组件关系：

1. 父子
2. 子父
3. 兄弟
4. 无直接关系

   组件关系 - 父子

   props

   组件关系 - 子父

   回调函数（callback）
   callback 不仅用于值传递（子传父），还可用在渲染中，父组件依据子组件返回结果，决定子组件该渲染什么。如下代码： ```tsx // 场景一

   xxxxx

   } />

// 场景二：父组件专注渲染结果，子组件专注业务逻辑

(

{ params.map(item => (
• { item.title }
)) }

**实例函数（不推荐）**<br />通过 `ref`获取子组件实例（类组件），然后调用子组件实例上的方法。
<a name="zsVQ3"></a>
## 组件关系 - 兄弟
兄弟组件之间通信，依赖共同父组件进行中转。<br />常用于：容器组件中协调各个组件。
<a name="wtz3e"></a>
## 组件关系 - 无直接关系
两组件无直接关系，需共享数据。
1. Context<br />常见常见 i18n 国际化。<br />涉及知识点：`createContext()`、HOC 封装消费组件。
2. 全局变量、事件（不推荐）<br />**全局变量**：将变量挂在 window 上，window 上的变量改变不会引起 React 组件重新渲染。场景：存储临时数据。<br />**全局事件**：
```tsx
class CallPage extends Component {
  dispatchEvent = () => {
    document.dispatchEvent(new CustomEvent('callEvent', {
      detail: { callId: this.props.callId }
    }))
  }
  render() {
    return <Button onClick={this.dispatchEvent} />
  }
}
class ReportPage extends Component {
  state = {
    callId: null
  }
  changeCallId = e => {
    this.setState({ callId: e.target.callId })
  }
  componentDidMount() {
    document.addEventListener('callEvent', this.changeCallId)
  }
  componentWillUnmount() {
    document.removeEventListener('callEvent', this.changeCallId)
  }
  render() {
    return <Button onClick={() => {
      fetch('url地址', {id: this.state.callId})  
    }} />
  }
}

注意点：事件的绑定需要在组件加载时放入。若 CallPage 和 ReportPage 不是同时存在与页面上时，此方案不适用。

1. 状态管理框架
   Redux、Mobx、Flux