细说react源码中的合成事件

温馨提示: 下边是对React合成事件的源码阅读，全文有点长，但是！如果你真的想知道这不为人知的背后内幕，那一定要耐心看下去！

最近在做一个功能，然后不小心踩到了 React 合成事件 的坑，好奇心的驱使，去看了 React 官网合成事件 的解释，这不看不知道，一看吓一跳...

SyntheticEvent是个什么鬼？咋冒出来了个事件池？

我就一个简单的需求功能，为什么能扯出这些鬼玩意？？

我们先简单的来看一看我的需求功能是个啥???

导火线

需要做一个弹窗打开/关闭 的功能，当点击 button 的时候打开，此时打开的情况下，点击弹窗 区域 外，就需要关闭。

这简单嘛，直接在 button 上注册一个点击事件，同时在 document.body 注册一个点击事件，然后在 弹窗container 里阻止冒泡，很难嘛?

class FuckEvent extends React.PureComponent {
  state = {
    showBox: false
  }
  componentDidMount() {
    document.body.addEventListener('click', this.handleClickBody, false)
  }
  componentWillUnmount() {
    document.body.removeEventListener('click', this.handleClickBody, false)
  }
  handleClickBody = () => {
    this.setState({
      showBox: false
    })
  }
  handleClickButton = () => {
    this.setState({
      showBox: true
    })
  }

  render() {
    return (
      

        

        {this.state.showBox && (          
 e.stopPropagation()}>我是弹窗

        )}      

    )
  }
}

很简单嘛，很开心的点击了弹窗区域....

于是...我没了...点击弹窗区域，弹窗也被关闭了。。。what the f**k ?????? 难道冒泡没有用 ?

带着这个问题，我走上了不归之路...

事件委托

我们都知道，什么是事件委托，(不知道的出门左拐 ) 在前端刀耕火种时期，事件委托可是爸爸

事件委托解决了庞大的数据列表时，无需为每个列表项绑定事件监听。同时可以动态挂载元素无需作额外的事件监听处理。

你看，事件委托那么牛 13，你觉得 React 会不用？呵，React 不仅用了，还用的非常溜 ~

怎么说呢，react 它接管了浏览器事件的优化策略，然后自身实现了一套自己的事件机制，而且特别贴心，就跟你男朋友一样，它把浏览器的不同差异，都帮你消除了 ~

React 实现了一个合成事件层，就是这个事件层，把 IE 和 W3C 标准之间的兼容问题给消除了。

那么问题来了，什么是合成事件与原生事件????

  • 原生事件: 在 componentDidMount生命周期里边进行addEventListener绑定的事件
  • 合成事件: 通过 JSX 方式绑定的事件，比如 onClick={() => this.handle()}

还记得上边的那个例子吗？我们在弹窗的 DOM 元素上绑定了一个事件，进行阻止冒泡

{
  this.state.showBox && 
 e.stopPropagation()}>我是弹窗

}

然后在componentDidMount生命周期里边对 body 进行了 click 的绑定

componentDidMount() {
  document.body.addEventListener('click', this.handleClickBody, false)
}

componentWillUnmount() {
  document.body.removeEventListener('click', this.handleClickBody, false)
}

我们去分析一下，因为合成事件的触发是基于浏览器的事件机制来实现的，通过冒泡机制冒泡到最顶层元素，然后再由 dispatchEvent 统一去处理

回顾一下浏览器事件机制

细说react源码中的合成事件_第1张图片

Document 上边是 Window，这里截的是《JavaScript 高级程序设计》书籍里的图片

浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。

Question: 此时对于合成事件进行阻止，原生事件会执行吗？答案是: 会！

Answer: 因为原生事件先于合成事件执行 (个人理解: 注册的原生事件已经执行，而合成事件处于目标阶段，它阻止的冒泡只是阻止合成的事件冒泡，但是原生事件在捕获阶段就已经执行了)

合成事件特点

React 自己实现了这么一套事件机制，它在 DOM 事件体系基础上做了改进，减少了内存的消耗，并且最大程度上解决了 IE 等浏览器的不兼容问题

那它有什么特点？

  • React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
  • React 自身实现了一套事件冒泡机制，所以这也就是为什么我们 event.stopPropagation() 无效的原因。
  • React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
  • React 有一套自己的合成事件 SyntheticEvent，不是原生的，这个可以自己去看官网
  • React 通过对象池的形式管理合成事件对象的创建和销毁，减少了垃圾的生成和新对象内存的分配，提高了性能

React 事件系统

看到这里，应该对 React 合成事件有一个简单的了解了吧，我们接着去看一看源码 ~

源码 ReactBrowserEventEmitter

我们在 ReactBrowserEventEmitter.js 文件中可以看到，React 合成系统框架图

/**
 * React和事件系统概述:
 *
 * +------------+    .
 * |    DOM     |    .
 * +------------+    .
 *       |           .
 *       v           .
 * +------------+    .
 * | ReactEvent |    .
 * |  Listener  |    .
 * +------------+    .                         +-----------+
 *       |           .               +--------+|SimpleEvent|
 *       |           .               |         |Plugin     |
 * +-----|------+    .               v         +-----------+
 * |     |      |    .    +--------------+                    +------------+
 * |     +-----------.--->|EventPluginHub|                    |    Event   |
 * |            |    .    |              |     +-----------+  | Propagators|
 * | ReactEvent |    .    |              |     |TapEvent   |  |------------|
 * |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
 * |            |    .    |              |     +-----------+  |  utilities |
 * |     +-----------.--->|              |                    +------------+
 * |     |      |    .    +--------------+
 * +-----|------+    .                ^        +-----------+
 *       |           .                |        |Enter/Leave|
 *       +           .                +-------+|Plugin     |
 * +-------------+   .                         +-----------+
 * | application |   .
 * |-------------|   .
 * |             |   .
 * |             |   .
 * +-------------+   .
 *                   .
 */

