UI 渲染

组件导出

组件的导出有默认导出和命名导出. 对应的组件的导入方式和组件的导出方式相关.可以通过重命名的方式解决命名冲突的问题.

Dynamic import 需要使用默认导出, 使用结果的时候需要使用.default
Static import: 在 React 中使用静态 import 导入默认模块时,不需要使用 .default 属性来获取默认属性,并且可以直接像普通导出一样使用默认导出, 因为 babel 帮我们做了转化

JSX

JSX规则: 返回一个根元素; 闭合所有的标签; 小驼峰99%的属性. [aria-] [data-]属性像在 HTML 中一样使用 -.

需要 import react from React
JSX 是React.createElement的语法糖

Curly Braces

大括号的使用场景有两个, 分别是JSX, 和紧跟在=后的属性. 举例: inline style属性使用小驼峰命名法

children prop 传递JSX. ReactNode

Props

Props 可以让我们独立思考React的每一部分, Props 是不可以改变的, 是组件唯一的参数.
通过展开语法传递Props, 只有在变量是undefined, 默认值才起作用.

Condition

支持条件渲染的语法有三种,分别是if else, &&, 和? :. 需要注意的是, 不要在&& 左侧放置数字0, React 乐意渲染 0 而不是nothing.

渲染列表

渲染列表的时候指定key, key会影响DOM是否重用(bailtout), 进而影响性能. React中存在渲染树和依赖树的概念, 捆绑器和依赖树相关. 比如: 组件的 Props 中存在children的情况下,渲染树就和依赖树不一样.

渲染树是什么? 渲染树代表了: 在一次React渲染中, React组件的嵌套关系. 渲染树有助于识别顶级组件和叶组件.顶级组件会影响其下所有组件的渲染性能,而叶组件通常会频繁re-render.

依赖树是什么? 依赖树代表了: React中的模块依赖关系, webpack 可以使用依赖树来打包代码.

增加交互

响应事件

界面上的控件会根据用户的输入而进行更新, 添加事件处理函数,在一些情况下stopPropagation,和preventDefault. 也需要关注onClickCapture 即使阻止冒泡,也会捕获(click analysis).

Or, more concisely, using an arrow function:
By convention, it’s usually called e, which stands for “event”.

state

React 的心智模型, state 是私有且独立的变量, 换句话说,如果你渲染相同的组件两次,每一个副本都会存在完全独立的 state.

render and commit

React应用中,一次屏幕变化会经历三个步骤: 触发, 渲染和提交.
React中的渲染不同于浏览器的绘制, 指的是函数的调用, 每次都会返回一个新的 return JSX.

state 快照

在任何一次渲染中,state变量是不会改变的.每次渲染类似一张快照. setXxState()后会请求渲染,即,排队一次新的渲染.React会批量处理setState.但是不会跨事件批量处理.No magic, just Array!(这是React的实现, 独立于组件之外, 存在于React之中)
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

// 多次调用`useState`
// 针对同一个`state`, 是否是首次执行 `firstRun`
const states =[];
const setters = [];
let cursor = 0;
let firstRun = false;
function createSetter (cursor){
  return function setterWithCursor(newValue){
      state[cursor] = newValue
 }
}
const useState (initial){
  if(firstRun){
    states.push (initial)
    setters.push( createSetter(cursor))
    firstRun=false
  }
  const value = state[cursor];
  const setter = setters[cursor]
  cursor++
  return [value, setter]
}

Batch Update

设置一次state(value or function), 会加入渲染队列. 等待处理函数的setState全部执行完,才会更新state.
基于以上:React建议将父组件的callback放在event handler中,而不是useEffect中.
FlushSync API useSyncExternalStore Hook内所有的更新会同步更新到浏览器DOM,也就是会退出批量渲染流程

state readonly

state 应视作只读变量, 只做替换不做更改,不要制作 mutation, 建议创建一个新的对象/数组,使用展开运算符. 使用 filter ,map, slice ,deepClone.

React DOM Diff 的时间复杂度是 n
事件的三个阶段
js 和 mjs 的区别
cjs, amd, mjs 的区别
FlushSync , useDeferredValue , useTransition, startTransition, useSyncExternalStore
hook 在 react 中是如何工作的呢?
根据饮品的名称展示不同的信息---我们可以将去掉所有的 if else 作为切入点.
1.去除重复度. 提取一个组件的JSX,在另外的例子中,diff不匹配部分,最后将不匹配的部分使用props进行配置.
React 批量更新的时机. React 的批量更新是将多次的 setState 进行一次操作, re-render. 另外,useEffect , FlushSync 会退出批量更新.
什么时候退出批量更新呢

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

React 18 描述UI & 增加 Reaction