首页  思维导图  详情

react

2017-09-05 16:12:18   70  举报





AI智能生成

为你推荐

查看更多



react

深入浅出搞定React

React

低代码前端原理图

React

React组件开发

React组件库实战

react项目架构

前端，react，知识点，重点，总结，

前端开发

作者其他创作

大纲/内容

react

patterns

Dependency injection

依赖注入

context

redux

每一个组件都能访问到

高阶组件

传递props

避免传一些没用到的数据

分支主题

Component

PropTypes

defaultProps

isRequired

array

bool

func

number

object

string

symbol

any

arrayOf

element

instanceOf

node

objectOf

oneOf

oneOfType

shape

setState

forceUpdate

ReactNoopUpdateQueue

span style=\

混入

单继承

组合

多重继承

react 14后 es6 不推荐

有害

子主题

Higher-Order Components（HOCs）

import Reactspan class=\"p\

模式

组件复用

输入一个组件，返回一个包裹后的新的组件

Decorator

es7

语法糖

Immutable

shallowCopy（浅拷贝）

复制引用，和原来指向一个对象

deepCopy（深拷贝）

复制所有属性和方法，生成新对象

Object.create()

for in

递归

hasOwnProperty

var cloneObj = JSON.parse(JSON.stringify(obj))

共享的可变状态容易导致错误

减少重复渲染

不可变数据，对数据的修改会生成新的数据

结构共享，避免所有属性的复制造成性能损耗

节点变化只影响当前节点及其父节点

比较

===

直接比较内存地址

直接比较对象的值

比较hashCode值

判断类型

Object.prototype.toString.call([])===\"object Array\"

docs

jsx

elements

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

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

不直接改变对象

stack

源码

Haste

所有文件名全局唯一

可以直接通过文件名require('setInnerHTML')

Dynamic Injection

原因：刚开始只有DOM，后来加了native，需要覆盖一些特性

runtime运行时

未来将会取消

angular依赖注入

Inversion of Control

依赖的定义在构造函数

只消费，不定义

减耦合

core

components

render

Reconcilers

Fiber Reconciler

reconciler重写

更新过程由同步变成异步

加载或更新组件树

调用生命周期函数

匹配v-dom

更新dom

同步，不可中断

无io操作，只cpu运算，但dom太大也会出现性能问题

在更新过程中，ui线程是阻塞的，i例如nput输入会无响应

界面卡顿

任务分片

fiber纤程

进程

操作系统级

独立的内存单元

进程间通信

信号

管道

线程

多个线程共享内存

通信

共享内存

上下文切换容易

协程

编译器级

通过yield插入代码，实现代码分段执行

优先级打断

并行

单核

模拟并行

挂起换一个

多核

真正并行

更新过程

Reconciliation Phase

计算需要更新的dom，可打断

生命周期函数可能调用多次

componentWillMount

小心副作用

componentWillReceiveProps

componentWillUpdate

Commit Phase

更新dom，不可打断

componentDidMount

componentDidUpdate

componentWillUnmount

优先级别PriorityLevel

Event System

事件委托

document根部监听

组件唯一id，hash map 存储对应事件

chrome event listener

Ancestors只有

Event Emitter

三大原则

单一数据源

state只读

只能通过 action 改变state

使用纯函数reducer 修改state

flux模式

flux实现

dispatcher

redux实现

action

type

flux标准

payload