Nerv 是一款由京東凹凸實(shí)驗(yàn)室打造的類 React 前端框架。目前已廣泛運(yùn)用在 京東商城 （JD.COM）核心業(yè)務(wù)及 TOPLIFE 全站。Nerv 基于React標(biāo)準(zhǔn)，使用 Virtual Dom 技術(shù)，擁有和 React 一致的 API 與生命周期，如果你已經(jīng)對(duì) React 使用非常熟悉，那么使用 Nerv 開(kāi)發(fā)對(duì)你來(lái)說(shuō)絕對(duì)是零學(xué)習(xí)成本。

與此同時(shí)，相比于 React 以及市面其他同類型框架，Nerv 更具體積輕量，性能高效的特點(diǎn)。并且，它符合當(dāng)下國(guó)情，可以完美兼容 IE8 及以上瀏覽器。

• 官網(wǎng)： https://nerv.aotu.io/
• 文檔： https://nervjs.github.io/docs/
• GitHub： https://github.com/NervJS/nerv

特性

• 更小的體積：

  Gzip 后僅有9k，不到 React 三分之一的體積，低性能設(shè)備也能高速地加載并解析執(zhí)行。

• 更高的性能：

  高效、同步的 diff 算法和諸多優(yōu)化策略使得 Nerv 成為性能最高的前端框架之一。

• 完備的生態(tài)：

  無(wú)需 nerv-compat，只需要在稍稍設(shè)置就能享受整個(gè) React 生態(tài)的共同成果。

• 更一致的渲染：

  不僅在瀏覽器上能高效地渲染，在服務(wù)器上 Nerv 同樣能高效地運(yùn)行。

• 更優(yōu)的兼容：

  和大多數(shù)現(xiàn)代框架不同，Nerv 將繼續(xù)保持對(duì) IE8 的兼容。

• 更具說(shuō)服力的案例：

  不管是京東首頁(yè)的高流量，還是 Toplife 的復(fù)雜業(yè)務(wù)，Nerv 都經(jīng)受住了來(lái)自于真實(shí)業(yè)務(wù)的考驗(yàn)。

性能

在 Nerv 開(kāi)發(fā)過(guò)程中，我們針對(duì)虛擬 Dom 算法做了一次升級(jí)，將并行的虛擬 Dom diff 過(guò)程替換成同步的，邊 diff 邊 patch ，這樣大幅度提升了虛擬 Dom 更新的速度。同時(shí)我們還對(duì)diff算法進(jìn)行了探索升級(jí)，參照目前市面上最快的虛擬 Dom 算法對(duì)我們的代碼進(jìn)行了改造。

經(jīng)過(guò)重構(gòu)升級(jí)后，我們的框架性能大幅提升，如下可見(jiàn)。

更多性能數(shù)據(jù)詳見(jiàn)官網(wǎng)。

項(xiàng)目背景

是的，我們又造了一個(gè)輪子，也是一次拋離傳統(tǒng)開(kāi)發(fā)模式的技術(shù)革新。同行們或許有疑問(wèn)，目前市面上已經(jīng)有非常多的同類型技術(shù)框架，為什么我們還要不厭其煩地打造一個(gè)呢？這當(dāng)然不是在做無(wú)用功。

日常開(kāi)發(fā)中，相對(duì)于 Vue ，我們更傾向于選擇 React 模式作為我們的開(kāi)發(fā)標(biāo)準(zhǔn)，因?yàn)?React 天生組件化且函數(shù)式編程的方式，更加靈活且便于維護(hù)。

然而，React 仍然有一些不能滿足我們需求的地方：

• IE8 瀏覽器兼容性：當(dāng)前環(huán)境所限，即便很不情愿，我們?nèi)匀灰С?IE8。
• 體積：React 大概 130kb 的體積。在低網(wǎng)速 / 低版本瀏覽器 / 低配置設(shè)備的加載速度和解析速度都不能讓我們滿意。
• 性能：React 的 Virtual Dom 算法（React 自己叫 Reconciler）并沒(méi)有做太多的優(yōu)化。

而我們的新輪子 —— Nerv，它完全能提供上述 React 的所有優(yōu)點(diǎn)，并且它也能完全滿足我們自己的需求：更好的兼容性、更小的體積、更高的性能。

安裝

推薦使用 npm 的方式進(jìn)行開(kāi)發(fā)，享受 Node 生態(tài)圈和 Webpack 工具鏈帶來(lái)的便利。

npm install nervjs --save

簡(jiǎn)單示例

下面是一個(gè)計(jì)時(shí)器的例子。

import Nerv from 'nervjs'

class Counter extends Nerv.Component {
  setTime = () => {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDay()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const sec = date.getSeconds()
    this.setState({
      year,
      month,
      day,
      hour,
      minute,
      sec
    })
  }

  componentWillMount () {
    this.setTime()
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  componentDidMount () {
    this.interval = setInterval(this.setTime, 1000)
  }

  componentWillReceiveProps () {
    this.setTime()
  }

  render () {
    const { year, month, day, hour, minute, sec } = this.state
    return (
      <div className='counter'>
        <span>The time is</span>{year}-{month}-{day} {hour}:{minute}:{sec}
      </div>
    )
  }
}

export default Counter

更多詳細(xì)例子可閱讀文檔 NervJs 了解。

 

來(lái)自：https://aotu.io/notes/2018/03/22/nerv/