源码里边的一大串英文解释，我帮你们 google 翻译了，简单来讲就是:

  • Top-level delegation 用于捕获最原始的浏览器事件，它主要由 ReactEventListener 负责，ReactEventListener 被注入后可以支持插件化的事件源，这一过程发生在主线程。
  • React 对事件进行规范化和重复数据删除，以解决浏览器的怪癖。这可以在工作线程中完成。
  • 将这些本地事件（具有关联的顶级类型用来捕获它）转发到EventPluginHub，后者将询问插件是否要提取任何合成事件。
  • 然后，EventPluginHub 将通过为每个事件添加“dispatches”（关心该事件的侦听器和 ID 的序列）来对其进行注释来进行处理。
  • 再接着，EventPluginHub 会调度分派事件.
❗ 建议直接去看英文注释，翻译可能不是很标准。

看会上边的框架图，我们得先知道一下这些都是个啥玩意，直接看名称，也能够知道 :

  • [ ] ReactEventListener：负责事件的注册。
  • [ ] ReactEventEmitter：负责事件的分发。
  • [ ] EventPluginHub：负责事件的存储及分发。
  • [ ] Plugin：根据不同的事件类型构造不同的合成事件。

下面我们来一步一步的看它是怎么工作的

相关参考视频讲解：进入学习

事件注册

React 中注册一个事件贼简单，就比如这样:

class TaskEvent extends Reac.PureComponent {
  render() {
    return (
      
 {
          console.log('我是注册事件')
        }}
      >
        呵呵呵
      

    )
  }
}

ok，洋洋洒洒的写下这段代码，它是如何被注册到 React 事件系统中的？

enqueuePutListener()

组件在创建 mountComponent 和更新 updateComponent 的时候，都会调用 _updateDOMProperties() 方法

温馨提示，这快的源码是 react 15.6.1 的源码，但是我在 github 上找对应的版本进去，居然是 Pages Not Found ... 这里就用我翻阅资料的文章中对这个注册事件的源码解释了 
mountComponent: function(transaction, hostParent, hostContainerInfo, context) {
  // ...
  var props = this._currentElement.props;
  // ...
  this._updateDOMProperties(null, props, transaction);
  // ...
}
_updateDOMProperties: function (lastProps, nextProps, transaction) {
    // ...
    for (propKey in nextProps) {
      var nextProp = nextProps[propKey];
      var lastProp = propKey === STYLE ? this._previousStyleCopy : lastProps != null ? lastProps[propKey] : undefined;
      if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
        continue;
      }
      if (propKey === STYLE) {
        // ...
      } else if (registrationNameModules.hasOwnProperty(propKey)) {
        // 如果是props这个对象直接声明的属性，而不是从原型链中继承而来的，则处理它
        // 对于mountComponent，lastProp为null。updateComponent二者都不为null。unmountComponent则nextProp为null
        if (nextProp) {
          // mountComponent和updateComponent中，enqueuePutListener注册事件
          enqueuePutListener(this, propKey, nextProp, transaction);
        } else if (lastProp) {
          // unmountComponent中，删除注册的listener，防止内存泄漏
          deleteListener(this, propKey);
        }
      }
    }
}

上边的代码很清楚告诉你，通过 enqueuePutListener() 方法进行注册事件，我们接着去看看这是个啥玩意

function enqueuePutListener(inst, registrationName, listener, transaction) {
  if (transaction instanceof ReactServerRenderingTransaction) {
    return
  }
  var containerInfo = inst._hostContainerInfo
  var isDocumentFragment =
    containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE
  // 找到document
  var doc = isDocumentFragment
    ? containerInfo._node
    : containerInfo._ownerDocument
  // 注册事件，将事件注册到document上
  listenTo(registrationName, doc)
  // 存储事件,放入事务队列中
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener
  })
}

看到没，这个 enqueuePutListener() 就只干了两个事情 :

  • 通过调用 listenTo 把事件注册到 document 上 (这就是前边说的 React 上注册的事件最终会绑定在document这个 DOM 上)
  • 事务方式调用 putListener 存储事件 (就是把 React 组件内的所有事件统一的存放到一个对象里，缓存起来，为了在触发事件的时候可以查找到对应的方法去执行)

listenTo()

虽然说不要贴代码，但是！直接看源码真的是简单明了啊， listenTo 源码

注意，react 版本是目前 github master 分支代码

我们来看一下代码

export function listenTo(
  registrationName: string,
  mountAt: Document | Element | Node
): void {
  const listeningSet = getListeningSetForElement(mountAt)
  const dependencies = registrationNameDependencies[registrationName]

  for (let i = 0; i < dependencies.length; i++) {
    const dependency = dependencies[i]
    // 调用该方法进行注册
    listenToTopLevel(dependency, mountAt, listeningSet)
  }
}

registrationName 就是传过来的 onClick，而变量 registrationNameDependencies 是一个存储了 React 事件名与浏览器原生事件名对应的一个 Map，可以通过这个 map 拿到相应的浏览器原生事件名

