react组件传值_react的组件传值的思考，变量的传值，函数执行的词法作用域

今天写一个组件，遇到了一个很常见的骚操作的，就是这样的模式，父组件的一个子组件，它是下拉菜单，里面是一个数组遍历制作出来的li元素，[a,b,c,d]数组遍历的时候，li上面加上点击事件，onChange，它这里，我的需求是，，，先等一下，

数组遍历时，map里的主函数的自变量命名为key，我在这里，要的就是把key就是指代abcd么，对吧！onchange里，一个箭头函数，函数内，首先判断key是不是等于cd那两个值，那两个值要被过滤掉，不能加手动输入操作来改变state的，而key是ab的话，声明了一个obj,obj[key]等于e.target.value，再setState(obj)，就是这样的逻辑了。如果没有过滤的代码，其实我是可以直接在onChange里写的，很简单的代码的，但是有了的话，写那里就不好看了哦！这部分代码抽离出来，变成组件的一个函数w

所以那里我需要写个箭头函数，返回this.w就可以了吧，，，结果出问题了哦！因为我需要传参数，这里的参数有两个一个是e一个是key。

我当时，明白key必须要让w运行时，从词法作用域那里出发，才对的，e是onChange本身回调函数默认的第一个参数，这个很容易的！当时，我其实是蒙了的，虽然有key的出处的感的，但是，onChange={ }里，我要如何写了，，，

我试了好几种写法的，就是不能实现的，，，

跟同事说了，他跟我一起碰，碰出来了，，，说起来有些不好意思了哦！感觉是很基础的玩意儿的，，，结果是这样子的

onChange={ (e) = this.w.bind(this)( e, key ) }

这里，我试过，把key放在第一个小括号里，不对的，，，我其实现在是从对的答案去推敲的，所以，是推论，我的感觉了哦，不过我觉得是对的。因为我几种情况都试过了，实践才出真知的！

第一个括号里写key,确实是key在第一个小括号里，找不到值的。

而第二个括号里的e和key就有意思了哦！可以实现的，，，

e这里是没问题的，默认的事件的回调函数的第一个参数的。

这里，我暂时先死记硬背下来了哦。具体什么意思了，我先根据表现出来的现象，猜测，第一个括号就是事件触发的函数的回调函数，它的参数的词法作用域应该就是事件生成那里的作用域了，而不是当下的了，第一个括号的箭头函数，把e传入，并返回了一个新的函数，并且这个函数接收两个参数，第一个参数连接e的传入，这里理解的很没有问题的，就是（fn(a,b)）(a)这种意思了哦！b只能在fn运行环境的上下文来找了哦，，，也可以明白的。

这种看正确答案来理解的感觉是没问题的，但是为什么(fn(a,b))(a,b)就不可以的？

突然有点感了！这时候，两个括号里的a,b都是变量的，而不是说，前面的括号是变量，后面的括号是值！我不知道是不是这种意思的？而因为在事件的回调函数里，默认的第一个参数的值就是e,所以a是一个值的，是e，而b它是个变量了哦！因为控制台返回的b是undefined。

太晚了，稍微理一下，下来再细想一下，

函数表达式，函数变量，后面加上括号，就是要运行的意思，执行函数，后面的括号里的参数，要传值，或者直接赋值。

传值就是e，从箭头函数的argues那里，等效于，let e=argues[0],紧接着，就是return fn(e,key)。e从执行代码的上下文找，找到了，key也从执行上下文找了哦，，，

这样算是自己说通了自己了哦，，，

思维有点乱了，，，下来再理，好困啊！

箭头函数的意思是把e传给了返回的函数的第一个参数a，成为有值的了。而返回的函数的第二个参数b，

～是～～～分割线，理一理！

修改，，，好久没思考这种拿来就用的知识点了哦！把上面的乱七八糟的那个们，都格式化了哦！属于我纯粹的狂想了哦！可能是太晚了，竟然不往官方的思路走了哦！

第一，函数声明的时候，确定参数的操作逻辑！

第二，函数引用的时候，也就是执行的时候，这里再扩大，变量的引用执行的时候，函数也是变量啊，这里是作用域的概念了，执行到哪里了，遇到一个变量，怎么办？往上面的代码找，，，

这太笼统了，作用域链的知识了哦，只能在变量的执行的区块代码内部，，，或者这个区块代码的上层区块，或者上上层，，，

js的区块，，，除了es6的声明引入了区块的作用，传统的命名的话，就不好语言描述了，我想一想，，，

{

var a=1

{

var a=2

var b =1

{

var a=3

var b =2

var c=1

{

var a =4

}

{

var c=2

这里用c就用c为2。用a没有，再往这个区块的外层找，为3，而不是往同级区块找那个a=4。

同不同级，看的是这两个区块的代码的上一层是不是同一个层。

如果上层的a=3去掉，再往上层找，找到了为2，就是这个意思的

}

}

}

}

声明的意义就是规定了这个变量被引用的范围大小。明显的层级关系，像不像管理层级的思维？下层的人遇到一个问题，就要向中层去问，中层有这个问题的方案，下层就拿到了，中层没有，只能向上层去问，如果上层没有呢，，，，现实生活中是可以没有的，，，但是写代码的话，如果没有，那就是bug了哦！

这里，我记得学的时候，若愚讲解的层次到了，声明的内部具体做了什么的。都知道每声明一个变量，这个变量就是那个区块的研究对象的一个属性，这个属性的值也记录了哦！每次声明，就是把这些声明的变量储存在了一个默认功能的堆或者栈里，，，

这里主要存了声明的变量，变量的值，还有一个，就是这个区块代码的上层区块的地址。这就是作用域链实现的机制的数据基础了哦！

作用域的知识先到这里，，，

然后，回到现在这个问题，

首先，react里的组件的onChange 等事件api，

在用的时候，第一，后面的大括号里写的是个函数变量，就是个函数表达式，而不是