学习 React 之前，先了解一下 JS 中的函数

函数

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

大家好👋感谢大家对上一篇文章的
点赞❤️🔖和评论🦄 。我在这里分享一些适合初学者的前端开发知识。 今天，我们来聊聊JavaScript和React中的函数概念。

函数

JavaScript 函数简介。
在 JavaScript 中，函数实际上是对象。它们也拥有属性和方法。它们与对象唯一的区别在于
函数可以被调用。

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

JavaScript 中声明函数的方法

最常见的方法是使用函数声明或函数运算符。
以下是声明函数的不同方法：

1. 函数声明
   是最典型的方法，它允许函数提升，即可以在声明之前使用
   。
   

   function funcName(A1, A2...){}
   

2. 函数表达式最适合用于将 函数作为对象
   赋值给一个变量的情况。
   
   

    var var_name = function funcName(A1,A2..){
    };
   

3. 生成器函数声明
   一个使用yeild关键字返回生成器-
   迭代器对象的函数，该对象的next方法可以稍后调用。
   

    function* name(A1, A2..) {}
   

   生成器函数表达式
   

     function* function_name(A1,A2..){}
   

4. 函数构造函数：
   `Function` 关键字实际上是一个构造函数，它会创建
   一个新函数。这是最不推荐的方法。
   

      var var_name = new Function(A1,A2..,'FunctionBodyString');
   

5. 箭头函数：
   
   该函数语法简洁，可用于删除
   
   this值。
   
   

      var var_name = (A1, A2..) => {};

React 中的箭头函数

箭头函数是一种更简洁的函数编写方式，在 React 中经常使用。

• 如果函数体内只有一个语句，return则{}可以省略 `and` 和 `or`。此外，function也不使用关键字 `or`。
• 如果只有一个参数，则不使用参数括号。
• 使用箭头函数可以避免在回调函数中使用此函数而导致的任何错误。

 const arrowFunc = () =>
  'Hello';
 console.log(arrowFunc());

高阶函数

“高阶函数”是指接受函数作为参数和/或返回函数的函数。高阶组件 (HOC)是 React 中用于重用组件逻辑的高级技术。如果事先了解高阶函数，就更容易理解HOC。

例子

 import React from 'react';
  export const doIncrement = state =>
      ({ counter: state.counter + 1 });

• 映射、过滤和归约都是 HOF 的一些示例——使转换、搜索和求和更容易！

。减少（）

  const Arr = [1, 2, 3, 4];

  const sum = Arr.reduce((last, current) 
  => {  
    return last + current;
    });

  console.log(sum); //will print sum

。筛选（）

   const Num = [1, 7, 2, 8, 9];
   const filterArr = Num.filter(n => {  
    return n > 5;
    });

。地图（）

  const usernames = ['A', 'B', 'C', 'D'];
  const message  = usernames.map(member => {
  return member + ' hello.';
   })

学习了高阶函数之后，就具备了学习 React 高阶组件的所有基础知识。

感谢阅读

希望对您有所帮助。下次见😊。GitHub
⭐ LinkedIn ⭐ Twitter