Hibop Yuan
Hibop Yuan
react项目实践[https://segmentfault.com/a/1190000005013207](https://segmentfault.com/a/1190000005013207)
## React 是怎样炼成的： > 一篇很好的框架设计过程的总结文章：[https://segmentfault.com/a/1190000013365426?utm_source=tag-newest](https://segmentfault.com/a/1190000013365426?utm_source=tag-newest) - php字符拼接时代 到 标签扩展时代JSX； - DOM重新构建（php灵感）【状态丢失，焦点、滚动等】Diff算法 ====> DOM 复用 ====> Diff（版本控制思想）【树形结构的算法复杂度O(n3)】 ====> 忽略元素的整体移动（只有拖拽很少场景），只有子元素的增删改，所以只对比子元素 ====> 不同的两个元素会产生不同的树， 可以使用key属性来表明不同的渲染中哪些元素是相同的 O(n) - vitual DOM React 其实实现了对 DOM 节点的版本控制。 DOM...
#### Diff算法实现 [https://juejin.im/post/5a9b8417518825558251ce15](https://juejin.im/post/5a9b8417518825558251ce15)
#### 探索Virtual DOM的前世今生 [https://juejin.im/post/5b0638a9f265da0db53bbb6d](https://juejin.im/post/5b0638a9f265da0db53bbb6d)
```js function createStore (reducer) { let state = null const listeners = [] const subscribe = (listener) => listeners.push(listener) const getState = () => state const dispatch = (action) =>...
## js 推荐规范 # Airbnb JavaScript 风格指南() { *JavaScript最合理的方法 A mostly reasonable approach to JavaScript* > **注意**: 这个指南假定你正在使用[Babel](https://babeljs.io)， 并且需要你使用或等效的使用[babel-preset-airbnb](https://npmjs.com/babel-preset-airbnb)。 同时假定你在你的应用里安装了带有或等效的[airbnb-browser-shims](https://npmjs.com/airbnb-browser-shims)的 `shims/polyfills` [](https://www.npmjs.com/package/eslint-config-airbnb) [](https://www.npmjs.com/package/eslint-config-airbnb-base) [](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 这个指南支持的其他语言翻译版请看 [Translation](#translation) Other Style Guides...
# Airbnb CSS / Sass 指南 *用更合理的方式写 CSS 和 Sass* 翻译自 [Airbnb CSS / Sass Styleguide](https://github.com/airbnb/css) ## 目录 1. [术语](#terminology) - [规则声明](#rule-declaration) - [选择器](#selectors) - [属性](#properties) 1. [CSS](#css) - [格式](#formatting)...
```html FRONT VIEW: d^b _,,ddP"""Ybb,,_ d^b d ,dP"' `"Yb, b b,d" "b,d d" ,d""YgP""b, "b d' 8 o g o 8 `b 8 d,gPPPPRg,b 8 8 dP' 'Yb 8 8...
```html . 1 1 1 M M M M \M/ . ' M ` . \##-#####-##/ \# ##### #/ ############### ############### \ ! ! ! ! ! / )! !...
```html 1 1 / \ / \ / \ / \ 1==*1 1===1 .------------------------------. .------------------------------. ' " "!""""^""""""""""""^""""!" ".` '." "!""""^""""""""""""^""""!" " ` `1 .! U U ! 1 1...