【React新手学习指南】05 React组件通讯|监听原理总结

写在前面，大家好！我是【跨考菌】，一枚跨界的程序猿，专注于后台技术的输出，目标成为全栈攻城狮！这博客是对我跨界过程的总结和思考。如果你也对Java、后端技术感兴趣，抑或是正在纠结于跨界，都可以关注我的动态，让我们一起学习，一起进步~
我的博客地址为：【跨考菌】的博客

---

上篇【React新手学习指南】04 React中如何发送ajax请求？ 介绍了React ajax的相关内容。本文就前面学到的核心知识点做下总结。和【跨考菌】一起加油吧~

如果你觉得对你有帮助的话，记得帮博主一键三连😊哦

---

1 组件通信

1.1 方式一: 通过props传递

1. 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)

2. 通过props可以传递一般数据和函数数据, 只能一层一层传递

3. 一般数据–>父组件传递数据给子组件–>子组件读取数据
   <TodoList todos={todos} />

4. 函数数据–>子组件传递数据给父组件–>子组件调用函数
   <TodoAdd add={this.add} count={todos.length} />

1.2 方式二: 使用消息订阅(subscribe)-发布(publish)机制

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save
3. 使用:

    import PubSub from 'pubsub-js' //引入
     PubSub.subscribe('delete', function(data){ }); //订阅
     PubSub.publish('delete', data) //发布消息
   

案例详见【React框架入门】React脚手架案例二

1.3 方式三: redux

下一篇讲。

2 事件监听理解

2.1 原生DOM事件

1) 绑定事件监听
a. 事件名(类型): 只有有限的几个, 不能随便写
b. 回调函数

2) 触发事件
a. 用户操作界面
b. 事件名(类型)
c. 数据()

2.2 自定义事件(消息机制)

1. 绑定事件监听
   a. 事件名(类型): 任意
   b. 回调函数: 通过形参接收数据, 在函数体处理事件
2. 触发事件(编码)
   a. 事件名(类型): 与绑定的事件监听的事件名一致
   b. 数据: 会自动传递给回调函数

2.3 ES6常用新语法

1. 定义常量/变量: const/let
2. 解构赋值: let {a, b} = this.props import {aa} from ‘xxx’
3. 对象的简洁表达: {a, b}
4. 箭头函数:
   a. 常用场景
   * 组件的自定义方法: xxx = () => {}
   * 参数匿名函数
   b. 优点:
   * 简洁
   * 没有自己的this,使用引用this查找的是外部this
5. 扩展(三点)运算符: 拆解对象(const MyProps = {}, <Xxx {…MyProps}>)
6. 类: class/extends/constructor/super
7. ES6模块化: export default | import

如果对你有帮助，记得帮博主一键三连😊哦