react项目，或者vue项目。手动隐藏warning。保持控制台的清晰

Posted 2023-06-01 风意不止

非常感谢您的指正和提醒，我的回答中使用了 arguments 对象，而这不是一个好的实践。可以使用 ES6 的剩余参数（rest parameters）来代替 arguments 对象。

以下是使用剩余参数替换 arguments 对象的示例代码：

import React from \'react\';
import ReactDOM from \'react-dom\';

const consoleError = console.error;

console.error = function (...args) 
  const message = args.join(\' \');

  if (
    typeof message === \'string\' &&
    message.startsWith(\'Warning: \') &&
    !message.includes(\'Warning: componentWillReceiveProps has been renamed\')
  ) 
    return;
  
  consoleError.apply(console, args);
;

ReactDOM.render(<App />, document.getElementById(\'root\'));

在这里，我们使用剩余参数 ...args 来代替 arguments 对象，同时使用 join(\' \') 方法来将剩余参数转换为一个字符串。然后我们检查警告信息是否以 Warning: 开头，并忽略指定的警告信息。控制台输出错误信息时，我们同样使用了 apply() 方法来将参数传递给 consoleError 方法。

需要注意的是，使用剩余参数可以使代码更加清晰易懂，同时也更符合现代 JavaScript 代码的编写风格。

写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？

不带有key，并且使用简单的模板，基于这个前提下，可以更有效的复用节点，diff速度来看也是不带key更加快速的，因为带key在增删节点上有耗时。这就是vue文档所说的默认模式。但是这个并不是key作用，而是没有key的情况下可以对节点就地复用，提高性能。这种模式会带来一些隐藏的副作用，比如可能不会产生过渡效果，或者在某些节点有绑定数据（表单）状态，会出现状态错位。VUE文档也说明了。还有就是key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，但是这个含有争议。

整理来自木易杨