React：保持组件纯净

如果喜欢这篇文章，可以买一杯咖啡来支持Buy me Coffee

---

保持组件纯净

一些 JavaScript 函数应该是纯的。纯函数只执行计算，不执行其他操作。通过将组件编写为纯函数，您可以避免随着代码库的增长而出现的所有令人困惑的错误和不可预测的行为。您可以使您的组件易于管理。

---

纯度

那么我们如何创建一个纯函数呢？一个函数应该具备什么特征才能成为纯函数？纯函数应该是具有以下特征的函数：

• 它只管自己的事。它不会更改调用之前存在的任何对象或变量。

• 相同的输入，相同的输出。给定相同的输入，纯函数应该始终返回相同的结果。它不应该对相同的输入给出不同的结果。

让我们考虑一个数学公式：y = 2x

如果 x = 2，y = 4。这个不变量始终是相同的结果。

如果 x = 3，y = 6。这个不变量始终是相同的结果。

如果 x = 3，有时 y 不会是 9、–1 或 2.5，具体取决于其他情况。

如果 y = 2x 且 x = 3，则 y 将始终为 6。

如果我们将其变成 JavaScript 函数：

function getDouble(number) {
  return 2 * number;
}

getDouble 是一个纯函数。如果你传递 3，它将返回 6。总是。

React 是围绕这个概念构建的。它假设每个组件的行为都像一个纯函数，这意味着您的 React 组件应该始终在给定相同输入的情况下返回相同的 JSX 输出.

让我们通过举例来解释纯化合物。

function Member({ user }) {
  return (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

它总是返回用户给定的任何参数。就像数学公式

---

结论

组件必须是纯的，意思是：

它只管自己的事。它不应更改渲染之前存在的任何对象或变量。

相同的输入，相同的输出。给定相同的输入，组件应该始终返回相同的 JSX。

以上是React：保持组件纯净的详细内容。更多信息请关注PHP中文网其他相关文章！