react学习

提升state?what?how?why?
兄弟组件之间怎么共享state?

onClick='fn()'会立即调用，传参使用onClick='() => fn(id)'

提前返回一些东西 ()的意义

state不应在组件中改变
state三部曲：1.定义它 2.使用它 3.更新它
类似vue中的slot=children prop，传递jsx

bill账单例子引发的问题？

多个state状态数据类型
传值状态确定
bill账单例子视频获得：
先静态页面，再state动态
条件渲染互斥 && 写三次
组件命名 FriendsList FormSplitBill FormAddFriend
组件抽取 Button
创建新对象，才会被渲染，数组[...a, b] 对象{...r, b}
aspect-ratio: 1

拆分？
how 怎么将ui拆分成组件？
when 什么时候创建组件？

自己调用自己会产生死循环
movie原始部分组件怎么拆分？

多层组件之间透传children？
component composition：
prop drilling
构建更好的布局
创建可重用的组件
组件的类别:

prop: element children
怎么抽取可重用的组件? usePopCorn 和 chanllenge: TextExpanded
start组件：
传递的prop: 1. size 2. color 3. num 4. classname 5. message 6. 默认值 7. 初始化评分
textExpanded组件：
传递的prop: 1. 默认展开关闭 2. 按钮颜色文本 3. 显示的文本 4. className 6. 折叠显示的字数
概念性：
component: 普通的函数，返回react element,创建多个实例

instance:
有自己的state,props,生命周期，返回react element

element:
reactElement: 调用React.createElement()形成的对象,是一个大对象,转化成domElement绘制到屏幕上

domElement: 渲染在浏览器上的元素
关系：

15 react怎么从reactElement绘制到浏览器上？
概述：
when trigger？
两种情况：
1. 初次渲染
2. 在组件实例中state更新
3. 不是立即触发，定时的
render phase
commit phase
副作用函数和纯函数
副作用函数：更改不在当前作用域中的变量
no timers, no api calls, no object or variable mutations, no state update
只允许在event handlers，useEffect产生副作用
纯函数：same input -> same output

以下规则只在渲染逻辑中被阻止：
state update batch 异步和批量更新
event handler中怎么批量更新：
只更新一次：

最新的值只有re-render之后state才会更新

如果需要立即更新的值：传递个setstate一个函数

自动批处理react18完成度

怎么捕获事件？

component instance的生命周期
mounte render destroy
useEffect:
允许在不同时期运行代码：mount rerender unmounted
effect思考：保持组件与外部系统同步
在useEffect中怎么使用异步？
useEffect怎么处理error?

effect 什么时候执行？browser paint之后

index.html中修改title document.queryseletor.innerHtml=''

什么时候使用清理函数？
再次执行effect函数之前
组件卸载的时候
例子：
useEffect escape react
全局范围内监听事件移除事件
取消请求
hook放在顶层不能放在条件里提前返回可能会导致hook顺序不一致报错
useState里的值只有初始化时执行一次，要想更新随着state的变化，新建派生
？问题？？
为什么传递函数作为useState的初始化值

useRef:

自定义hook?规则

useReducer?
why?

when?

useContext useState 选择

状态管理？