The react-demo from hahabazinga

react分享

react

        A JavaScript library for building user interfaces

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

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

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

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 ... */)
);

组件挂载

事件系统

事件注册

<Component onClick={this.handleClick}/>

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

事件系统

事件储存

EventPluginHub

事件分发
事件处理

事务

<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树。

requestAnimationFrame
requestIdleCallback
web worker
IntersectionObserver

新生命周期

前端分享

不是前端入门，因为可能没用门，但确实有坎
.

HTML

结构层：不是编程语言，只是标记语言

CSS

表现层：样式表，扩展有less、sass、scss

JS

行为层

JS

学习路线

包管理器

npm或者yarn：管理第三方库

构建工具

代码校验工具(linter)： ESLint、JSLint、JSHint和JSCS。目前ESLint是最受欢迎的
任务管理工具(task runner)：npm script、gulp、Grunt等
打包工具(bundlers)：Webpack、Rollup、Browserify

now

create-react-app (typescript)
components:组件
router: 路由
redux (hooks only for react16.7.0-alpha): 状态
axios: 请求
webpack: 构建

es6 + babel => es5
sass + sass-loader => css
optimization.splitChunks + optimization.runtimeChunk + MiniCssExtractPlugin + UglifyJsPlugin => bundle.js

hahabazinga / react-demo Goto Github PK

react-demo's People

Watchers

react-demo's Issues

react

JSX

组件挂载

事件系统

事件系统

事务

虚拟dom

diff

Fiber

异步渲染

新生命周期

前端分享

HTML

CSS

JS

JS

学习路线

包管理器

构建工具

now

Recommend Projects

Recommend Topics

Recommend Org