餐饮网站开发毕业设计,做网站展示软件,汕头网站公司,平台规划方案怎么写作者 | Siradji Awoual译者 | 苏本如#xff0c;责编 | 屠敏头图 | CSDN 下载自东方 IC出品 | CSDN#xff08;ID#xff1a;CSDNnews#xff09;大家好#xff01;希望你们在疫情期间平平安安。今天#xff0c;我想在这里谈谈不同的内容。我想分享一些React的开发技巧和… 作者 | Siradji Awoual译者 | 苏本如责编 | 屠敏头图 | CSDN 下载自东方 IC出品 | CSDNIDCSDNnews大家好希望你们在疫情期间平平安安。今天我想在这里谈谈不同的内容。我想分享一些React的开发技巧和策略以帮助你们在React中编写更干净、更好的代码。大部分我已经分享的或者将要分享的内容都是关于我在学习编码的过程中遇到的难题。作为一个没有导师指导的自学型的开发人员我发现有一件事很难做好那就是在React中编写干净的代码。我知道我必须变得更好,但是怎么做呢所以我想出了一个解决办法。我先找到5个深受大家尊敬的专业React开发人员然后我去到他们的GitHub代码库中从他们的React项目的代码中找到一些共同的东西或/和模式。我并没有试图将我的代码与任何人的代码进行比较我只是想知道这些被大家称为“专家”的开发人员到底在他们的代码中添加了什么他们是如何实现某些功能的、他们采用了什么方法、以及为什么要采用这些方法。正如预期的那样我开始有了一些发现我发现我的代码中缺少的东西在所有这五个人的代码中都出现了。这些发现对我来说很有意义因为它可以解释以前的一些做法了。比如说为什么在需要prop-type时不将其添加到工作流中呢。从那一天起我开始把我学到的东西纳入到我的工作流程中。相信我这有助于我理解React并且让我的代码看上来不像新手写出来的。闲话不再赘述。接下来我将分享一些我学到的技巧这些技巧有些是从我的个人研究中得到的也有些是通过项目和经验学到的。注下面技巧的重要性不以先后次序决定。prop-type如果你对React来说是新手你可能不知道什么是prop-type。但是如果你一直在使用React,那么你至少有几次机会见过或者使用过React。什么是prop-type基本上你可以把将prop-type视为一个模块、包、或者其他任何东西它的作用是对父组件传递过来的值/参数prop作类型检查。比如说你希望从父组件中传来一个对象值但是由于某种原因你接收到的是一个数组这会导致你的应用程序无法工作不是吗下面是prop-type使用场景的一个例子。你定义了你期望的参数类型如果你接收到了不同类型的参数/值那么它就会抛出一个错误。Const App  ({title, id, isCompleted})  { // }App.propTypes  { Id: PropTypes.number.isRequired, title: PropTypes.string.isRequired, isCompleted: PropTypes.bool.isRequired}在上面的代码块中我们先定义了一个名为App的组件它接收三个参数proptitle、isCompleted和id。接着我们定义了参数类型prop-type参数title应该是一个字符串参数id应该是一个数字而参数isCompleted应该是一个布尔值。如果我们接收到的参数类型和我们定义的不一致我们就会得到一个错误。这是prop-type的基本用例。它的用法可能会有点复杂但随着时间的推移你会学会如何使用它。如果你想了解更多关于prop-type的内容可以参考这个prop-type文档的链接https://github.com/facebook/prop-types。在类上使用函数组件functional component和钩子hook这个话题有点争议。有些人可能同意我的观点而另一些人可能不同意。我已经使用过类和生命周期方法如果我对这些有什么看法的话那也应该是正面的。然而函数组件functional component和钩子hook是React的未来。React现在的一切变化都是为了更方便地使用hookReact的开发工具也支持这一变化。我个人认为如果你开始一个新的项目你应该使用钩子和函数组件但是对于已有的使用类构建的代码库建议不要进行重构。我个人喜欢函数组件。我的意思是说它们更干净优雅而且更简单。将其添加到你的工作流中可以显著地让你的代码变得干净并且使你成为更好的开发人员。使用函数组件和钩子表明开发人员可以很好地适应生态系统。几个月前我申请工作的公司给了我一个非现场编码测试。我用钩子完成了整个项目面试官很高兴因为如果我知道这意味着什么的话那么说明我“可以顺应潮流”。使你的组件小而且可重用但不要过于抽象React的主要特征之一是将所有内容都包含在一个组件中。React中的组件相当于乐高积木 - 构建应用程序的小代码块。组件应该相对较小。举个例子WhatsApp的send部分是一个组件对吗在该组件内部有send button组件、voice message组件和text area组件。所有的功能都被分解成短小而简单的代码块。组件不仅要小而且要可重用。我并不是说所有的组件都应该是可重用的但是如果你知道你会在你的应用程序的另一部分中再次使用一个组件那么这个组件就应该是可重用的。可重用组件的一个很好的例子是button按钮组件。如果我想创建一个按钮组件我会让它尽可能地通用。按钮的大小、颜色、边框半径都将作为参数prop进行传递。话虽如此你也不应该过度抽象你的组件。而过度抽象会不必要地使得所有的组件或大部分组件都成为通用组件。记住只有在你确信一个组件会在多个地方使用它才应该成为通用组件。解构参数Destructure prop不要使用prop.{whatever}这样的代码了这是我在研究过程中的发现之一。所以在我做这些研究之前我的代码是这个样子的const myApp  (props) {///h1{props.title.heading}/h1onChange{props.onChange}}是的我知道上面的代码很难看。不过我已经想不起来上次这样写是什么时候的事了。现在我是这样写的。如果参数prop只有一层深我的代码是这个样子的const myApp  ({title, onChange}) {///Const {heading} titleh1{heading}/h1onChange{onChange}}如果它是嵌套的例如redux state我会这样写const myApp  ({chat:{messages}, settings:{themes}}) {///Const {sentMsg, recievedMsg} messagesConst {dark, light} themesh1 Theme color {dark}/h1li {sentMsg} /li}显然解构参数比用prop.title这样的写法看上去更漂亮、更干净。参数解构可以让你的React代码变得干净使其可读性更强并有助于再次清理。以上是我想在这篇文章和大家分享的内容。希望你能喜欢并从中学到一些有用的知识。原文https://dev.to/siradji/how-to-be-a-better-react-developer-3je9本文为 CSDN 翻译转载请注明来源出处。推荐阅读一文带你认识keepalived再带你通关LVSKeepalived那个分分钟处理 10 亿节点图计算的 Plato现在怎么样了“谷歌杀手”发明者科学天才 Wolfram数据库激荡 40 年深入解析 PostgreSQL、NewSQL 演进历程超详细一文告诉你 SparkStreaming 如何整合 Kafka 附代码可实践5分钟就能学会以太坊 JSON API 基础知识真香朕在看了