logo陈三

从 jQuery 到 React

by 陈三 on 
主题:  jQueryReact.js

一个计数器案例

假设有一个计数器按钮,它显示的初始值是 0,每次点击,显示数值都会加 1:

<button id="counter">0</button>

如果我们用 jQuery,代码大概会是这样:

$('#counter').on('click', function() {
  $(this).html($(this).html() * 1 + 1)
})

上面的代码其实有三个步骤:

  1. 点击发生时,我们从按钮文本中读取当前状态值:

    $(this).html() * 1
    
  2. 计算新状态值

  3. 更新 HTML:

    $(this).html($(this).html() * 1 + 1)
    

我们来改写下 jQuery 代码,以便更清晰地看到整个流程:

// 获取当前状态值
var currentCounter = $(this).html() * 1
// 计算新状态值
var nextCounter = currentCounter + 1
// 更新 HTML
$(this).html(nextCounter)

如果改用 React,我们的代码大致是这样写:

// react hooks 版
function Counter() {
  const [counter, setCounter] = useState(0)
  return <button onClick={() => setCounter(counter + 1)}>{counter}</button>
}

那么,相比之下,React 优于 jQuery 的地方是哪些?为什么当下整个前端的趋势是从 jQuery 迁移到 React 等等框架的?

更新 HTML

对比 jQuery 与 React 的代码,我们可以看到,二者都需要获取当前状态值,也都需要计算新的状态值。但是在 jQuery 下,我们是这样更新 HTML:

$(this).html(nextCounter)

而 React 代码里,我们的 HTML 是个 JSX 模板,

<button>{counter}</button>

我们只要设定新状态值,React 就会帮我们填充数据。

我想,一般人都会偏爱后一种做法吧?因为实在是不怎么费脑,而且更贴近我们日常 HTML 代码。

当然,React 的做法是有代价的,在 React 下,我们所有的 HTML(包括初次渲染)现在都由 JavaScript 生成,也因此为了应付 SEO 等需求,React 等框架常常还要引入服务器端渲染。而在 jQuery 中,初次渲染的 HTML 是静态 HTML 文件,并不需要额外的服务器端渲染。

组件化

组件化的好处,就毋庸赘述了。确切说,组件化才是 React 等框架真正的威力所在,通过组件的组合,我们可以构建出极其复杂的单页面应用,而在 jQuery 下,那恐怕会是一个耗时且费力的工程。