[React] 尚硅谷 -- 学习笔记(五)

第五章 总结

组件间通信

通过props传递

• 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
• 通过props可以传递一般数据和函数数据, 只能一层一层传递
• 一般数据–>父组件传递数据给子组件–>子组件读取数据
• 函数数据–>子组件传递数据给父组件–>子组件调用函数

使用消息订阅(subscribe)-发布(publish)机制

• 工具库: PubSubJS
• 下载: npm install pubsub-js --save
• 使用
  • import PubSub from 'pubsub-js' //引入
  • PubSub.subscribe('delete', function(data){ }); //订阅
  • PubSub.publish('delete', data) //发布消息

redux

 

事件监听

原生DOM事件

• 绑定事件监听

  • 事件名(类型):只有有限的几个,不能随意写
  • 回调函数

• 触发事件

  • 用户操作界面
  • 事件名(类型)
  • 数据()

自定义事件(消息机制)

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

ES6常用新语法

• 定义常量/变量:const/let

• 解构赋值: let {a, b} = this.props import {aa} from ‘xxx’

• 对象的简洁表达: {a, b}

• 箭头函数:

  • 常用场景

    • 组件的自定义方法: xxx = () => {}
    • 参数匿名函数

  • 优点

    • 简洁

    • 没有自己的this,使用引用this查找的是外部this

• 扩展(三点)运算符: 拆解对象(const MyProps = {}, <Xxx {…MyProps}>)

• 类: class/extends/constructor/super

• ES6模块化: export default | import