前言

如果你是一位前端開發(fā)者，又在某些機(jī)會(huì)下閱讀過一些 Java 代碼，可能會(huì)在后者中看到一種類似 ES6 語法中箭頭函數(shù)的寫法

(String a, String b) -> a.toLowerCase() + b.toLowerCase();

這種從 Java 8 后出現(xiàn)的 lambda 表達(dá)式，在 C++ / Python 中都有出現(xiàn)，它比傳統(tǒng)的 OOP 風(fēng)格代碼更緊湊；雖然 Java 中的這種表達(dá)式本質(zhì)上還是一個(gè)生成類實(shí)例的函數(shù)式接口（functional interface）語法糖，但無論其簡(jiǎn)潔的寫法，還是處理不可變值并映射成另一個(gè)值的行為，都是典型的函數(shù)式編程（FP - functional programming）特征。

1992 年的圖靈獎(jiǎng)得主 Butler Lampson 有一個(gè)著名的論斷：

All problems in computer science can be solved by another level of indirection
計(jì)算機(jī)科學(xué)中的任何問題都可以通過增加一個(gè)間接層次來解決

這句話中的“間接層次”常被翻譯成“抽象層”，盡管有人曾爭(zhēng)論過其嚴(yán)謹(jǐn)性，但不管怎么翻譯都還說得通。無論如何，OOP 語言擁抱 FP，都是編程領(lǐng)域日益融合并重視函數(shù)式編程的直接體現(xiàn)，也印證了通過引入另一個(gè)間接層次來解決實(shí)際問題的這句“軟件工程基本定理”。

還有另一句同樣未必那么嚴(yán)謹(jǐn)?shù)牧餍姓f辭是：

OOP 是對(duì)數(shù)據(jù)的抽象，而 FP 用來抽象行為

不同于面向?qū)ο缶幊讨?，通過抽象出各種對(duì)象并注重其間的解耦問題等；函數(shù)式編程聚焦于最小的單項(xiàng)操作，將復(fù)雜任務(wù)變成一次次 f(x) = y 式的函數(shù)運(yùn)算疊加。函數(shù)是 FP 中的一等公民（First-class object），可以被當(dāng)成函數(shù)參數(shù)或被函數(shù)返回。

同時(shí)在 FP 中，函數(shù)應(yīng)該不依賴或影響外部狀態(tài)，這意味著對(duì)于給定的輸入，將產(chǎn)生相同的輸出 -- 這也就是 FP 中常常使用“不可變(immutable)”、“純函數(shù)(pure)”等詞語的緣由；如果再把前面提過的 “l(fā)ambda 演算”，以及 “curring 柯里化” 等掛在嘴邊，你聽上去就是個(gè) FP 愛好者了。

以上這些概念及其相關(guān)的理論，集中誕生在 20 世紀(jì)前半葉，眾多科學(xué)家對(duì)數(shù)理邏輯的研究收獲了豐碩的成果；甚至現(xiàn)在熱門的 ML、AI 等都受益于這些成果。比如當(dāng)時(shí)大師級(jí)的美國(guó)波蘭裔數(shù)學(xué)家 Haskell Curry，他的名字就毫不浪費(fèi)地留在了 Haskell 語言和柯里化這些典型的函數(shù)式實(shí)踐中。

React 函數(shù)式組件

如果使用過 jQuery / RxJS 時(shí)的“鏈?zhǔn)秸Z法”，其實(shí)就可以算做 FP 中 monad 的實(shí)踐；而近年來大多數(shù)前端開發(fā)者真正接觸到 FP，一是從 ES6 中引入的 map / reduce 等幾個(gè)函數(shù)式風(fēng)格的 Array 實(shí)例方法，另一個(gè)就是從 React 中的函數(shù)式組件（FC - functional component）開始的。

React 中的函數(shù)式組件也常被叫做無狀態(tài)組件（Stateless Component），更直觀的叫法則是渲染函數(shù)（render function），因?yàn)閷懗鰜碚娴木褪莻€(gè)用來渲染的函數(shù)而已：

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}

結(jié)合 TypeScript 的話，還可以使用 type 和 FC<propsType> 來對(duì)這個(gè)返回了 jsx 的函數(shù)約束入?yún)ⅲ?/p>

