第五章：几个重要技术总结

第五章：几个重要技术总结

5.1. 组件间通信

5.1.1. 方式一: 通过 props 传递

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

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

3. 一般数据–>父组件传递数据给子组件–>子组件读取数据

4. 函数数据–>子组件传递数据给父组件–>子组件调用函数

5.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) //发布消息

5.1.3. 方式三: redux

后面专门讲解

5.2. 事件监听理解

5.2.1. 原生 DOM 事件

1. 绑定事件监听

a. 事件名(类型): 只有有限的几个, 不能随便写

b. 回调函数

2. 触发事件

a. 用户操作界面

b. 事件名(类型)

c. 数据()

5.2.2. 自定义事件( 消息机制)

1. 绑定事件监听

a. 事件名(类型): 任意

b. 回调函数: 通过形参接收数据, 在函数体处理事件

2. 触发事件(编码)

a. 事件名(类型): 与绑定的事件监听的事件名一致

b. 数据: 会自动传递给回调函数

5.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