&emsp;&emsp;函數式編程是React的精髓，在正式講解React之前，有必要先了解一下函數式編程，有助于更好的理解React的特點。函數式編程（Functional Programming）不是一種新的框架或工具，而是一種以函數為主的編程范式。編程范式也叫編程范型，是一類編程風格，除了函數式編程，常用的還有面向對象編程、命令式編程等。 ## 一、聲明式編程 &emsp;&emsp;聲明式編程也是一種范式，但它是一個比較大的概念，函數式編程是它的一個子集。聲明式編程能指定每一步操作，而不用向計算機描述具體的實現細節。與之相對立的是命令式編程，它會命令計算機每一步該怎么做。以數組的元素翻倍為例，先用命令式編程實現，如下所示。 ~~~js var arr = [1, 2, 3], length = arr.length, doubles = []; for (let i = 0; i < length; i++) { doubles.push(arr[i] * 2); } ~~~ &emsp;&emsp;在命令式的代碼中，先用for循環遍歷整個數組，然后讓每個元素乘以二，再將計算結果插入到doubles數組中，直至將所有的元素計算完才終止整套操作。改用聲明式編程可以像下面這樣實現相同的功能。 ~~~js var doubles = [1, 2, 3].map(value => value * 2); ~~~ &emsp;&emsp;在聲明式的代碼中，用map()方法替代了循環語句（即不指明流程的控制方式），既不用再維護計數器，也不用再通過索引訪問數組的元素，配合ES6的箭頭函數讓整套操作變得非常簡潔。 &emsp;&emsp;除了這些表面區別之外，還有個最本質的區別，那就是聲明式編程會避免用變量保存程序的狀態，從而能提高代碼的無狀態性。在命令式的代碼中，每次迭代都會修改doubles變量，這是個狀態變量，而在聲明式的代碼中，改用返回值保存程序的狀態。 ## 二、函數優先 &emsp;&emsp;函數式編程強調在程序中使用函數。由于JavaScript中的函數是一等公民，它既可以是變量的值，也可以作為另一函數的參數或返回值，因此通過函數可構建一層抽象以替代流程控制或解決復雜的邏輯操作。例如對數組中的數字進行排序和過濾，可以像下面這樣運用函數式編程的思想實現。 ~~~js [4, 1, 5, 2, 3].sort((a, b) => a > b).filter(value => value > 2); //[3, 4, 5] ~~~ &emsp;&emsp;函數式編程旨在將復雜的運算分解成一系列嵌套的函數，逐層推導，不斷漸進，直至完成運算。 ## 三、純函數 &emsp;&emsp;純函數（Pure Function）是一種沒有副作用、引用透明的函數，它是函數式編程的基本概念，接下來會重點講解它的三個特征。 **1）函數的副作用** &emsp;&emsp;函數在讀寫外部資源或執行不確定的操作時就會產生副作用，例如修改函數外的變量、調用Date.now()或Math.random()、更新cookie信息等。副作用不僅會降低程序整體的可讀性，有時候還會帶來意料之外、難以排查的錯誤，下面是一個副作用的例子。 ~~~js var digit = 1; function increment() { digit += Math.random(); return digit; } ~~~ &emsp;&emsp;在上面的代碼中，increment()函數產生了副作用，因為每次調用它都會更新外部的digit變量，并且每次得到的計算結果也無法預知。 **2）引用透明** &emsp;&emsp;如果傳遞給函數相同的參數，始終能得到相同的結果，那么就能說這個函數是引用透明（Referential Transparent）的。簡單的說就是，函數的運行只受其輸入值的影響，如下代碼所示，傳遞給add()函數固定的參數會返回固定的值。 ~~~js function add(a, b) { return a + b; } ~~~ **3）參數值不可變** &emsp;&emsp;傳遞給純函數的參數值是不允許在內部將其改變的，換句話說，在函數內部使用的是參數值的副本。如果參數值是基本類型的，那么傳遞給函數的就是其副本；但如果參數值是對象類型的，那么需要注意，傳遞給函數的是引用對象的指針。 &emsp;&emsp;下面用一個示例說明，addDigit()函數的參數是一個數組，它的功能是為數組的每個元素加一，在執行addDigit(digits)之后，由于digits變量是一個數組，因此它的元素會隨著函數的調用而被改變。 ~~~js var digits = [1, 2, 3]; function addDigit(arr) { for (let i = 0, len = arr.length; i < len; i++) { arr[i] += 1; } return arr; } addDigit(digits); console.log(digits); //[2, 3, 4] ~~~ &emsp;&emsp;接下來修改addDigit()函數，使之能滿足純函數的要求，如下所示。 ~~~js var digits = [1, 2, 3]; function addDigit(arr) { return arr.map(value => value + 1); } addDigit(digits); console.log(digits); //[1, 2, 3] ~~~ &emsp;&emsp;在addDigit()函數內部，用map()方法替代for循環，使得在不改變參數的前提下，完成元素加一的功能。 ## 四、優點 &emsp;&emsp;函數式編程有許多優點，本節只列出了其中的兩點。 &emsp;&emsp;（1）函數式編程可將復雜的任務分解成一個個既簡單又獨立的純函數，有利于提高代碼的模塊化、復用性、預測性以及可測試性。 &emsp;&emsp;（2）函數式編程有很高的自由度，可以采用更符合人類思維習慣的鏈式寫法，以此提高代碼的可讀性。 &emsp;&emsp;接下來會用兩種函數式的寫法操作一個數組，為了便于演示省略了函數的具體實現，首先是普通的函數式寫法，如下所示。 ~~~js elementDouble(filterEven(arr, filterFn), doubleFn); ~~~ &emsp;&emsp;兩個函數都有兩個參數，第一個是數組，第二個是相應的回調函數。具體的執行過程是先通過filterEven()函數過濾掉數組中偶數位置的元素，再用elementDouble()函數把每個元素翻倍，下面改成鏈式的寫法。 ~~~js filerEven(arr, filterFn).elementDouble(arr, doubleFn); ~~~ &emsp;&emsp;通過兩段代碼的對比可以看出，鏈式的寫法更容易讓人理解，代碼意圖也更清晰。 ***** > 原文出處： [博客園-React躬行記](https://www.cnblogs.com/strick/category/1455720.html) [知乎專欄-React躬行記](https://zhuanlan.zhihu.com/pwreact) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。