react

关于react的思维导图，如shallowCopy（浅拷贝），复制引用，和原来指向一个对象。

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, &apos;setState&apos;);

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([])===&quot;object Array&quot;

docs

jsx

<span>elements</span>

escape编码

阻止xss

编译成React.createElement()

语法糖

Element

immutable

最小单元

删除，重建

Components and Props

Functional&nbsp;Components

Class&nbsp;Components

组件 组合

组件 提取

props只读

独立，代码服用，隔离

State and Lifecycle

state

this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));

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(&apos;setInnerHTML&apos;)

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>

function shallowEqual(objA, objB) { if (objA === objB) { return true; } var keysA = Object.keys(objA); var keysB = Object.keys(objB); if (keysA.length !== keysB.length) { return false; } // Test for A's keys different from B. var hasOwn = Object.prototype.hasOwnProperty; for (var i = 0; i < keysA.length; i++) { if (!hasOwn.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) { return false; } } return true; }

问题

局部数据

范式化和扁平化state

内存

仅维护一颗state树，其它被回收