前面知识点补充

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中, 表单元素(如<input>、<textarea>和<select>)之类的表单元素通常自己维护state, 并根据用户输入进行更新.

  
  
  image.png

• 受控组件-select的使用

  
  
  select的使用.png

• 受控组件-多输入

• 密码输入、验证码输入

• </br>标签做换行, 不推荐, 推荐包裹一个<div>独占一行

• 有什么公共的代码是可以抽取的? 固定的格式封装成一个独立的组件

  
  
  image.png

handleChange(event) {
  this.setState({
    // 计算属性名
    [event.target.name]: event.target.value
})
}

• MDN上学习JavaScript MDN官网
  
  image.png

非受控组件

• React推荐大多数情况下使用 受控组件 来处理表单数据:

  
  
  image.png
  
  
  费受控组件.png

coderwhy的React核心技术与开发实战课程链接

少年~来做同学呀~.png