箭头函数中()、{}、({})的用法区别及参数解构疑问

嘿，这个问题问到点子上了，我来给你一步步拆解明白～

一、箭头函数体用{}和()包裹的核心区别 #

箭头函数的这两种写法本质是为了区分显式函数体和隐式返回：

• 用()包裹函数体：这是隐式返回的语法糖，不需要写return关键字，会直接返回括号内表达式的结果。不过要注意，如果返回的是对象字面量，必须用()把对象包起来，不然JS会把{}当成函数体的代码块，比如() => ({ name: 'Alice' })才会返回一个对象，而() => { name: 'Alice' }不会返回任何东西（因为被解析成了空函数体）。
• 用{}包裹函数体：这是标准的显式函数体，里面可以写多行代码（比如条件判断、循环、变量声明），但如果需要返回值，必须手动写return关键字。比如：

  const calculate = (a, b) => {
    const sum = a + b;
    return sum * 2;
  }
  

二、示例中参数用({ filter, children })的原因 #

这是ES6的对象解构赋值语法，专门用来简化对象属性的访问：
在React组件中，组件接收的props本质是一个对象，比如你的FilterLink组件实际会收到这样的参数：{ filter: 'SHOW_ALL', children: 'All' }。

• 如果写成(props)，那你得每次用props.filter、props.children来访问属性；
• 而用({ filter, children })，相当于直接从props对象里把filter和children这两个属性“拆”出来，变成单独的变量使用，代码瞬间简洁很多，不用反复写props.前缀。

对应你的示例代码，解构后直接用filter来拼接路由路径，用children作为NavLink的子元素，逻辑清晰又省代码～

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