React

1. React生命周期
  • 单个组件的生命周期

1.componentwillMount(React17废弃)

2.componentDidMount

3.componentWillReceiveProps(React17替换成getDerivedStateFromProps)

4.shouldComponentUpdate

5.componentWillUpdate(React17替换成getSnapshotBeforeUpdate)

6.componentDidUpdate

7.componentWillUnmount

  • 父子组件的生命周期

大致和Vue相同,不同的是,react没有局部更新,更新父组件的同时也会更新子组件。

1.挂载:父componentWillMount -> 子componentWillMount -> 子componentDidMount -> 父componentDidMount

2.销毁:父componentWillUnmount -> 子componentWillUnmount

3.更新

(1)只更新子:子shouldComponentUpdate -> 子componentWillUpdate -> 子componentDidUpdate

(2)更新父或同时更新:父shouldComponentUpdate -> 父componentWillUpdate -> 子componentWillReceiveProps-> 子shouldComponentUpdate -> 子componentWillUpdate -> 子componentDidUpdate -> 父componentDidUpdate

2. React17 生命周期改动

componentWillMount

componentWillRecieveProps

componentWIllUpdate

简单来说就是这三个生命周期函数容易被误解并滥用,可能会对异步渲染造成潜在的问题。可用UNSAFE_xxx 来取消eslint的报错。

  • 新增三个生命周期

1.getDerivedStateFromProps(nextProps, prevState)

静态方法,所以不能使用this.setState。 用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可

2.getSnapshotBeforeUpdate(nextProps, prevState) 。用于替换componentWillUpdate

3.componendDidCatch(error, info)。新增,用于捕捉错误

3. React的通信方式

props

context。可跨级通信,但不知道来源哪里不推荐使用。基于生产者消费者模式

redux和react-redux

用js实现发布订阅模式

React17 会废弃childContext 使用新API - createContext(),并提供Provider和consumer组件,类似Vue

4. setState

setStateReact组件中用于更新数据和触发渲染的函数,他的用法如下


this.setState(newState:object | updater: Function, callback?)

updater = (state, prop) => {}

  • 同步和异步setState,何时同步,何时异步?

1.在react的生命周期勾子或react事件监听回调中使用

2.其他情况,如定时器回调,原生事件监听回调,promise回调

  • 为什么setState是异步的?
  1. setState出发React的更新生命周期函数4个函数:shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate。如果每一次setState 调用都走一圈生命周期,并拿render函数返回的结果会拿去做Virtual DOM比较和更新DOM树,这个就比较费时间。

  2. 目前React会将setState的效果放在队列中,积攒着一次引发更新过程。为的就是把 Virtual DOM 和 DOM 树操作降到最小,用于提高性能。

  • setState如何实现

ReactComponent.prototype.setState = function (partialState, callback) {

  // 更新的操作会放在数组里

  this.updater.enqueueSetState(this, partialState);

  if (callback) {

this.updater.enqueueCallback(this, callback, 'setState');

  }};

  • 总体流程如下:

1.将state放入enqueueSetState队列中,并调用enqueueUpdate处理要更新的Component

2.如果组件当前正处于update中(isBatchingUpdates),则先将Component存入dirtyComponent中。否则调用batchedUpdates处理。

3.batchedUpdates发起一次transaction.perform()事务

4.事务会更新isBatchingUpdatesfalse,循环遍历所有的dirtyComponents,调用updateComponent刷新组件,并执行它的pendingCallbacks, 也就是setState中设置的callback

5. React的事件机制
  • 合成事件

1.在react中使用jsx语法绑定的事件并不是原生事件,而是一种合成事件SyntheticEvent。例如SyntheticEvent, SyntheticKeyboardEvent, SyntheticFocusEvent等。他有以下特点:

2.默认的事件流是冒泡,如果以捕获的方式来触发事件的话,事件类型后面加一个后缀Capture

几乎所有的事件代理(delegate)到document,达到性能优化的目的,例如对于audiovideo标签,存在一些媒体事件(例如onplayonpause),只能在这些标签上进行事件绑定,绑定一个入口分发函数(dispatchEvent)

3.对于每种类型的事件,拥有统一的分发函数dispatchEvent

4.事件对象(event)是合成对象(SyntheticEvent),不是原生的。所以e.stopPropagation()方法阻止的知识合成事件流的传播。

  • 如何实现

React 事件机制分为事件注册,和事件分发,两个部分。

1.组件加载 (mountComponent)、更新 (updateComponent) 的时候,调用 _updateDOMProperties 方法对 props 进行处理,将事件绑定在document上,并存储在EventPluginHub中(订阅发布中心)

2.回调统一是ReactEventListenerdispatch方法。通过_dispatchListeners里得到所有绑定的回调函数,然后循环执行里面的所有的回调函数

6. React16
  • 新的核心算法 Fiber

  • render可以返回数组,字符串

  • 错误处理机制

  • Portals组件 渲染外部的dom节点.createPortal API

  • 更好 更快的服务端渲染 rendertoNodeStream 返回node的流

  • 体积更小 MIT协议

