登录
首页 >  文章 >  前端

React:保持组件纯净

来源:dev.to

时间:2024-11-23 11:51:46 329浏览 收藏

编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《React:保持组件纯净》,文章讲解的知识点主要包括,如果你对文章方面的知识点感兴趣,就不要错过golang学习网,在这可以对大家的知识积累有所帮助,助力开发能力的提升。

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:保持组件纯净》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于的内容请关注golang学习网公众号!

声明:本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>