React(一)

发表于 | 分类于
  • JSX
    • 一种标签语法,JS进行的语法扩展 | 遵循JS 的命名规范,一般使用camelCase小驼峰
    • 不是字符串、不是HTML标签
    • 描述UI呈现与交互的直观的形式
    • 生成React元素
  • 为什么React不把视图标记和逻辑分开
    • 渲染和UI标记是有逻辑耦合的
    • 即使是这样的一个耦合，也能实现关注点分离
  • JSX插值表达式
    • 表达式：一切有效的（符合JS变成逻辑的）表达式 { title }
    • JSX被编译以后 -> React元素 -> 普通的对象
  • html中的div容器叫根节点
    • 根节点内的所有的内容都是由ReactDOM进行管理
    • 一个React应用只有一个根节点
    • 用ReactDOM.render方法将react元素渲染到根节点中
1
2
3
4
5
6
7
8
9
/**
 * @param ReactElement - react元素
 * @param rootNode - 根节点
 */

ReactDOM.render(
  rEl,
  document.getElementById('app')
)
  • 基本的更新逻辑
    • React元素是不可变的对象
    • immutable Object
      • 不能添加属性
      • 不能修改属性
      • 不能删除属性
      • 不能修改属性的枚举、配置、可写
        • enumerable、configurable、writable
    • ReactDOM.render会深度对比新旧元素的状态，只会做必要的真实DOM更新
    • 虚拟DOM的对比
      • 渲染之前 -> 每个React元素组成一个虚拟DOM的对象结构 -> 渲染
      • 更新之前 -> 形成新的虚拟DOM的对象结构 -> 对比新旧虚拟DOM节点 -> 分析出两者的不同点 -> 形成一个DOM更新的补丁 -> 再操作真实DOM(更新真实DOM)
  • 组件渲染
    • ReactDOM.render的第一个参数一定是要react元素
      • 组件使用JSX语法
      • 使用React.createElement将组件转换成react元素
    • 组件渲染过程
      • React主动调用Test组件
      • 将属性集合转化对象props => { title: ‘This is a Class Component’ } 等
      • 将对象作为props传入组件
      • 替换JSX中的props或者state中的变量
      • ReactDOM将最终的React元素通过一系列操作转换成真实DOM进行渲染
    • 组件调用规范
      • 视图标记HTML标签
      • 大驼峰写法作为一个React元素
      • 组件转换React元素 React.createElement()
  • 组件
    • 在前端，组件视图的片段
  • 组合组件
  • 属性props和数据/状态state 区别
    • state => 数据池 { } 组件内部的管理数据的容器 | 组件内部可写可读
    • props => 属性池 { } 外部调用足迹爱你时传入的属性集合 | 组件内部可读不可写
  • 函数组件
    • 函数组件一定要是一个纯函数
    • 纯函数能保证绝对的复用性
    • 相同的入参保证返回相同的结果
    • 纯函数不可以修改入参
  • state使用注意事项
    • 必须使用setState方法来更改state
    • 多个setState是会合并调用
    • 避免直接依赖props和state更新数据 | 异步程序更新
1
2
3
4
5
6
// 同步
this.setState((state,props)=>{
	// state 上一个state
	// props 此次更新时被使用的props
	result:state.result + props.content
})
  • React的事件对象
    • SynetheticBaseEvent 合成基础事件对象 React重新定义
    • 这个SBE是遵守W3C事件对象的规范的，不存在任何的浏览器兼容性问题
  • 条件渲染
    • 判断表达式只有Boolean false，null,undefined 状态的时候才不会渲染
    • NaN 0 会渲染 count.toString()
  • 列表渲染
    • 不建议使用index作为key值（禁止)
      • 列表顺序会发生改变，元素增删的情况下
      • 列表项增删或顺序改变了，index的对应项就会改变
      • key对应的项还是之前列表情况的对应元素值
      • 会导致状态（arr）混乱，查找元素性能就会变差
    • 如果列表是静态不可操作的，可以选择index作为key，也不推荐
      • 影响列表以后维护扩展
    • 可以用数据的ID（有可能ID会变动）
    • 使用动态生成一个静态ID （nanoid）
  • 受控组件
    • state成为组件唯一数据源
    • 控制组件操作并且同步state
  • 非受控组件
    • 组件数据不受控于state
    • 使用React ref从DOM节点中获取组件数据
  • 状态提升
    • 两个组件（无父子关系）共享一个数据并且同步数据变化
    • 类组件调用（实例化）的时候，组件内部的状态是唯一且独立的
  • 声明式编程