开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情
React hooks - 平时开发细节最佳实践
开头
个人平时对工作开发时的一些积累与心得。
内容
使用ES6
干净的代码总是值得被赞赏的, 使用ES6语法让你的代码更干净。
箭头函数
箭头函数可以使函数定义更加简洁。它们可以减少代码行数，并且自动绑定this。另外，箭头函数还可以更好地处理闭包。
使用模版字符串
模板字符串可以使字符串拼接更加简洁易读，并且支持在字符串中插入表达式，这在一些情况下非常有用。
使用 const & let
使用const和let声明变量可以避免变量提升和意外修改变量的问题，并且可以使代码更加健壮。
对象的解构
对象的解构可以使代码更加简洁易读，并且可以从对象中提取需要的属性，这在访问API返回的数据时非常有用。
简洁的定义对象
ES6提供了简洁的方式来定义对象，可以使代码更加简洁易读。使用对象简洁定义语法时，可以使用变量名作为属性名和值。
使用map遍历数据时,记得带上key
我们如果经常使用react相关表格ui库,就会知道如果缺少key或者key并不唯一,显示会出现问题或者报错以及一些列性能问题等等,关于key介绍
命名问题
组件开头的方法名应该遵守PascalCase(大驼峰)命名
文件夹命名问题
-
React 组件的文件夹命名都是 大驼峰。
-
如果是组件文件，则使用 大驼峰，如
MyComponent.js -
如果组件是一个目录，则组件主入口命名为
index，如index.js -
其他文件或文件夹均为小驼峰
普通变量 & 方法名 & 常量
采用一致的命名约定可以使代码更易于阅读。在JavaScript中，通常使用camelCase（小驼峰）格式来命名变量和方法，而常量则使用全大写格式，并使用下划线分隔多个单词。
ID & Class名单词与单词之间应该使用 -
在HTML和CSS中，ID和Class名应该使用连字符 "-" 来分隔单词，以提高可读性。
react Api
react不应随便使用原生DOM元素
避免在 React 中使用原生 DOM 元素：推荐使用 React 提供的 DOM 元素操作方法（如 refs）来替代。
使用 useEffect去监听事件时,记得rmove它
使用 useEffect 去监听事件时，记得在组件卸载时进行清除操作，避免内存泄漏。
有条理的数理文件夹和文件
保持有条理的文件夹和文件结构：根据功能或模块划分文件夹，并在文件夹内使用有意义的文件命名规则，以提高代码可读性和可维护性。
组件是index命名的入口文件
如果组件文件名为 index.js，则在导入时可以省略文件名。
props过多,采用对象的方式收集再传给子组件
如果需要传入大量的 props，可以考虑将它们收集到一个对象中，然后将该对象作为单个 prop 传递给子组件。
不要尝试在修改完setState, 立即可以看到变化 详情可查看
1避免在 setState 后立即访问修改后的 state 值，因为 setState 是异步的，它可能不会立即更新 state 的值。如果需要在 state 更新后执行某些操作，可以使用 useEffect 或 setState 的回调函数。
useEffect 的依赖数组中不要使用引用类型
在 React 中，当依赖数组中的值发生变化时，会触发 useEffect 的回调函数执行，如果依赖数组中有引用类型的值，那么在每次渲染时，该值都会创建新的引用。这意味着在每次渲染时，依赖数组中的引用类型值都是新的，即使它们的值没有实际发生变化，这会导致 useEffect 认为依赖项发生了变化，从而重复执行回调函数。
使用 useMemo 对计算量较大的操作进行优化，以避免重复计算和提高性能。
将组件逻辑拆分为自定义 hook，以提高代码的可重用性和可维护性。
避免在 useEffect 中直接使用 async/await，因为 useEffect 不能直接返回 Promise，可以使用一个自执行的 async 函数来解决。
规范方面
使用 ESLint 和 Prettier 等工具来进行代码规范化和格式化，以提高代码质量和可读性。
细节方面
边界问题处理
在处理对象和数组时，应该考虑到边界情况，如对象和数组中的null和undefined值。这些值可能会导致代码出错或产生。
避免过多使用行内样式
避免过多使用行内样式：推荐使用外部样式表或 CSS-in-JS 库，以提高代码可读性和可维护性。
结尾
路过的小伙伴觉得有用的话，点点赞收藏下哦❤