type GreetingProps = {
 name: string;
}
 
const Greeting:React.FC<GreetingProps> = ({ name }) => {
 return <h1>Hello {name}</h1>
};

也可以用 interface 和范型，更靈活地定義 props 類型：

interface IGreeting<T = 'm' | 'f'> {
 name: string;
 gender: T
}
export const Greeting = ({ name, gender }: IGreeting<0 | 1>): JSX.Element => {
 return <h1>Hello { gender === 0 ? 'Ms.' : 'Mr.' } {name}</h1>
};

Vue（2.x) 中的函數(shù)式組件

在 Vue 官網(wǎng)文檔的【函數(shù)式組件】章節(jié)中，這樣描述到：

...我們可以將組件標(biāo)記為 functional，這意味它無狀態(tài) (沒有響應(yīng)式數(shù)據(jù))，也沒有實(shí)例 (沒有 this 上下文)。一個(gè)函數(shù)式組件就像這樣：
 
Vue.component('my-component', {
  functional: true,
  // Props 是可選的
  props: {
    // ...
  },
  // 為了彌補(bǔ)缺少的實(shí)例
  // 提供第二個(gè)參數(shù)作為上下文
  render: function (createElement, context) {
    // ...
  }
})
 
...
 
在 2.5.0 及以上版本中，如果你使用了[單文件組件]，那么基于模板的函數(shù)式組件可以這樣聲明：
 
<template functional>
</template>

寫過 React 并第一次閱讀到這個(gè)文檔的開發(fā)者，可能會(huì)下意識(shí)地發(fā)出 “啊這...” 的感嘆，寫上個(gè) functional 就叫函數(shù)式了？？？

實(shí)際上在 Vue 3.x 中，你還真的能和 React 一樣寫出那種純渲染函數(shù)的“函數(shù)式組件”，這個(gè)我們后面再說。

在目前更通用的 Vue 2.x 中，正如文檔中所說，一個(gè)函數(shù)式組件（FC - functional component）就意味著一個(gè)沒有實(shí)例（沒有 this 上下文、沒有生命周期方法、不監(jiān)聽任何屬性、不管理任何狀態(tài)）的組件。從外部看，它大抵也是可以被視作一個(gè)只接受一些 prop 并按預(yù)期返回某種渲染結(jié)果的 fc(props) => VNode 函數(shù)的。

并且，真正的 FP 函數(shù)基于不可變狀態(tài)（immutable state），而 Vue 中的“函數(shù)式”組件也沒有這么理想化 -- 后者基于可變數(shù)據(jù)，相比普通組件只是沒有實(shí)例概念而已。但其優(yōu)點(diǎn)仍然很明顯：

因?yàn)楹瘮?shù)式組件忽略了生命周期和監(jiān)聽等實(shí)現(xiàn)邏輯，所以渲染開銷很低、執(zhí)行速度快

相比于普通組件中的 v-if 等指令，使用 h 函數(shù)或結(jié)合 jsx 邏輯更清晰

更容易地實(shí)現(xiàn)高階組件（HOC - higher-order component）模式，即一個(gè)封裝了某些邏輯并條件性地渲染參數(shù)子組件的容器組件

可以通過數(shù)組返回多個(gè)根節(jié)點(diǎn)

🌰 舉個(gè)栗子：優(yōu)化 el-table 中的自定義列

先來直觀感受一個(gè)適用 FC 的典型場(chǎng)景：

這是 ElementUI 官網(wǎng)中對(duì)自定義表格列給出的例子，其對(duì)應(yīng)的 template 部分代碼為：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

在實(shí)際業(yè)務(wù)需求中，像文檔示例中這種小表格當(dāng)然存在，但并不會(huì)成為我們關(guān)注的重點(diǎn)；ElementUI 自定義表格列被廣泛地用于各種字段繁多、交互龐雜的大型報(bào)表的渲染邏輯中，通常是 20 個(gè)以上的列起步，并且每個(gè)列中圖片列表、視頻預(yù)覽彈窗、需要組合和格式化的段落、根據(jù)權(quán)限或狀態(tài)而數(shù)量不定的操作按鈕等等，不一而足；相關(guān)的 template 部分也經(jīng)常是幾百行甚至更多，除了冗長(zhǎng)，不同列直接相似的邏輯難以復(fù)用也是個(gè)問題。

