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