7. Fiber
  • Fiber 可以提升复杂React 应用的可响应性和性能。Fiber 即是React新的调度算法。

  • 每次有 state 的变化 React 重新计算,如果计算量过大,浏览器主线程来不及做其他的事情,比如 rerender 或者 layout,那例如动画就会出现卡顿现象。

  • React 制定了一种名为 Fiber 的数据结构,加上新的算法,使得大量的计算可以被拆解,异步化,浏览器主线程得以释放,保证了渲染的帧率。从而提高响应性。

  • React 将更新分为了两个时期:

1.render/reconciliation: 可打断,ReactworkingProgressTree 上复用 current 上的 Fiber 数据结构来一步地(通过requestIdleCallback)来构建新的 tree,标记处需要更新的节点,放入队列中。

2.commit: 不可打断。在第二阶段,React 将其所有的变更一次性更新到DOM上。

8. 函数式组件,class组件,受控组件,高级组件的概念
  • class组件:类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态

  • 函数式组件:当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 '无状态组件(stateless component)',可以使用一个纯函数来创建这样的组件,即函数式组件

  • 受控组件:在 HTML 中,类似input, textareaselect 这样的表单元素会维护自身的状态,并基于用户的输入来更新。一个输入表单元素,它的值通过 React 的这种方式来控制,这样的元素就被称为"受控元素"。

  • 高级组件HOC:高阶组件是一个以组件为参数并返回一个新组件的函数,例如:redux的connect函数

9. React-router
  • BrowserHistory:h5历史模式

  • HashHistory:h5 hash模式

  • MemoryHistory:和abstract模式类似

  • StaticRouter:一个永远不会改变位置的<Router>。这在服务器端渲染场景中非常有用

  • NativeRouter:RN使用

10. Redux
  • state: 数据,即状态

  • Action: 一个纯对象,携带这个操作的类型和数据信息

  • Action Creater: 一个函数,根据指定参数,来生成一个Action,目的是减少代码量

  • Reducer: 一个纯函数,用来修改应用的状态,接收当前StateAction,返回一个新的State

1.不得改写参数

2.不得调用系统的I/O的API

3.不得调用Date.now()或者Math.random()等不纯的方法,因为每次得到的结果会不一样

4.不能改变State,必须返回一个新的对象,具体可以使用{...obj}运算符或者Object.assign()来操作

  • combineReducers: 一个函数,将多个小的Reducer合并成一个大的Reducer

  • Store: 数据存储中心

1.Store.getState() 获取Store当前的状态

2.Store.dispatch() 分派一个Action,用来修改Store的状态,从View中发出Action的唯一方法

3.Store.subscribe() 订阅一个监听器,当Store的状态发生改变的时候,执行函数

  • Middlewares: 中间件, 中间件实际上就是一个拦截器,本质是一个函数,拦截所有的Action,并执行特定的操作

compose函数,将[f1, f2, f3] => f1(f2(f3(x)))

11. Redux数据流
  • Redux 应用中数据的生命周期遵循下面 4 个步骤:

调用 store.dispatch(action)。

Redux store 调用传入的 reducer 函数。

根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。

Redux store 保存了根 reducer 返回的完整 state 树。

image.png

# Node.js

1. eventloop
  • 基本流程

1.timers:执行满足条件的setTimeout、setInterval回调。[uv__run_timers函数]

2.I/O callbacks:是否有已完成的I/O操作的回调函数,来自上一轮的poll残留。[uv__run_pending函数]

3.idle,prepare:node内部特定的阶段,在I/O轮询开始前做一些特定的回调,可忽略 [uv__run_idle, uv__run_prepare函数]

4.poll:轮询,等待还没完成的I/O事件,会因timers和超时时间等结束等待。[uv__io_poll(loop, timeout)函数]

5.check:执行setImmediate的回调。[uv__run_check函数]

6.close callbacks:关闭所有的closing handles,一些onclose事件,例如7.socket.on("close",func)。[ uv__run_closing_handles(loop)函数]

重复以上步骤。

  • 经典例子

浏览器环境:time1,promise1,time2,promise2

node11以下:time1,time2,promise1,promise2

node11及以上:time1,promise1,time2,promise2

在 node 11 版本中,node 下 Event Loop 已经与浏览器趋于相同。我们可以用浏览器的微任务和宏任务解释,11版本前的timer,由于到期时间相近,会在timer阶段合并执行。所以打出time1后,打印time2。

2. koa 洋葱模型
  • koa洋葱式模型: koa各个中间件合并执行,结合next()形成一种串行机制,并且是支持异步。如请求顺序进入1,2,3,4,响应顺序从4,3,2,1出来

1.compose函数支持中间件和next

2.async/await支持异步

  • 洋葱模式实现了:

1.context的保存和传递

2.中间件的管理和next的实现

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343