正如電視劇《老友記》中臺(tái)詞所言：

歡迎來到現(xiàn)實(shí)世界！它糟糕得要命～ 但你會(huì)愛上它！

vue 單文件組件中并未提供 include 等拆分 template 的方案 -- 畢竟語法糖可夠多了，沒有最好。

有潔癖的開發(fā)者會(huì)嘗試將復(fù)雜的列模版部分封裝成獨(dú)立的組件，來解決這個(gè)痛點(diǎn)；這樣已經(jīng)很好了，但相比于本來的寫法又產(chǎn)生了性能隱患。

回想起你在面試時(shí)，回答關(guān)于如何優(yōu)化多層節(jié)點(diǎn)渲染問題時(shí)那種氣吞萬里的自信😼，我們顯然在應(yīng)該在這次的實(shí)踐中更進(jìn)一步，既能拆分關(guān)注點(diǎn)，又要避免性能問題，函數(shù)式組件就是一種這個(gè)場(chǎng)景下合適的方案。

首先嘗試的是把原本 template 中日期列的部分“平移”到一個(gè)函數(shù)式組件 DateCol.vue 中：

<template functional>
  <div>
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px; color: blue;">{{ props.row.date }}</span>
  </div>
</template>

在容器頁面中 import 后聲明在 components 中并使用：

基本是原汁原味；唯一的問題是受限于單個(gè)根元素的限制，多套了一層 div，這一點(diǎn)上也可以用 vue-fragment 等加以解決。

接下來我們將姓名列重構(gòu)為 NameCol.js：

export default {
  functional: true,
  render(h, {props}) {
    const {row} = props;
    return h('el-popover', {
        props: {trigger: "hover", placement: "top"},
        scopedSlots: {
          reference: () => h('div', {class: "name-wrapper"}, [
            h('el-tag', {props: {size: 'medium'}}, [row.name + '~'])
          ])
        }
      }, [
          h('p', null, [`姓名: ${ row.name }`]),
          h('p', null, [`住址: ${ row.address }`])
      ])
  }
}

效果沒得說，還用數(shù)組規(guī)避了單個(gè)根元素的限制；更重要的是，抽象出來的這個(gè)小組件是真正的 js 模塊，你可以不用 <script> 包裝它而將其放入一個(gè) .js 文件中，更可以自由地做你想做的一切事情了。

h 函數(shù)可能帶來些額外的心智負(fù)擔(dān)，只要再配置上 jsx 支持，那就和原版幾無二致了。

另外這里涉及到的 scopedSlots 以及第三列里將面臨的事件處理等，我們后面慢慢說。

渲染上下文

回顧上面提到的文檔章節(jié)，render 函數(shù)是這樣的形式：

render: function (createElement, context) {}

實(shí)際編碼中一般習(xí)慣性地將 createElement 寫為 h，并且即便在 jsx 用法中表面上不用調(diào)用 h，還是需要寫上的；在 Vue3 中，則可以用 import { h } from 'vue' 全局引入了。

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language". -- Evan You

官網(wǎng)文檔繼續(xù)寫到：

組件需要的一切都是通過 context 參數(shù)傳遞，它是一個(gè)包括如下字段的對(duì)象：
 
    props：提供所有 prop 的對(duì)象
    children：VNode 子節(jié)點(diǎn)的數(shù)組
    slots：一個(gè)函數(shù)，返回了包含所有插槽的對(duì)象
    scopedSlots：(2.6.0+) 一個(gè)暴露傳入的作用域插槽的對(duì)象。也以函數(shù)形式暴露普通插槽。
    data：傳遞給組件的整個(gè)數(shù)據(jù)對(duì)象，作為 createElement 的第二個(gè)參數(shù)傳入組件
    parent：對(duì)父組件的引用
    listeners：(2.3.0+) 一個(gè)包含了所有父組件為當(dāng)前組件注冊(cè)的事件監(jiān)聽器的對(duì)象。這是 data.on 的一個(gè)別名。
    injections：(2.3.0+) 如果使用了 inject 選項(xiàng)，則該對(duì)象包含了應(yīng)當(dāng)被注入的 property。

