前言
主要讲解React组件的UI和组件的交互基础知识
描述UI
你的第一个组件
组件：每个UI模块是一个组件
创建组件流程：导出组件，定义函数，返回jsx，函数名大写
jsx大括号使用javascript
用双引号传递属性
用大括号传递：变量、函数、对象，=号后面都是属性
将props传递给组件
props 传递属性，也可以用{...props}传递
子组件{}解构传递过来的值
传递html，父组件有个children 参数
条件渲染
- if else
- 三目运算符
- && 运算符
使用跟在js中用法一样
渲染列表
-
map
-
遍历，返回jsx数组，然后用花括号渲染
-
filter
-
先过滤，再用map遍历
-
key
-
用key保存唯一值
返回的时候用{}包裹变量值
保持组件纯粹
纯函数，不修改传递过来的值
UI作为树
添加交互
响应事件
编写事件处理函数不同方法： {函数名} 。{()=>{函数内容}}
事件如何传播及如何停止他们：
函数体加：e.stopPropagaton()阻止传播
捕获加Capture实现：onClickCapture={}
阻止默认行为：e.preventDefault()
State：组件的记忆（记忆组件的state）
useState Hook添加变量
hook使用
渲染和提交
-
react应用一次屏幕更新会发生
-
触发：应用启动，react调用跟根组件
-
渲染：react调用你在组件
-
提交
-
react把更改提交到dom上
-
初次渲染，用appendChild() 将创建dom节点放屏幕上
-
重新渲染，渲染存在差异节点
-
渲染纯函数，没副作用
state 如同一张快照
state只会为下一次渲染变更state值，react使state值固定在一次渲染渲染各事件处理函数内部
当你调用 useState时，react会为你提供该次渲染的一张state快照
把一系列state更新加入队列
state更新， setState传入函数，才会把函数放进队列更新
更新state中的对象
state对象只读不能直接修改。
只能创建新对象修改（浅拷贝）
immer编写更简单
更新state数组
只读：返回一个新数组（都可以更新数组）
- 添加数组：concat，[...arr]
- 删除：filter，slice
- 替换：map
- 排序：复制一份新的
使用
删除数组
插入数组：插入新数组
immer更新：
总结
用{}传递表达式，传递组件处理，列表渲染用{}包裹变量
更改数组state，需要返回新组件api才有效。setState要传递新对象。可以用immer简化新对象更新。