export function listenToTopLevel(
  topLevelType: DOMTopLevelEventType,
  mountAt: Document | Element | Node,
  listeningSet: Set
): void {
  if (!listeningSet.has(topLevelType)) {
    switch (topLevelType) {
      //...
      case TOP_CANCEL:
      case TOP_CLOSE:
        if (isEventSupported(getRawEventName(topLevelType))) {
          trapCapturedEvent(topLevelType, mountAt) // 捕获阶段
        }
        break
      default:
        const isMediaEvent = mediaEventTypes.indexOf(topLevelType) !== -1
        if (!isMediaEvent) {
          trapBubbledEvent(topLevelType, mountAt) // 冒泡阶段
        }
        break
    }
    listeningSet.add(topLevelType)
  }
}

上边忽略部分源码，我们看到，注册事件的入口是 listenTo 方法, 通过对dependencies循环调用listenToTopLevel()方法，在该方法中调用 trapCapturedEvent 和 trapBubbledEvent 来注册捕获和冒泡事件。

trapCapturedEvent 与 trapBubbledEvent

下边仅对 trapCapturedEvent 进行分析， trapCapturedEvent 源码地址，trapBubbledEvent 源码地址

// 捕获阶段
export function trapCapturedEvent(
  topLevelType: DOMTopLevelEventType,  element: Document | Element | Node
): void {
  trapEventForPluginEventSystem(element, topLevelType, true)
}

// 冒泡阶段
export function trapBubbledEvent(
  topLevelType: DOMTopLevelEventType,  element: Document | Element | Node
): void {
  trapEventForPluginEventSystem(element, topLevelType, false)
}
function trapEventForPluginEventSystem(
  element: Document | Element | Node,
  topLevelType: DOMTopLevelEventType,
  capture: boolean // 决定捕获还是冒泡阶段
): void {
  let listener
  switch (getEventPriority(topLevelType)) {
  }
  const rawEventName = getRawEventName(topLevelType)
  if (capture) {
    addEventCaptureListener(element, rawEventName, listener)
  } else {
    addEventBubbleListener(element, rawEventName, listener)
  }
}

这里我们就能知道，捕获事件通过addEventCaptureListener()，而冒泡事件通过addEventBubbleListener()

// 捕获
export function addEventCaptureListener(
  element: Document | Element | Node,  eventType: string,  listener: Function
): void {
  element.addEventListener(eventType, listener, true)
}

// 冒泡
export function addEventBubbleListener(
  element: Document | Element | Node,  eventType: string,  listener: Function
): void {
  element.addEventListener(eventType, listener, false)
}

事件存储

还记得上边的 enqueuePutListener() 中，我们将事件放入到事务队列嘛？

function enqueuePutListener(inst, registrationName, listener, transaction) {
  //...
  // 注册事件，将事件注册到document上
  listenTo(registrationName, doc)
  // 存储事件,放入事务队列中
  transaction.getReactMountReady().enqueue(putListener, {
    inst: inst,
    registrationName: registrationName,
    listener: listener
  })
}

没错，就是 putListener 这个玩意，我们可以看一下代码

putListener: function (inst, registrationName, listener) {
  // 用来标识注册了事件,比如onClick的React对象。key的格式为'.nodeId', 只用知道它可以标示哪个React对象就可以了
  // step1: 得到组件唯一标识
  var key = getDictionaryKey(inst);

  // step2: 得到listenerBank对象中指定事件类型的对象
  var bankForRegistrationName = listenerBank[registrationName] || (listenerBank[registrationName] = {});

  // step3: 将listener事件回调方法存入listenerBank[registrationName][key]中,比如listenerBank['onclick'][nodeId]
  // 所有React组件对象定义的所有React事件都会存储在listenerBank中
  bankForRegistrationName[key] = listener;

  // ...
}

// 拿到组件唯一标识
var getDictionaryKey = function (inst) {
  return '.' + inst._rootNodeID;
};

事件分发

既然事件已经委托注册到 document 上了，那么事件触发的时候，肯定需要一个事件分发的过程，流程也很简单，既然事件存储在 listenrBank 中，那么我只需要找到对应的事件类型，然后执行事件回调就 ok 了

注意: 由于元素本身并没有注册任何事件，而是委托到了 document 上，所以这个将被触发的事件是 React 自带的合成事件，而非浏览器原生事件

首先找到事件触发的DOM和React Component，找真实的 DOM 还是很好找的，在getEventTarget 源码中可以看到:

// 源码看这里: https://github.com/facebook/react/blob/master/packages/react-dom/src/events/ReactDOMEventListener.js#L419
const nativeEventTarget = getEventTarget(nativeEvent)
let targetInst = getClosestInstanceFromNode(nativeEventTarget)
function getEventTarget(nativeEvent) {
  let target = nativeEvent.target || nativeEvent.srcElement || window

  if (target.correspondingUseElement) {
    target = target.correspondingUseElement
  }

  return target.nodeType === TEXT_NODE ? target.parentNode : target
}

这个 nativeEventTarget 对象上挂在了一个以 __reactInternalInstance 开头的属性，这个属性就是 internalInstanceKey ，其值就是当前 React 实例对应的 React Component

继续看源码: dispatchEventForPluginEventSystem()

function dispatchEventForPluginEventSystem(
  topLevelType: DOMTopLevelEventType,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber
): void {
  const bookKeeping = getTopLevelCallbackBookKeeping(
    topLevelType,
    nativeEvent,
    targetInst,
    eventSystemFlags
  )

  try {
    // Event queue being processed in the same cycle allows
    // `preventDefault`.
    batchedEventUpdates(handleTopLevel, bookKeeping)
  } finally {
    releaseTopLevelCallbackBookKeeping(bookKeeping)
  }
}

看到了嘛，batchedEventUpdates()批量更新，它的工作是把当前触发的事件放到了批处理队列中。handleTopLevel 是事件分发的核心所在