這個(gè) context 也就是被定義為 RenderContext 的一個(gè)接口類型，在 vue 內(nèi)部初始化或更新組件時(shí)，是這樣形成的：

熟練掌握 RenderContext 接口定義的各種屬性，是我們玩轉(zhuǎn)函數(shù)式組件的基礎(chǔ)。

template

在前面的例子中，我們使用一個(gè)帶 functional 屬性的 template 模版，將表格中日期列部分的邏輯抽象為一個(gè)獨(dú)立模塊。

上面的原理圖中也部分解釋了這一點(diǎn)，Vue 的模板實(shí)際上被編譯成了渲染函數(shù)，或者說 template 模版和顯式的 render 函數(shù)遵循同樣的內(nèi)部處理邏輯，并且被附加了 $options 等屬性。

也就是說，處理一些復(fù)雜的邏輯時(shí)，我們依然可以借助 js 的力量，比如在 template 中習(xí)慣地調(diào)用 methods 等 -- 當(dāng)然這并非真正的 Vue 組件方法了：

emit

函數(shù)式組件中并沒有 this.$emit() 這樣的方法。

但事件回調(diào)還是可以正常處理的，需要用到的就是 context.listeners 屬性 -- 正如文檔中提到的，這是 data.on 的一個(gè)別名。比如之前的例子中，我們想在容器頁面中監(jiān)聽日期列的圖標(biāo)被點(diǎn)擊：

<date-col v-bind="scope" @icon-click="onDateClick" />

在 DateCol.vue 中，這樣觸發(fā)事件就可以了：

<i class="el-icon-time" 
      @click="() => listeners['icon-click'](props.row.date)">
    </i>

唯一需要留意的是，雖然以上寫法足以應(yīng)付大部分情況，但如果外部監(jiān)聽了多個(gè)同名事件，listeners 就會(huì)變?yōu)橐粋€(gè)數(shù)組；所以相對(duì)完備的一種封裝方法是：

/**
 * 用于函數(shù)式組件的事件觸發(fā)方法
 * @param {object} listeners - context 中的 listeners 對(duì)象
 * @param {string} eventName - 事件名
 * @param {...any} args - 若干參數(shù)
 * @returns {void} - 無
 */
export const fEmit = (listeners, eventName, ...args) => {
    const cbk = listeners[eventName]
    if (_.isFunction(cbk)) cbk.apply(null, args)
    else if (_.isArray(cbk)) cbk.forEach(f => f.apply(null, args))
}

filter

在 h 函數(shù)或 jsx 的返回結(jié)構(gòu)中，傳統(tǒng) Vue 模板中的 <label>{ title | withColon }</label> 過濾器語法不再奏效。

好在原本定義的過濾函數(shù)也是普通的函數(shù)，所以等效的寫法可以是：

import filters from '@/filters';
 
const { withColon } = filters;
 
//...
 
// render 返回的 jsx 中
<label>{ withColon(title) }</label>

插槽

普通組件 template 部分中使用使用插槽的方法，在函數(shù)式組件 render 函數(shù)中，包括 jsx 模式下，都無法使用了。

在前面例子中將姓名列重構(gòu)為 NameCol.js 的時(shí)候，已經(jīng)演示過了相對(duì)應(yīng)的寫法；再看一個(gè) ElementUI 中骨架屏組件的例子，比如普通的 template 用法是這樣的：

<el-skeleton :loading="skeLoading">
    real text
    <template slot="template">
      <p>loading content</p>
    </template>
</el-skeleton>

這里面實(shí)際就涉及了 default 和 template 兩個(gè)插槽，換到函數(shù)式組件 render 函數(shù)中，對(duì)應(yīng)的寫法為：

export default {
  functional: true,
  props: ['ok'],
  render(h, {props}) {
    return h('el-skeleton' ,{
      props: {loading: props.ok},
      scopedSlots: {
        default: () => 'real text',
        template: () => h('p', null, ['loading context'])
      }
    }, null)
  }
}

如果遇到 v-bind:user="user" 這樣傳遞了屬性的作用域插槽，那么將 user 作為插槽函數(shù)的入?yún)?/strong>就可以了。

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>
 
