组件间通信
React 的基本组件元素是一个个组件, 组件之间可能存在关联, 组合等关系. 不同的组件之间, 经常会发生数据传递或者交换, 我们称之为组件间通信.
根据传递的复杂程度, 可以分为三种情况:
父子间通信, 兄弟间通信, 同其他外部库通信.
父子间通信
在学习组件的时候, props 是输入, 组件是输出. 在这里的 props, 就是父向子传递的数据. 而子向父传递数据, 则是通过父级传递进来的 props 中的函数引用, 间接的唤起父级处理函数, 并传入参数.
- /* 父组件 */
- export default class NameInput extends Component {
- constructor(props) {
- super(props);
- this.state = {
- value: "default"
- };
- this.handleSubChange = this.handleSubChange.bind(this);
- }
- handleSubChange(newValue) {
- this.setState({ value: newValue });
- }
- render() {
- return (
- <div>
- <div>{this.state.value}</div>
- <Sub sub="sub1" subClick={this.handleSubChange} />
- </div>
- );
- }
- }
- /* 子组件 */
- export default class NameInput extends Component {
- constructor(props) {
- super(props);
- this.handleChange = this.handleChange.bind(this);
- }
- handleChange() {
- this.props.subClick("new sub");
- }
- render() {
- return <div onClick={this.handleChange}>{this.props.sub}</div>;
- }
- }
在这个例子里, 通过调用 props 上传递进来的处理函数, 达到了子向父传递数据的目的.
兄弟间通信
不使用其他库的话, 借助 React 原生 API, 有两种方法:
通过父组件做中转
借用父组件以外, 也可以使用 react 的 Context API
关于 Context API, 我们还是先翻文档 Context https://react.docschina.org/docs/context.html .
Context 主要是为了处理多个组件可能需要获取同一组数据, 例如文档中提到的 theme, 以及 B 端系统经常需要获取全局登录态, 都可以使用 ContextAPI.
在 Context 中, 有两个重要的概念, Provider 和 Consumer.
Provider 提供一个全局的数据源, 订阅了它的数据源的 Cusumer, 不论节点嵌套多深都可以获取到Provider 提供的数据.
看一个例子.
点我 - CodeSandbox https://codesandbox.io/s/r713nv6qkq
在一些轻量级的应用中, 基本上可以使用 ContextAPI 解决多级数据共享的问题. 当然, 如果要更强大, 只能用 Redux 等库了.
关于 Redux 的使用, 会在下一篇详细讲解.
同其他外部库通信
如果一个项目中, 既有 React, 又有 jQuery, 又有 vue 怎么办? 怎么解决这种情形下得数据流转?
这是阿里的一道面试题, 我那时没有怎么写过 React, 基本上就是 zepto 和小程序, 面试官没有为难我, 提了这样的问题. 当时我提出了一种想法, 发布订阅加适配器模式. 下面简单说一下我的想法.
如果把这个场景抽象一下, 可以看做是三种不同的组件需要相互通信, 它们对数据的要求不一样, 数据格式不同, 但是一旦数据打到各自的组件内, 其实数据流就不需要我们关心了.
所以可以维护一个公共的数据集市, 所有人都从数据集市里取数据, 也向数据集市中发数据, 数据集市是一个公开的发布者, 各组件为订阅者.
数据集市承担了适配的工作, 对各个组件传进来的数据统一保存, 在取数据时, 根据组件的类型不同, 派发不同形式的组件, 这样, 基本上就将组件间通信提升至了一个统一的数据集市, 避免了组件的之间一对一通信.
当然, 这和 flux 的思想也很类似, 统一数据源,统一分发, 只和数据源交互, 避免了多个组件间复杂通讯带来的数据流混乱.
不管怎么样,在前端应用越来越复杂的今天, 数据流的流向问题是绕不开, 不论是单向数据流, 还是多 Model 多数据流, 都是适配当前场景下的解决方案, 以后可能会有新的解决方案.
但是目前, 在 React 体系中, Redux 是绕不开的. 下一篇,说一下 flux 和 Redux.
来源: https://www.cnblogs.com/liuyongjia/p/9715933.html