react分享

[hahabazinga]

react

        A JavaScript library for building user interfaces

1. 虚拟DOM层：描述逻辑和结构：

• 组件类型：type为类或者函数，产生组件实例
• 元素类型：type为标签名，生成DOM节点

2. 内部组件层： setState，ReactDom.render,forceUpdate,负责组件的更新
3. 底层渲染层： 不同的显示介质有不同的渲染方法

JSX

class Hello extends React.Component {
 render() {
    return (
       <div>
           Hello {this.props.name}
       </div>
    );
  }
}

const Hello = (props) => <div>Hello{props.name}</div>

return React.createElement('div', {className: 'shopping-list'},
    React.createElement('h1', /* ... h1 children ... */),
    React.createElement('ul', /* ... ul children ... */)
);

组件挂载

事件系统

1. 事件注册

<Component onClick={this.handleClick}/>

target.addEventListener(type, listener[, options]); 
target.attachEvent(eventNameWithOn, callback)

事件系统

2. 事件储存

EventPluginHub    

3. 事件分发
   
4. 事件处理

事务

<pre>
 *                       wrappers (injected at creation time)
 *                                      +        +
 *                                      |        |
 *                    +-----------------|--------|--------------+
 *                    |                 v        |              |
 *                    |      +---------------+   |              |
 *                    |   +--|    wrapper1   |---|----+         |
 *                    |   |  +---------------+   v    |         |
 *                    |   |          +-------------+  |         |
 *                    |   |     +----|   wrapper2  |--------+   |
 *                    |   |     |    +-------------+  |     |   |
 *                    |   |     |                     |     |   |
 *                    |   v     v                     v     v   | wrapper
 *                    | +---+ +---+   +---------+   +---+ +---+ | invariants
 * perform(anyMethod) | |   | |   |   |         |   |   | |   | | maintained
 * +----------------->|-|---|-|---|-->|anyMethod|---|---|-|---|-|-------->
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | |   | |   |   |         |   |   | |   | |
 *                    | +---+ +---+   +---------+   +---+ +---+ |
 *                    |  initialize                    close    |
 *                    +-----------------------------------------+
 * </pre>

####批更新

虚拟dom

html：

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

DOM对象

var element = {
    tagName: 'ul', // 节点标签名
    props: { // DOM的属性，用一个对象存储键值对
        id: 'list'
    },
    children: [ // 该节点的子节点
         { tagName: 'li', props: {class: 'item'}, children: ["Item 1"] },
         { tagName: 'li', props: {class: 'item'}, children: ["Item 2"] },
         { tagName: 'li', props: {class: 'item'}, children: ["Item 3"] },
     ]
}

diff

深度优先，层级对比:

Fiber

// 一个Fiber对象作用于一个组件
export type Fiber = {|  
// 标记fiber类型tag.  
    ag: TypeOfWork,  
// fiber对应的function/class/module类型组件名.  
   type: any,  
// fiber所在组件树的根组件FiberRoot对象  
   stateNode: any,  
// 返回当前fiber所在fiber树的父级fiber实例  
   return: Fiber | null,  
// fiber树结构相关链接  
   child: Fiber | null,  sibling: Fiber | null,  index: number,  
   ...
|};

异步渲染

将虚拟DOM转换为Fiber节点，首先它规定一个时间段内，然后在这个时间段能转换多少个FiberNode，就更新多少个。可以中断DOM的渲染，去渲染优先级更高的DOM树。

1. requestAnimationFrame
2. requestIdleCallback
3. web worker
4. IntersectionObserver

新生命周期