React onClick场景下callAll函数中...args参数的来源问题

首先我们先拆解callAll的函数结构就能清晰看懂参数来源：
const callAll = (...fns) => (...args) => fns.forEach(fn => fn && fn(...args))是典型的柯里化高阶函数，执行分为两个阶段：

• 第一阶段：你在给onClick赋值的时候调用callAll(fn1, fn2)，此时传入的() => setIsOpen(true)、child.props.onClick会被剩余参数语法收集为fns数组，这一步执行后会返回内层的匿名函数：(...args) => fns.forEach(fn => fn && fn(...args))
• 第二阶段：这个返回的匿名函数会被直接绑定到组件的onClick属性上，当组件触发点击事件时，React会自动给绑定的onClick函数传入事件对象event作为入参，如果是自定义组件还可能传入其他自定义参数，这些触发时传入的所有参数，就会被内层函数的剩余参数语法...args全部收集。

至于为什么写...args就能自动适配所有函数的参数，是因为：
剩余参数语法...args的作用就是把当前函数接收到的所有入参打包成一个数组，之后调用每个fns里的函数时，再用展开运算符...args把数组拆成独立参数原封不动传进去，不管每个函数需要接收几个参数都能兼容：

• 如果你传的onClick不需要参数比如() => handleClick("clicked")，多传的参数会被函数自动忽略，不会影响执行
• 如果你的onClick需要接收事件对象比如(e) => console.log(e.target)，参数也能正常传递进去，不会破坏原有逻辑

内容的提问来源于stack exchange，提问作者SantiArias