react知识点总结分享
2022-10-13 10:17:30 0 举报AI智能生成
react知识点总结分享
作者其他创作
大纲/内容
patterns
Dependency injection
DI
依赖注入
context
redux
每一个组件都能访问到
高阶组件
传递props
避免传一些没用到的数据
分支主题
Component
PropTypes
defaultProps
isRequired<br>
array
bool
func
number
object
string
symbol
any
arrayOf
element
instanceOf
node
objectOf
oneOf
oneOfType
shape
setState
this.updater.enqueueSetState(this, partialState);
this.updater.enqueueCallback(this, callback, 'setState');
forceUpdate
ReactNoopUpdateQueue
<span style="color: rgb(51, 51, 51); font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">Mixin</span>
混入
单继承
组合
多重继承
react 14后 es6 不推荐
有害
子主题
Higher-Order Components（HOCs）
<span class="kr">import</span> <span class="nx">React</span><span class="p">,</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">'React'</span><span class="p">;</span><br><br><span class="kr">const</span> <span class="nx">PopupContainer</span> <span class="o">=</span> <span class="p">(</span><span class="nx">Wrapper</span><span class="p">)</span> <span class="o">=></span><br> <span class="kr"> class</span> <span class="nx">WrapperComponent</span> <span class="kr">extends</span> <span class="nx">Component</span> <span class="p">{</span><br> <span class="nx"> componentDidMount</span><span class="p">()</span> <span class="p">{</span><br> <span class="nx"> console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'HOC did mount'</span><span class="p">)</span><br> <span class="p"> }</span><br><br> <span class="nx"> componentWillUnmount</span><span class="p">()</span> <span class="p">{</span><br> <span class="nx"> console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'HOC will unmount'</span><span class="p">)</span><br> <span class="p"> }</span><br><br> <span class="nx"> render</span><span class="p">()</span> <span class="p">{</span><br> <span class="k"> return</span> <span class="o"><</span><span class="nx">Wrapper</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="o">/></span><span class="p">;</span><br> <span class="p"> }</span><br> <span class="p">}</span><br>
模式
组件复用
输入一个组件，返回一个包裹后的新的组件
子主题
Decorator
es7
Object.defineProperty(obj, prop, descriptor)
语法糖
Immutable
shallowCopy（浅拷贝）
复制引用，和原来指向一个对象
deepCopy（深拷贝）
复制所有属性和方法，生成新对象
Object.create()
for in
递归
hasOwnProperty
var cloneObj = JSON.parse(JSON.stringify(obj))
共享的可变状态容易导致错误
减少重复渲染
不可变数据，对数据的修改会生成新的数据
结构共享，避免所有属性的复制造成性能损耗
节点变化只影响当前节点及其父节点
比较
===
直接比较内存地址
Immutable.is(map1, map2)
直接比较对象的值
比较hashCode值
判断类型
Object.prototype.toString.call([])==="object Array"
docs
jsx
<span>elements</span>
escape编码
阻止xss
编译成React.createElement()
语法糖
Element
immutable
最小单元
删除，重建
Components and Props
Functional Components
Class Components
组件 组合
组件 提取
props只读
独立，代码服用，隔离
State and Lifecycle
state
Asynchronous
class类式组件
State Updates are Merged
this.setState({data})
lifecycle hooks
单向数据流
Handling Events
阻止事件触发
e.preventDefault()
bind
arrow function
= () =>
Conditional Rendering
if
Lists and keys
array内需要key
同一层级key唯一
jsx map
Lifting State Up
不同子组件共享父组件state
Forms
Controlled Components
input value 存在state内
Uncontrolled Components
ref
真实数据保存到DOM中
name属性
组合和继承
react代码复用推荐组合
props 传入组件
props.children
不知子组件children类型
Specialization
归一组件外包装一层成为特殊组件
理念
UI与组件层级一一映射
UI与数据模型一一映射
单一功能原则
静态
自顶向下
数据模型-->UI
单向数据流
ui状态
最小可变状态集
状态位置
反向数据流
PropTypes类型检查
性能原因，只在开发模式下检查
refs
动画
焦点，文本选择，媒体
dom/class 组件
性能
timeline
避免重复渲染
shouldComponentUpdate
PureComponent
shouldComponentUpdate自动浅比较
对象第一层属性
不可突变的数据结构
assign合并之前state
不直接改变对象
Immutable
stack
源码
Haste
所有文件名全局唯一
可以直接通过文件名require('setInnerHTML')
Dynamic Injection
原因：刚开始只有DOM，后来加了native，需要覆盖一些特性
runtime运行时
未来将会取消
angular依赖注入
Dependency injection
Inversion of Control
依赖的定义在构造函数
只消费，不定义
减耦合
core
components
render
Reconcilers
Fiber Reconciler
reconciler重写
更新过程由同步变成异步
加载或更新组件树
调用生命周期函数
匹配v-dom
更新dom
同步，不可中断
无io操作，只cpu运算，但dom太大也会出现性能问题
在更新过程中，ui线程是阻塞的，i例如nput输入会无响应
界面卡顿
任务分片
fiber纤程
进程
操作系统级
独立的内存单元
进程间通信
信号
管道
线程
操作系统级
一个程序至少有一个进程,一个进程至少有一个线程
多个线程共享内存
通信
共享内存
上下文切换容易
协程
编译器级
通过yield插入代码，实现代码分段执行
优先级打断
并行
单核
模拟并行
挂起换一个
多核
真正并行
更新过程
Reconciliation Phase
计算需要更新的dom，可打断
生命周期函数可能调用多次
<span>componentWillMount</span>
小心副作用
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
小心副作用
Commit Phase
更新dom，不可打断
componentDidMount
componentDidUpdate
componentWillUnmount
优先级别<span>PriorityLevel</span>
子主题
Event System
事件委托
document根部监听
组件唯一id，hash map 存储 对应 事件
chrome event listener
Ancestors只有
Event Emitter
redux
三大原则
单一数据源
state只读
只能通过 action 改变state
使用纯函数reducer 修改state
flux模式
flux实现
dispatcher
redux实现
action
type
flux标准
type
payload
meta
err
action创建函数
return action对象
dispatch（action创建函数）
子主题
reducer
(previousState, action) => newState
纯函数
assign
...
default 返回旧 state
store
<span>dispatch</span>
<div><span>currentReducer</span><span>(</span><span>currentState</span><span>,</span><span> action</span><span>)</span></div>
<span>getState</span>
<span>subscribe</span>
监听state变化
<div>replaceReducer</div><div></div>
单向数据流
state
domain data 域数据
服务器返回
app state 应用状态
ui 状态
源码
<div><span>applyMiddleware</span>(<span>...</span><span>middlewares</span>)</div>
middlewares=[]
middleware 函数
next(action)
react-redux
<div><span>Provider</span></div>
<div><span>store</span></div>
<div><span>Component</span></div>
<span>children</span>
<div><span>Router</span></div>
<div><span>connect</span></div>
<span>mapStateToProps</span>
<span>mapDispatchToProps</span><br>
dispatch(action)
shouldComponentUpdate
浅对比props
性能
<div><span>shallowEqual</span></div>
问题
局部数据
范式化和扁平化state
内存
仅维护一颗state树，其它被回收
0 条评论
下一页
