useEffect/lint警告是否会导致React前端项目启动后出现页面白屏

执行npm start启动项目后出现报错，页面加载后显示空白，报错信息如下：

[frontend]   Line 21:6:   React Hook useEffect has a missing dependency: 'register'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/findProperty/FindProperty.js
[frontend]   Line 47:6:  React Hook useEffect has a missing dependency: 'register'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/dashboard/PastPayments.js
[frontend]   Line 4:8:  'ChevronIcon' is defined but never used   no-unused-vars
[frontend]   Line 5:8:  'DownloadIcon' is defined but never used  no-unused-vars
[frontend]
[frontend] ./src/components/common/alerts/Alerts.js
[frontend]   Line 54:6:  React Hook useEffect has an unnecessary dependency: 'fetchAlertData'. Either exclude it or remove the dependency array. Outer scope values like 'fetchAlertData' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/pastBills/PastBills.js
[frontend]   Line 66:6:   React Hook useEffect has missing dependencies: 'history', 'params', 'serviceAccounts', and 'showFileInUrl'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
[frontend]   Line 93:11:  <iframe> elements must have a unique title property                                                                                                             jsx-a11y/iframe-has-title
[frontend]
[frontend] ./src/components/user/dashboard/CustomerSvcTable.js
[frontend]   Line 7:22:  'formatCurrencyNum' is defined but never used                                                                   no-unused-vars
[frontend]   Line 34:6:  React Hook useEffect has a missing dependency: 'getSvcOrder'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/layout/Layout.js
[frontend]   Line 80:6:   React Hook useEffect has a missing dependency: 'fetchInitialData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
[frontend]   Line 86:20:  'Tawk_API' was used before it was defined                                                                            no-use-before-define
[frontend]   Line 91:9:   'Tawk_LoadStart' is assigned a value but never used                                                                  no-unused-vars
[frontend]
[frontend] ./src/components/common/navbar/Navbar.js
[frontend]   Line 91:15:  No duplicate props allowed  react/jsx-no-duplicate-props
[frontend]
[frontend] ./src/components/common/card/Card.js
[frontend]   Line 94:21:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank
[frontend]
[frontend] Search for the keywords to learn more about each warning.
[frontend] To ignore, add // eslint-disable-next-line to the line before.

• 1、是否需要将缺失的依赖添加到前端的package.json中？我执行npm install后报错会消失，但不确定永久修复方案是什么？
  不需要，你看到的所有报错都是ESLint代码规范检查的告警/错误，不是npm第三方依赖缺失。npm install后报错消失只是临时刷新了编译缓存，没有实际解决问题。
  永久修复分为两类处理：
  • 非useEffect类的规则问题：直接按提示修改即可，比如删除未使用的导入变量、给iframe加title属性、给跳转的a标签加rel="noopener noreferrer"属性、删除重复的props、调整变量定义顺序避免提前使用。
  • useEffect依赖相关问题：如果逻辑上确实需要响应提示的依赖变化，就把对应变量加到useEffect的第二个参数依赖数组中；如果确认只需要在组件挂载/卸载时执行一次，不需要响应变量变化，就在对应useEffect的上一行添加// eslint-disable-next-line react-hooks/exhaustive-deps注释忽略校验。
• 2、依赖列表的条目是否有顺序要求？
  useEffect的依赖数组没有顺序要求，只要把所有需要监听的变量完整列进去即可，顺序不会影响useEffect的触发逻辑和执行结果。
• 3、浏览器显示空白页面，但浏览器调试工具中没有可见报错？
  首先默认配置下ESLint告警不会阻塞编译，白屏大概率是你的项目ESLint配置把这些规则的级别设为了error，触发了编译失败，没有生成可执行的JS代码导致页面空白。你可以先检查下项目的ESLint配置文件，确认校验级别，也可以先临时把校验关闭验证是不是这个原因导致的白屏。如果确认不是ESLint阻塞编译导致的，再排查根组件渲染逻辑、路由配置、静态资源路径这几类容易导致白屏但不会抛出明显控制台错误的问题。
• 4、我是否可以忽略这些lint错误，不按照提示向useEffect中添加对应依赖？
  可以忽略，但不推荐。忽略校验只适合你明确知道useEffect不需要响应任何依赖变化的场景，这种情况加对应注释跳过校验即可。如果实际业务逻辑里useEffect内部用到了这些变量，忽略校验会导致闭包陷阱，出现拿到的始终是第一次渲染时的旧值的bug，这种场景必须把依赖补全。

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