React Gongxing note (1) - Functional Programming

　　Functional programming is of the essence React, React before the official explanation, it is necessary to look at functional programming, contribute to a better understanding of the characteristics of React. Functional Programming (Functional Programming) is not a new frame or a tool, but a mainly a function of the programming paradigm. Programming paradigm programming paradigm is also called, is a style of programming, in addition to the function programming, as well as conventional object-oriented programming, and other programming commands.

First, the declarative programming

　　When the declaration is also a programming paradigm, but it is a larger concept of functional programming is that it is a subset. Declarative programming can be specified for each step of the operation, without describing the specific implementation details to the computer. As opposed to imperative programming is established, it will instruct the computer how to do each step. To elements of the array is doubled as an example, to achieve programming command, as shown below.

var arr = [1, 2, 3],
  length = arr.length,
  doubles = [];
for (let i = 0; i < length; i++) {
  doubles.push(arr[i] * 2);
}

 　　In an imperative code, first for loop through the entire array, so that each element is then multiplied by two, and then doubles calculation results into the array, until all elements of the package terminating calculations until they have finished the operation. Use declarative programming like this can achieve the same functionality below.

var doubles = [1, 2, 3].map(value => value * 2);

　　In declarative code, with map () method instead of the loop (i.e., not specified control flow), neither then maintenance counter, and no longer by the element of the index array is accessed, with the arrow function ES6 let whole set It becomes very simple.

　　In addition to these surface differences, there is a difference between the most essential, and that is declarative programming would avoid the state to save the program with variables, which can improve stateless code. In an imperative code, each iteration will modify variables doubles, which is a state variable, and in the declarative code, use the return value of the state to save the program.

Second, the function priority

　　Functional programming emphasizes the use of functions in the program. Since the function is a first-class citizen in JavaScript, both the values ​​of variables may be, can be used as another parameter or function return value, the function may be constructed by a layer of abstraction in place of process control or resolve complex logic operations. For example, an array of digital filtering and sorting, it can be thought to use the programming function implemented as follows.

[4, 1, 5, 2, 3].sort((a, b) => a > b).filter(value => value > 2);        //[3, 4, 5]

　　Functional programming intended complex operation into a series of nested functions, derived layer by layer, progressively and constantly until the operation is completed.

Third, pure function

　　Pure function (Pure Function) is a no side effects, referentially transparent function, which is the basic concept of functional programming, the next three will focus on explaining its features.

1) Function of side effects

　　Function will access external side effects when performing undefined operations or resources, such as modifying the variable outer function call Date.now () or Math.random (), updated cookie information. Side effects will not only reduce the overall readability of the program, sometimes brings unexpected error, difficult investigation, the following is an example of a side effect.

var digit = 1;
function increment() {
  digit += Math.random();
  return digit;
}

　　In the above code, INCREMENT () function produces side effects, since it will be updated every call digit external variables, and calculates the results of each obtained one can predict.

2) referential transparency

　　If the same arguments passed to always get the same result, then we can say that this function is referentially transparent (Referential Transparent) a. Simply put, only the affected operating function input values, as shown in the code, it is transmitted to add () function returns the fixed parameter is the fixed value.

function add(a, b) {
  return a + b;
}

3) the parameter values ​​can not be changed

　　Instrumental parameters passed to the function is not allowed to change its internal, in other words, it is used in the internal copy function parameter value. If the parameter value is a primitive type, then it is transferred to the copy functions; however, if the parameter value is a type of object, then the note, a reference is passed to the function object pointer.

　　The following example illustrates a use, parameter addDigit () function is an array, which functions as each element of the array plus one, after performing addDigit (digits), since the variable is an array of digits, it will vary with the elements the calling function is changed.

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]

　　Next, modified addDigit () function, so that it can meet the requirements of pure function, as shown below.

var digits = [1, 2, 3];
function addDigit(arr) {
  return arr.map(value => value + 1);
}
addDigit(digits);
console.log(digits);       //[1, 2, 3]

　　In () function inside addDigit substituting map () method for loop, such that without changing the parameters of the precondition, an element plus the completion of a function.

 Fourth, the advantage

　　Functional programming has many advantages, the present section lists only two of them.

　　(1) function can be complex programming tasks into one simple and independent pure function, help to improve the modularity, reusability, and a predictive test of the code.

　　(2) Functional programming has a high degree of freedom, it can be used more in line with human thinking habit of chain-writing, in order to improve the readability of the code.

　　Next, the operation will be an array in two functional wording, it is omitted for convenience demonstrate the specific implementation of the function, the first function formula ordinary writing, as shown below.

elementDouble(filterEven(arr, filterFn), doubleFn);

　　Both functions take two arguments, the first is an array, the second is the corresponding callback function. The specific implementation process is the first () function was filtered off through filterEven even positions in the array elements, then elementDouble () function to double each element, the following wording into the chain.

filerEven(arr, filterFn).elementDouble(arr, doubleFn);

　　As can be seen by comparing the two codes, the chain wording easier to understand, the intention of the code more clear.