react基础理解|青训营笔记

68 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第17天

函数式编程

js中函数是一等公民,可以传过去传过来,可以像变量一样,就是函数在js中很牛

命令式和声明式(函数式编程是声明式的一部分)

命令式就是将具体实现写出来

image.png 而声明式只是写一个函数而已,实现过程被隐藏

image.png

函数式编程的基本概念

  1. 不可变性

    不是说数据完全不变,而是源数据不变,想要改变数据时操作数据的副本

    1. Object.assign(target,copy1,copy2,...)
    2. array.concat(item1,itme2)
    3. {...obj,key:value}
    4. [...array,item]
    5. arr.filter(v=>boolean)
    6. arr.join("/n")
    7. arr.map(v=>newitem) 都是返回新的体现了不变性
  2. 纯函数

    接收至少一个参数,并返回一个值得函数,且不改变外表环境,把参数视为不可变量

  3. 数据转换

    数据不可变性=>数据转换(通过纯函数将元数据处理成我们需要的格式并产生副本) 在这里3个基本准则已经联系起来了

    1. Object.keys(obj) 返回key组成的数组

    2. reduce/reduceRight(将数组转成基本数据类型)(reduceRight只是从右边开始罢了)

      array.reduce((changevalue,value)=>changevalue,initvalue)
      //从数组到返回你想要的任何  
      

      reduce是适合返回一个值(任意,就算是函数都行)what需要每一个或大多数组值都要参与且不断的将每次的处理结果反馈给下一次的

  4. 高阶函数

  5. 递归

    const countdown=(value,fn,delay)=>{
        fn(value)
        return value>0?settimeout(()=>countdown(value-1)):value 
    }
    

    适合在搜索数据结构中使用

  6. 合成

    1. 就是把一些小型的纯函数综合运用构建一个大型应用
    2. 合成方法
    • 可以用点语法串联在一起 一个函数处理上一个函数的结果

    • 创建高阶函数来合成大型函数

      const both=compose(fnc1,fnc2...)
      both(initarg);
      const compose=(...fns)=>initarg=>
          fns.reduce((changevalue,fnc)=>fnc(changevalue),initarg)