JackLeeVip
JackLeeVip

Day9. setState不可变的力量 全局事件传递 非受控组件

前面知识点补充

setState不可变的力量

官方文档.png
案例.png

  • 在开发中不要这样做


    image.png

  • 性能优化, SCU, shouldComponentUpdate生命周期函数判断有没有变化, 要不要刷新

  • 引用类型, 真正创建出来的数组在内存空间里面, friends仅仅是一个引用, 保存了这块空间的内存地址

引用类型.png

  • 往内存里面push


    不会刷新的原因.png

推荐做法:

// ES6中的展开运算符, 放到一个新的数组中
const newFriends = [...this.state.friends];
newFriends.push({name: "tom", age: 30});
this.setSate({
  friends: newFriends
})
重新更新内存表现.png
  • 没写SCU优化怎么写都行
  • 写SCU太麻烦 => 继承自PureComponent
  • 引用了Component却没使用会出现一个警告, 换成引用PureComponent

讲两个小东西

  • context跨组件通信, 假如按照模块化开发的方式, 单独文件, 代码组织, export导入导出
  • 一个函数式组件里面用了多个context, 类组件中如何使用多个context? jsx -> 嵌套的方式, Consumer的方式多层嵌套, context是一个对象只保存一个

全局事件传递

  • 事件总线: event bus, 本质上是一个全局对象, 发出一些事件
  • 依赖一个第三方库, yarn安装, 终端'yarn add events'
  • 导入, 本地文件跟上一个相对路径, node_modules文件夹中的库, 直接写上库的名字
    import { EventEmitter } from 'events';
  • 在固定的函数中监听事件componentDidMount() {}
  • 取消事件监听componentWillUnmount() {}
  • ...展开运算符, 用多个变量进行接收
emitEvent() {
  eventBus.emit("syaHello", "Hello Home",  123);
}
事件总线的使用.png
打包过的代码.png

如何使用ref

  • React前面学习的坡度很陡峭, 后面不是特别难
  • 在React的开发模式中, 通常情况下不需要, 也不建议直接操作DOM原生, 但使某些特殊的情况, 确实需要获取到DOM进行某些操作:
    • 管理焦点, 文本选择或媒体播放;
    • 触发强制动画;
    • 继承第三方DOM库;
  • 如何创建refs来获取对应的DOM呢? 目前有三种方式:
  1. 使用方式一: 字符串(不推荐, 后续的更新可能会删除)
  2. 使用方式二: 对象方式
  3. 使用方式三: 回调函数方式

ref的类型- ref的值根据节点的类型而有所不同:

ref的类型.png
  • 函数式组件获取不到对应的对象, 没有组件的实例
案例.png

认识受控组件

  • 一般都是跟表单元素有关系

  • 在React中, HTML表单的处理方式和普通的DOM元素不太一样: 表单元素通常会保存在一些内部的state.


    image.png

受控组件基本演练

  • 在HTML中, 表单元素(如、