對(duì)于這個(gè)組件，children 會(huì)給你兩個(gè)段落標(biāo)簽，而 slots().default 只會(huì)傳遞第二個(gè)匿名段落標(biāo)簽，slots().foo 會(huì)傳遞第一個(gè)具名段落標(biāo)簽。同時(shí)擁有 children 和 slots()，因此你可以選擇讓組件感知某個(gè)插槽機(jī)制，還是簡(jiǎn)單地通過傳遞 children，移交給其它組件去處理。

<strong class={type} domPropsInnerHTML={formatValue(item, type)} />

h('p', {
      domProps: {
            innerHTML: '<h1>hello</h1>'
      }
})

const _insertCSS = css => {
    let $head = document.head || document.getElementsByTagName('head')[0];
    const style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    if (style.styleSheet) {
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }
    $head.appendChild(style);
    $head = null;
};

interface IProps {
 year: string;
 quarters: Array<'Q1' | 'Q2' | 'Q3' | 'Q4'>;
 note: {
  content: string;
  auther: stiring;
 }
}

import Vue, { CreateElement, RenderContext } from 'vue';
 
...
 
export default Vue.extend({
  functional: true,
  render: (h: CreateElement, context: RenderContext<IProps>) => {
     console.log(context.props.year);
   //...
  }
});

import { h, ref } from "@vue/composition-api";
 
export default {
  model: {
    prop: "value",
    event: "zouni"
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const counter = ref(props.value);
    const increment = () => {
      emit("zouni", ++counter.value);
    };
 
    return () =>
      h("div", null, [h("button", { on: { click: increment } }, ["plus"])]);
  }
};

<el-input v-model="cValue" />
<counter v-model="cValue" />

it("批量全選", async () => {
    let result = mockData;
    // 此處實(shí)際上模擬了每次靠外部傳入的 props 更新組件的過程
    // wrapper.setProps() cannot be called on a functional component
    const update = async () => {
      makeWrapper(
        {
          value: result
        },
        {
          listeners: {
            change: m => (result = m)
          }
        }
      );
      await localVue.nextTick();
    };
    await update();
    expect(wrapper.findAll("input")).toHaveLength(6);
 
    wrapper.find("tr.whole label").trigger("click");
    await update();
    expect(wrapper.findAll("input:checked")).toHaveLength(6);
 
    wrapper.find("tr.whole label").trigger("click");
    await update();
    expect(wrapper.findAll("input:checked")).toHaveLength(0);
 
    wrapper.find("tr.whole label").trigger("click");
    await update();
    wrapper.find("tbody>tr:nth-child(3)>td:nth-child(2)>ul>li:nth-child(4)>label").trigger("click");
    await update();
    expect(wrapper.find("tr.whole label input:checked").exists()).toBeFalsy();
  });

import { mount } from '@vue/test-utils'
import Cell from '@/components/Cell'
 
const WrappedCell = {
  components: { Cell },
  template: `
    <div>
      <Cell v-bind="$attrs" v-on="$listeners" />
    </div>
  `
}
 
const wrapper = mount(WrappedCell, {
  propsData: {
    cellData: {
      category: 'foo',
      description: 'bar'
    }
  }
});
 
describe('Cell.vue', () => {
  it('should output two tds with category and description', () => {
    expect(wrapper.findAll('td')).toHaveLength(2);
    expect(wrapper.findAll('td').at(0).text()).toBe('foo');
    expect(wrapper.findAll('td').at(1).text()).toBe('bar');
  });
});

let wrapper = null;
const makeWrapper = (props = null, opts = null) => {
  wrapper = mount(Comp, {
    localVue,
    propsData: {
      ...props
    },
    stubs: {
      Fragment: {
        functional: true,
        render(h, { slots }) {
          return h("div", slots().default);
        }
      }
    },
    attachedToDocument: true,
    sync: false,
    ...opts
  });
};

import { h } from 'vue'
 
const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}
 
DynamicHeading.props = ['level']
 
export default DynamicHeading

<template>
  <component
    v-bind:is="`h${$props.level}`"
    v-bind="$attrs"
  />
</template>
 
<script>
export default {
  props: ['level']
}
</script>