Open findxc opened 3 years ago
呃，因为之前写函数式组件都是直接 export default () => {} 这种写法，觉得比较简洁省事，然后有次 code review 一位同事就说不建议这样写，因为这种匿名的写法会导致该组件在 React Developer Tools 组件树里面显示为 Anonymouse ，调试不太方便，观感也不好。
export default () => {}
然后我去研究了下怎么定义一个函数式组件比较好，然后发现，如果说你是用 Create React App 来新建项目，它会默认开启 no-anonymous-default-export 这个 eslint 规则，所以 export default () => {} 会直接给你 ⚠️ ，它的解释是：
Ensuring that default exports are named helps improve the grepability of the codebase by encouraging the re-use of the same identifier for the module's default export at its declaration site and at its import sites.
大概意思就是如果 default exports 都是已经命名了的，那你在 import 的时候也可以直接去 copy 这个名字不用再去思考命名（虽然其实也可以直接用文件名或者文件夹名？以前我都这样干的），提升了代码库的 grepability （我理解就是搜索关键词更方便了？）（linux 里面有个 grep 命令，管道，可以搜索东西）。
然后在写高阶组件的时候，React 建议设置一下 displayName 以便在调试时知道这是一个由高阶组件生成的组件，见 Convention: Wrap the Display Name for Easy Debugging 。
然后还发现一个好玩的，你平时是 const AAA = () => {} 来写组件还是 function AAA () {} ？
const AAA = () => {}
function AAA () {}
airbnb 推荐用 function 的方式，见 prefer normal functions (not arrow functions) ，也是吃惊 ... 学习了 ... 因为我以前都是直接 const AAA = () => {} 。
呃，一种是匿名的函数表达式赋值给一个变量的形式，一种是函数声明的形式，要说区别的话，就是函数声明会被 提升 ，再就是函数声明定义的函数会有 name 属性，值就是函数的名字。
关于这个还有个讨论，见 Why does the Airbnb style guide say that relying on function name inference is discouraged? - Stack Overflow
呃，我理解的是函数声明相对于函数表达式赋值会更直观、显式一些。
我们平时可能也不需要太纠结这些？如果团队有规范就和团队一致即可。（我看到 antd 源码里面是两种写法都有，lodash 则习惯于用 fucntion ，并且 lodash 就算文件只有一个函数，也是在文件底部 export default xxx ，而不是直接 export default function xxx () {} 这样，恩，我理解也只是习惯问题、团队一致就好了）。
所以到底要怎么写呢，我是准备参照 lodash ，function xxx() {} ，然后在文件底部 export default xxx ✌️。
呃，因为之前写函数式组件都是直接
export default () => {}这种写法，觉得比较简洁省事，然后有次 code review 一位同事就说不建议这样写，因为这种匿名的写法会导致该组件在 React Developer Tools 组件树里面显示为 Anonymouse ，调试不太方便，观感也不好。然后我去研究了下怎么定义一个函数式组件比较好，然后发现，如果说你是用 Create React App 来新建项目，它会默认开启 no-anonymous-default-export 这个 eslint 规则，所以
export default () => {}会直接给你 ⚠️ ，它的解释是：大概意思就是如果 default exports 都是已经命名了的，那你在 import 的时候也可以直接去 copy 这个名字不用再去思考命名（虽然其实也可以直接用文件名或者文件夹名？以前我都这样干的），提升了代码库的 grepability （我理解就是搜索关键词更方便了？）（linux 里面有个 grep 命令，管道，可以搜索东西）。
然后在写高阶组件的时候，React 建议设置一下 displayName 以便在调试时知道这是一个由高阶组件生成的组件，见 Convention: Wrap the Display Name for Easy Debugging 。
然后还发现一个好玩的，你平时是
const AAA = () => {}来写组件还是function AAA () {}？airbnb 推荐用 function 的方式，见 prefer normal functions (not arrow functions) ，也是吃惊 ... 学习了 ... 因为我以前都是直接
const AAA = () => {}。呃，一种是匿名的函数表达式赋值给一个变量的形式，一种是函数声明的形式，要说区别的话，就是函数声明会被 提升 ，再就是函数声明定义的函数会有 name 属性，值就是函数的名字。
关于这个还有个讨论，见 Why does the Airbnb style guide say that relying on function name inference is discouraged? - Stack Overflow
呃，我理解的是函数声明相对于函数表达式赋值会更直观、显式一些。
我们平时可能也不需要太纠结这些？如果团队有规范就和团队一致即可。（我看到 antd 源码里面是两种写法都有，lodash 则习惯于用 fucntion ，并且 lodash 就算文件只有一个函数，也是在文件底部 export default xxx ，而不是直接 export default function xxx () {} 这样，恩，我理解也只是习惯问题、团队一致就好了）。
所以到底要怎么写呢，我是准备参照 lodash ，function xxx() {} ，然后在文件底部 export default xxx ✌️。