源码在这里: handleTopLevel

function handleTopLevel(bookKeeping: BookKeepingInstance) {
  let targetInst = bookKeeping.targetInst

  // Loop through the hierarchy, in case there's any nested components.
  // It's important that we build the array of ancestors before calling any
  // event handlers, because event handlers can modify the DOM, leading to
  // inconsistencies with ReactMount's node cache. See #1105.
  let ancestor = targetInst
  do {
    if (!ancestor) {
      const ancestors = bookKeeping.ancestors
      ;((ancestors: any): Array).push(ancestor)
      break
    }
    const root = findRootContainerNode(ancestor)
    if (!root) {
      break
    }
    const tag = ancestor.tag
    if (tag === HostComponent || tag === HostText) {
      bookKeeping.ancestors.push(ancestor)
    }
    ancestor = getClosestInstanceFromNode(root)
  } while (ancestor)
}

这里直接看上边的英文注释，讲的很清楚，主要就是事件回调可能会改变 DOM 结构，所以要先遍历层次结构，以防存在任何嵌套的组件，然后缓存起来。

然后继续这个方法

for (let i = 0; i < bookKeeping.ancestors.length; i++) {
  targetInst = bookKeeping.ancestors[i]
  // getEventTarget上边有讲到
  const eventTarget = getEventTarget(bookKeeping.nativeEvent)
  const topLevelType = ((bookKeeping.topLevelType: any): DOMTopLevelEventType)
  const nativeEvent = ((bookKeeping.nativeEvent: any): AnyNativeEvent)

  runExtractedPluginEventsInBatch(
    topLevelType,
    targetInst,
    nativeEvent,
    eventTarget,
    bookKeeping.eventSystemFlags
  )
}

这里就是一个 for 循环来遍历这个 React Component 及其所有的父组件，然后执行runExtractedPluginEventsInBatch()方法

从上面的事件分发中可见，React 自身实现了一套冒泡机制。从触发事件的对象开始，向父元素回溯，依次调用它们注册的事件 callback。

事件执行

上边讲到的 runExtractedPluginEventsInBatch()方法就是事件执行的入口了，通过源码，我们可以知道，它干了两件事

runExtractedPluginEventsInBatch 源码

  • 构造合成事件
  • 批处理构造出的合成事件
export function runExtractedPluginEventsInBatch(
  topLevelType: TopLevelType,
  targetInst: null | Fiber,
  nativeEvent: AnyNativeEvent,
  nativeEventTarget: EventTarget,
  eventSystemFlags: EventSystemFlags
) {
  // step1 : 构造合成事件
  const events = extractPluginEvents(
    topLevelType,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags
  )

  // step2 : 批处理
  runEventsInBatch(events)
}

构造合成事件

我们来看看相关的代码 extractPluginEvents() 和 runEventsInBatch()

function extractPluginEvents(
  topLevelType: TopLevelType,  targetInst: null | Fiber,  nativeEvent: AnyNativeEvent,  nativeEventTarget: EventTarget,  eventSystemFlags: EventSystemFlags
): Array | ReactSyntheticEvent | null {
  let events = null
  for (let i = 0; i < plugins.length; i++) {
    // Not every plugin in the ordering may be loaded at runtime.
    const possiblePlugin: PluginModule = plugins[i]
    if (possiblePlugin) {
      const extractedEvents = possiblePlugin.extractEvents(
        topLevelType,
        targetInst,
        nativeEvent,
        nativeEventTarget,
        eventSystemFlags
      )
      if (extractedEvents) {
        events = accumulateInto(events, extractedEvents)
      }
    }
  }
  return events
}

首先会去遍历 plugins，相关代码在: plugins 源码，这个 plugins 就是所有事件合成 plugins 的集合数组，这些 plugins 是在 EventPluginHub 初始化时候注入的

//  源码地址 : https://github.com/facebook/react/blob/master/packages/legacy-events/EventPluginHub.js#L80

export const injection = {
  injectEventPluginOrder,
  injectEventPluginsByName
}
//  源码地址 : https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMClientInjection.js#L26
EventPluginHubInjection.injectEventPluginOrder(DOMEventPluginOrder)

EventPluginHubInjection.injectEventPluginsByName({
  SimpleEventPlugin: SimpleEventPlugin,
  EnterLeaveEventPlugin: EnterLeaveEventPlugin,
  ChangeEventPlugin: ChangeEventPlugin,
  SelectEventPlugin: SelectEventPlugin,
  BeforeInputEventPlugin: BeforeInputEventPlugin
})

打住，这里不展开分析，我们继续看extractEvents的逻辑代码

const extractedEvents = possiblePlugin.extractEvents(
  topLevelType,
  targetInst,
  nativeEvent,
  nativeEventTarget,
  eventSystemFlags
)
if (extractedEvents) {
  events = accumulateInto(events, extractedEvents)
}

