为什么大家都使用 Axios 而不是 Fetch

曾经以为对React了解颇深，但在深入研究后，发现自信心不足。React生态系统不断发展，学习也需持续进行。

Key”警告。

让我们从一些简单而常见的事情开始，比如Map方法。我们通常使用它在JSX中迭代对象以呈现内容。尽管经常会遇到小小的“key”警告，但我们经常忽视它。

React使用一种称为“Diffing算法”的机制来协调DOM。每当组件状态发生变化时，React都会创建一个新的虚拟DOM并将其与当前DOM进行比较。这个比较过程，即“diffing”，允许React识别更新DOM所需的最小操作数量。

在React.js中理解Diffing算法

因此，React引入了“key”属性，用于区分“map”渲染的元素。如果没有提供键，算法将不得不重新渲染所有map元素（如果存在更新）。

默认情况下，React使用索引作为键，这是大多数程序员所采用的方式，就像下面的例子一样。

import React from 'react';

const ToolsList = () => {
  const [tools, setTools] = React.useState(["Dualite", "Slack", "Zoom", "Locofy"]);

  return (
    <ul>
      {tools.map((tool, index) => (
        <li key={index}>{tool}</li>
      ))}
    </ul>
  );
};

export default ToolsList;

然而，这样做存在一个问题。如果在tools状态的开头添加了新元素，组件将重新渲染，包括所有的JSX。React会创建最新VDOM的新副本，并将其与现有DOM进行比较，找出变化。然后只更新已更改的部分。

但由于添加了元素，所有索引都会改变，导致React将它们全部视为新/更改的元素，从而重新渲染。解决方案是使用一致且对于元素是唯一的值作为键。通常可以使用元素ID或渲染元素的内容。

import React from 'react';

const ToolsList = () => {
  const [tools, setTools] = React.useState([{id: 1, name: "Dualite"}]);

  return (
    <ul>
      {tools.map((tool) => (
        <li key={tool.id}>{tool.name}</li>
      ))}
    </ul>
  );
};

export default ToolsList;

这样运行得很完美。

React中的纯度。

React倡导不变性和纯度的概念，确保函数始终为给定输入产生相同输出，并避免具有范围外变量的副作用。这提高了React应用程序的可预测性和可维护性。尽管这是JavaScript函数的原则，但React组件本质上只是返回JSX的函数。

以下示例：

let outsideVariable = 10;

function Comp() {
  outsideVariable = 20;
  return (<p>The Value is {outsideVariable}</p>)
}

在这个例子中，Comp修改了outsideVariable，这是在组件范围之外定义的。

Strict Mode

这时React的Strict Mode发挥作用的地方。Strict Mode是一个突出显示潜在问题的工具，不渲染可见UI。它激活了对其后代的额外检查和警告。

通常使用<React.StrictMode>标签将其添加到应用程序周围，或者包裹在src/index.js文件的ReactDOM.render()方法内。

在Strict Mode中，React对于函数组件的状态更新函数和effect hook执行了两次调用，以确保组件在相同状态和props下的输出保持不变。这有助于检测问题，但只在开发模式下执行，生产中不执行。

Strict Mode还警告有关弃用方法、使用遗留字符串ref API的问题、意外副作用等的警告。是React生态系统中确保代码质量并在开发阶段早期检测潜在问题的重要工具。

在应用中添加Strict Mode的方法如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

通过这种方式，React的Strict Mode有助于保持组件的纯度，确保副作用被最小化或消除，从而提高可预测性和可维护性。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！