因为 const possiblePlugin: PluginModule = pluginsi], 类型是 PluginModule，我们可以去 [SimpleEventPlugin 源码去看一下 extractEvents 到底干了啥

extractEvents: function() {
  const dispatchConfig = topLevelEventsToDispatchConfig[topLevelType]
  if (!dispatchConfig) {
    return null
  }
  //...
}

首先，看下 topLevelEventsToDispatchConfig 这个对象中有没有 topLevelType 这个属性，只要有，那么说明当前事件可以使用 SimpleEventPlugin 构造合成事件

函数里边定义了 EventConstructor，然后通过 switch...case 语句进行赋值

extractEvents: function() {
  //...
  let EventConstructor
  switch (topLevelType) {
    // ...
    case DOMTopLevelEventTypes.TOP_POINTER_UP:
      EventConstructor = SyntheticPointerEvent
      break
    default:
      EventConstructor = SyntheticEvent
      break
  }
}

总之就是赋值给 EventConstructor，如果你想更加了解SyntheticEvent，请点击这里

设置好了EventConstructor之后，这个方法继续执行

extractEvents: function() {
  //...
  const event = EventConstructor.getPooled(
    dispatchConfig,
    targetInst,
    nativeEvent,
    nativeEventTarget
  )
  accumulateTwoPhaseDispatches(event)
  return event
}

这一段代码的意思就是，从 event 对象池中取出合成事件，这里的 getPooled() 方法其实在在 SyntheticEvent 初始化的时候就被设置好了，我们来看一下代码

function addEventPoolingTo(EventConstructor) {
  EventConstructor.eventPool = []
  // 就是这里设置了getPooled
  EventConstructor.getPooled = getPooledEvent
  EventConstructor.release = releasePooledEvent
}

SyntheticEvent.extend = function(Interface) {
  //...
  addEventPoolingTo(Class)

  return Class
}

addEventPoolingTo(SyntheticEvent)

看到这里，我们知道，getPooled 就是 getPooledEvent，那我们去看看getPooledEvent做了啥玩意

function getPooledEvent(dispatchConfig, targetInst, nativeEvent, nativeInst) {
  const EventConstructor = this
  if (EventConstructor.eventPool.length) {
    const instance = EventConstructor.eventPool.pop()
    EventConstructor.call(
      instance,
      dispatchConfig,
      targetInst,
      nativeEvent,
      nativeInst
    )
    return instance
  }
  return new EventConstructor(
    dispatchConfig,
    targetInst,
    nativeEvent,
    nativeInst
  )
}

首先呢，会先去对象池中，看一下 length 是否为 0，如果是第一次事件触发，那不好意思，你需要 new EventConstructor 了，如果后续再次触发事件的时候，直接从对象池中取，也就是直接 instance = EventConstructor.eventPool.pop() 出来的完事了

ok，我们暂时就讲到这，我们继续说一说事件执行的另一个重要操作: 批处理 runEventsInBatch(events)

批处理

批处理主要是通过 runEventQueueInBatch(events) 进行操作，我们来看看源码: runEventQueueInBatch 源码

export function runEventsInBatch(
  events: Array | ReactSyntheticEvent | null
) {
  if (events !== null) {
    eventQueue = accumulateInto(eventQueue, events)
  }

  // Set `eventQueue` to null before processing it so that we can tell if more
  // events get enqueued while processing.
  const processingEventQueue = eventQueue
  eventQueue = null

  if (!processingEventQueue) {
    return
  }

  forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel)
  invariant(
    !eventQueue,
    'processEventQueue(): Additional events were enqueued while processing ' +
      'an event queue. Support for this has not yet been implemented.'
  )
  // This would be a good time to rethrow if any of the event handlers threw.
  rethrowCaughtError()
}

这个方法首先会将当前需要处理的 events 事件，与之前没有处理完毕的队列调用 accumulateInto 方法按照顺序进行合并，组合成一个新的队列

如果processingEventQueue这个为空，gg，没有处理的事件，退出，否则调用 forEachAccumulated()，源码看这里: forEachAccumulated 源码

function forEachAccumulated(
  arr: ?(Array | T),
  cb: (elem: T) => void,
  scope: ?any
) {
  if (Array.isArray(arr)) {
    arr.forEach(cb, scope)
  } else if (arr) {
    cb.call(scope, arr)
  }
}

这个方法就是先看下事件队列 processingEventQueue 是不是个数组，如果是数组，说明队列中不止一个事件，则遍历队列，调用 executeDispatchesAndReleaseTopLevel，否则说明队列中只有一个事件，则无需遍历直接调用即可

executeDispatchesAndReleaseTopLevel 源码

const executeDispatchesAndRelease = function(event: ReactSyntheticEvent) {
  if (event) {
    executeDispatchesInOrder(event)

    if (!event.isPersistent()) {
      event.constructor.release(event)
    }
  }
}
const executeDispatchesAndReleaseTopLevel = function(e) {
  return executeDispatchesAndRelease(e)
}
export function executeDispatchesInOrder(event) {
  const dispatchListeners = event._dispatchListeners
  const dispatchInstances = event._dispatchInstances  if (__DEV__) {
    validateEventDispatches(event)
  }
  if (Array.isArray(dispatchListeners)) {
    for (let i = 0; i < dispatchListeners.length; i++) {
      if (event.isPropagationStopped()) {
        break
      }
      // Listeners and Instances are two parallel arrays that are always in sync.
      executeDispatch(event, dispatchListeners[i], dispatchInstances[i])
    }
  } else if (dispatchListeners) {
    executeDispatch(event, dispatchListeners, dispatchInstances)
  }
  event._dispatchListeners = null
  event._dispatchInstances = null
}

首先对拿到的事件上挂载的 dispatchListeners，就是所有注册事件回调函数的集合，遍历这个集合，如果event.isPropagationStopped() = ture，ok，break 就好了，因为说明在此之前触发的事件已经调用 event.stopPropagation()，isPropagationStopped 的值被置为 true，当前事件以及后面的事件作为父级事件就不应该再被执行了

这里当 event.isPropagationStopped()为 true 时，中断合成事件的向上遍历执行，也就起到了和原生事件调用 stopPropagation 相同的效果
如果循环没有被中断，则继续执行 executeDispatch 方法

你可能感兴趣的:(react.js)

  • react.js 涔溪 react.js前端前端框架
    一、create-react-app全局安装create-react-app$npminstall-gcreate-react-app创建一个项目$create-react-appyour-app注意命名方式CreatinganewReactappin/dir/your-app.Installingpackages.Thismighttakeacoupleofminutes.安装过程较慢，Inst
  • React.js如何使用Bootstrap Vesper63 前端react.jsbootstrap前端
    在React.js项目中使用Bootstrap有多种方法，主要包括直接引入BootstrapCSS文件和使用ReactBootstrap库。下面将详细介绍这两种方法。方法一：直接引入BootstrapCSS文件这是最简单的方式，只需在项目中引入Bootstrap的CSS文件即可。安装Bootstrap：你可以通过npm或yarn安装Bootstrap：npminstallbootstrap或者：y
  • react起源 lemmo
    简介React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"dataflowsdown"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。它由Facebook、Instagra
  • 2024前端面试准备之uniapp篇 前端fighter 前端面试uni-app
    全文链接！！！！！！！1.UniApp和其他跨平台框架（如ReactNative、Flutter）有什么区别？语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而ReactNative使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的
  • 快速创建react项目. River_tong
    react简介说起react，我相信大家都对它有一定的了解，react目前是前端界非常流行的一个框架了，react它产生了很多相关的技术，比如：我们常说的react.js，我们可以用react语法来编写一些网页版应用，reactnative这门技术使得我们可以用react语法来编写原生应用，reactVR可以借助react的语法来编写一些VR相关的应用或者说全景视图这样的应用。react开发环境搭
  • Vue前端】vue使用笔记0基础到高手第2篇：Vue进阶知识点介绍（附代码，已分享） vim前端
    本系列文章md笔记（已分享）主要讨论vue相关知识。Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。Vue.js是一个构建数据驱动的web界面的渐进式框架，Vue.js的目标是通过尽可能简单的API实
  • Vue 与 React 比较，十年恩怨情仇整理
    过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V
  • 什么是VUE？ 最爱喝龙井
    什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整
  • 常见的web前端开发框架：Bootstrap 钟念 前端开发前端开发框架前端bootstrapvue.jshtmljavascript前端框架css
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Bootstrap框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Bootstrap基本概念：Bo
  • 常见的web前端开发框架：Vue.js 钟念 前端开发前端开发框架前端vue.jsjavascriptvue前端框架html
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Vue.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Vue.js基本概念：Vue.js是一
  • 常见的web前端开发框架：React.js 钟念 前端开发前端开发框架前端react.js前端框架javascript
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对React.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。React.jsReact.js是
  • 常见的web前端开发框架：Angular.js 钟念 前端开发前端开发框架前端前端框架angular.jsjavascripttypescriptnpmhtml5
    常见的Web前端开发框架包括Bootstrap、Vue.js、React.js、Angular.js等。每个框架都有其独特的特点和优势，开发者可以根据项目的需求和个人的喜好来选择合适的框架。同时，随着技术的不断发展，新的框架和工具也会不断涌现，为Web前端开发带来更多的选择和可能性。下面将对Angular.js框架进行简要介绍，包括它们的特点、使用方法和一些示例代码。Angular.js基本概念：
  • Vue 与 React 比较，十年恩怨情仇整理
    过去的十年里，出现了许多令人兴奋的前端技术。其中，最为亮眼的当属Vue.js和React.js，他们一经出世就备受前端开发者的欢迎，当然，流行框架之间的比较也从未停止。本文将从思否社区中出现的第一篇Vue.jsvs.React.js技术比较文章开始，回顾这两位在开发者们眼中的明星框架，十年间都发生了哪些变化。本文不只是技术的对比分析，更是对那些年我们一起追过的框架的致敬。让我们从头再来一次，感受V
  • 新书速览 | React.js+Node.js+MongoDB企业级全栈开发实践 全栈开发圈 react.jsnode.jsmongodb
    详解React.js全家桶及其结合Node.js、MongoDB进行全栈开发的方法实战企业级应用系统项目开发本书内容本书系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。本书共分27章，内容包括开发环
  • React 与 Angular：项目的最佳框架 千源万码 react.jsangular.js前端
    什么是React？React或React.js是一个基于JavaScript的前端库，可帮助创建用户界面(UI)。它以声明式编程风格描绘UI状态。通过React，程序员可以掌握应用程序在开发后将如何呈现给用户以及他们将如何与用户交互。尽管React以开发Web应用程序而闻名，但它也有助于构建移动应用程序和本机呈现的应用程序。Facebook、Instagram、Netflix和纽约时报等全球公司在
  • web 技术栈有哪些？ 老马啸西风 web前端
    前端技术栈：HTML（超文本标记语言）：用于创建网页结构的标记语言，定义页面的内容和结构。CSS（层叠样式表）：用于设计和排版网页的样式表语言，负责页面的外观和样式。JavaScript：一种脚本语言，用于在浏览器中实现动态交互和客户端逻辑。常用的前端框架和库如React、Vue、Angular等，可以加速开发。前端框架和库：React.js、Vue.js、Angular等，用于简化和加速前端开发
  • DataBinding使用详解-Google官方的视图绑定 ZhangQiang- [Android进阶]
    几年前，数据绑定在便已在前端界风生水起，Angular.js、React.js、vue.js等热门前端框架都具备这种能力。Android端的开源库butterknife/Anotation/dragger2等等也非常好用且广受支持;数据绑定简单来说，就是通过某种机制，把代码中的数据和xml(UI)绑定起来，双方都能对数据进行操作，并且在数据发生变化的时候，自动刷新数据。在2015年的谷歌IO大会上
  • LLM应用开发与落地：使用gradio十分钟搭建聊天UI 前行的七哥 ui人工智能
    一、背景如果你是做LLM应用开发的，特别是做后端开发，你一定会遇到怎么快速写一个聊天UI界面来调试prompt或agent的问题。这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？即使你是做前端开发的，你也可以尝试一下Gradio，哪天有人给你提了一个调试界面的需求，原本要半天的工作现在只需要十分钟了，多余的时机用来学习或享受生活，多美（或
  • 通过 React 来构建界面 张培跃吧 Reactreact.jsjavascriptecmascript
    1-通过React来构建界面第1步：下载所需要的二个库文件至本地，如果需要加载指定版本的react和react-dom，可以把18替换成所需加载的版本号。react.js：React中的核心库文件。//开发版https://unpkg.com/react@18/umd/react.development.js//生产版https://unpkg.com/react@18/umd/react.pro
  • 如何在 React 中使用 Sass 网络研究院 网络研究院react.jssass前端编程项目
    Sass（语法很棒的样式表）是CSS的扩展，具有使其更强大的附加功能。Sass最好的一点是它与CSS的兼容性，这意味着您可以在Web开发项目中使用React等JavaScript框架。然而，与普通CSS不同，您需要进行一些设置才能使用Sass。通过设置一个简单的React.js项目并将Sass与其集成来了解其工作原理。如何在React.js项目中使用Sass与其他CSS处理器一样，React本身并
  • js获取今天剩余时间_前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡 weixin_39610774 js获取今天剩余时间用js判断一个数是否是素数(质数)
    React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
  • 前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡 蓝桥云课 webreactjs
    React.js是现今前端最火的应用框架之一，而**Next.js正是React.js领域最优秀的服务端渲染框架之一。**基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI
  • 【前端教程】手把手教你用 Next.js 搭建个人博客，从入门到吃鸡！ 实验楼v
    React.js是现今前端最火的应用框架之一，而Next.js正是React.js领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染APP，静态站到桌面应用等，Next.js都能胜任。不论是国内还是国外，都有不少开发者和企业在使用Next.js开发网站，比如：腾讯新闻移动端门口站腾讯网大名顶顶的Hulu视频站世界最受欢迎的ReactUI组件库Material-UI魅族官网
  • React-9：通过路由实现排序切换 kino2046
    queryString（查询字符串）通常我们把URL`?`后面的内容称为queryString，在React.js中，我们可以通过`this.props.location.search`来获取，它的值是字符串，格式为：?k1=v1&k2=v2，为了方便操作，我们把它转成对象形式URLSearchParams在原生JJavaScript中内置了一个URLSearchParams的类，我们通过它可以很
  • 构建高效外卖系统：技术实践与代码示例 万岳科技系统开发 数据库小程序
    外卖系统在现代社会中扮演着重要的角色，为用户提供了便捷的用餐解决方案。在这篇文章中，我们将探讨构建高效外卖系统的技术实践，同时提供一些基础的代码示例，帮助开发者更好地理解和应用这些技术。1.技术栈选择构建外卖系统首先需要选择合适的技术栈。以下是一个简单的技术栈示例：前端：React.js后端：Node.js数据库：MongoDB实时通信：WebSocket云服务：AWS或Azure2.用户认证与授
  • React.js快速入门教程 heiyay react.js前端前端框架
    介绍React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计−React采用声明范式，可以轻松描述应用。2.高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活−React可以与已知的库或框架很好地配合。4.JSX−JSX是J
  • useRef钩子大法好！ 今天也想MK代码 javascriptreact.js前端
    在React.js中，useRef是一个钩子，允许你创建一个对元素或值的可变引用。与useState钩子不同，更新useRef不会触发组件的重新渲染。它通常用于直接访问和管理DOM元素，存储持久值，或处理不应触发重新渲染的值。useRef的基本语法如下：constrefContainer=useRef(initialValue);useRef的主要用途1.访问DOM元素useRef的一个最常见的用
  • Vue.js 学习Day1 cf6d95617c55
    Vue.js-Day1课程介绍前5天：都在学习Vue基本的语法和概念；打包工具Webpack,Gulp后5天：以项目驱动教学；什么是Vue.jsVue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js
  • 【React.js 06】Redux基础知识 IUVO
    Redux是一个专注于状态管理的库，和React是解耦的，用Angular和Vue都可以使用Redux。其具有一个单一状态，单向数据流的特性。Redux概念redux有一个store，记录所有的state，state要改变的时候，就通知dispatch去执行action，reducer拿到state和action去生成新的state，store.subscribe根据新的state重新渲染出改变后
  • 前端八股文系列（七） React 面试专题 微莱羽墨 前端前端react.js面试
    文章目录React面试专题React.js是MVVM框架吗?hooks用过吗？聊聊react中class组件和函数组件的区别React组件通信方式1）父组件向子组件通信2）子组件向父组件通信3）跨级组件通信4）非嵌套关系的组件通信setState既存在异步情况也存在同步情况生命周期说一下react-fiber1）背景2）实现原理Portals何时要使用异步组件？如和使用异步组件React事件绑定原
  • log4j对象改变日志级别 3213213333332132 javalog4jlevellog4j对象名称日志级别
    log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 log4j配置文件： log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION #log4j.appender.FILE=org.apache.log4j.RollingFileAppender log4j.appender.FILE=org.apache.l
  • elk+redis 搭建nginx日志分析平台 ronin47 elasticsearchkibanalogstash
                 elk+redis 搭建nginx日志分析平台 logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l
  • Yii2设置时区 dcj3sjt126com PHPtimezoneyii2
    时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较
  • js实现前台动态添加文本框，后台获取文本框内容 171815164 文本框
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
  • 持续集成工具 g21121 持续集成
            持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行
  • 数据结构哈希表(hash)总结 永夜-极光 数据结构
    1.什么是hash 来源于百度百科: Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。  
  • 乱七八糟 程序员是怎么炼成的
    eclipse中的jvm字节码查看插件地址： http://andrei.gmxhome.de/eclipse/ 安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 http://andrei.gmxhome.de/eclipse/   jvm博客： http://yunshen0909.iteye.com/blog/2
  • 职场人伤害了“上司” 怎样弥补 aijuans 职场
    由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 　　一、利用一些轻松的场合表示对他的尊重 　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，
  • 深入浅出url编码 antonyup_2006 应用服务器浏览器servletweblogicIE
    出处：http://blog.csdn.net/yzhz  杨争   http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 一、问题：         编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的
  • 建表后创建表的约束关系和增加表的字段 百合不是茶 标的约束关系增加表的字段
      下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式   1,增加字段(student表中增加 姓名字段)   alter table 增加字段的表名 add 增加的字段名 增加字段的数据类型 alter table student add name varchar2(10);   &nb
  • Uploadify 3.2 参数属性、事件、方法函数详解 bijian1013 JavaScriptuploadify
    一.属性 属性名称 默认值 说明 auto true 设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。 buttonClass ” 按钮样式 buttonCursor ‘hand’ 鼠标指针悬停在按钮上的样子 buttonImage null 浏览按钮的图片的路
  • 精通Oracle10编程SQL(16)使用LOB对象 bijian1013 oracle数据库plsql
    /* *使用LOB对象 */ --LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节 --CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针 /* *综合实例 */ --建立表空间 --#指定区尺寸为128k,如不指定，区尺寸默认为64k CR
  • 【Resin一】Resin服务器部署web应用 bit1129 resin
    工作中，在Resin服务器上部署web应用，通常有如下三种方式：   配置多个web-app 配置多个http id 为每个应用配置一个propeties、xml以及sh脚本文件 配置多个web-app   在resin.xml中,可以为一个host配置多个web-app   <cluster id="app&q
  • red5简介及基础知识 白糖_ 基础
      简介   Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正
  • angular.fromJson boyitech AngularJSAngularJS 官方APIAngularJS API
    angular.fromJson 描述: 把Json字符串转为对象 使用方法: angular.fromJson(json); 参数详解: Param Type Details json string JSON 字符串 返回值: 对象, 数组, 字符串 或者是一个数字 示例: <!DOCTYPE HTML> <h
  • java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I bylijinnan java
    public class ReverseWords { /** * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。 * 要求： * 1.实现速度最快,移动最少 * 2.不能使用String的方法如split,indexOf等等。 * 解答：两次翻转。 */ publ
  • web实时通讯 Chen.H Web浏览器socket脚本
    关于web实时通讯，做一些监控软件。 由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路
  • [基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗? comsci 生物
          大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思     如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢?   
  • oracle 外部表 daizj oracle外部表external tables
        oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho
  • aop相关的概念及配置 daysinsun AOP
    切面(Aspect): 通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 连接点（joinpoint） spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 通知（Advice） 通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环
  • 初一上学期难记忆单词背诵第二课 dcj3sjt126com englishword
    middle 中间的，中级的 well 喔，那么；好吧 phone 电话，电话机 policeman 警察 ask 问 take 拿到；带到 address 地址 glad 高兴的，乐意的 why 为什么  China 中国 family 家庭 grandmother (外)祖母 grandfather (外)祖父 wife 妻子 husband 丈夫 da
  • Linux日志分析常用命令 dcj3sjt126com linuxlog
    1.查看文件内容 cat -n 显示行号 2.分页显示 more Enter 显示下一行 空格 显示下一页 F 显示下一屏 B 显示上一屏 less /get 查询"get"字符串并高亮显示 3.显示文件尾 tail -f 不退出持续显示 -n 显示文件最后n行 4.显示头文件 head -n 显示文件开始n行 5.内容排序 sort -n 按照
  • JSONP 原理分析 fantasy2005 JavaScriptjsonpjsonp 跨域
    转自 http://www.nowamagic.net/librarys/veda/detail/224 JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的
  • 使用connect by进行级联查询 234390216 oracle查询父子Connect by级联
    使用connect by进行级联查询          connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。          来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：
  • 一个不错的能将HTML表格导出为excel,pdf等的jquery插件 jackyrong jquery插件
    发现一个老外写的不错的jquery插件，可以实现将HTML 表格导出为excel,pdf等格式， 地址在： https://github.com/kayalshri/ 下面看个例子，实现导出表格到excel,pdf <html> <head> <title>Export html table to excel an
  • UI设计中我们为什么需要设计动效 lampcy UIUI设计
    关于Unity3D中的Shader的知识 首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，
  • 如何禁止页面缓存 nannan408 htmljspcache
    禁止页面使用缓存~ ------------------------------------------------ jsp:页面no cache： response.setHeader("Pragma","No-cache"); response.setHeader("Cache-Control","no-cach
  • 以代码的方式管理quartz定时任务的暂停、重启、删除、添加等 Everyday都不同 定时任务管理spring-quartz
          【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不
  • EXT实例 tntxia ext
      （1） 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri
  • 数学学习在计算机研究领域的作用和重要性 xjnine Math
    最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他