我作为ReactJS / React Native Developer犯的错误。

在与ReactReact NativeRedux和Flux合作近3.5年之后我决定分享我在初学者时犯的错误。

您会在网上找到很多优秀的图书馆。 如果您的布局设计是根据这些库进行的,那么这些将非常有用。 但是,如果您有特殊的设计,则需要对每个组件进行很多自定义。

当然,您可以将库组件包装在组件中,并进行相应的自定义。

但是从我的角度来看,使用View,Text和RN,React的其他模块来构建自己的组件更容易,也更有价值。 为什么呢? 您将学习如何使用React和React-Native。 此外, 您不依赖于外部模块或库。

通常,在模拟器上对组件进行布局设计时,我们会编写内联样式,并认为一旦可行,我们会将其移动到单独的模块中。 但是不幸的是,它永远不会发生。 至少我团队中没有人这样做。 最后,我们编写了内联样式。

2.现在,创建一个新变量,例如, employeeCopy并为其分配员工对象。 更新employeeCopy.名称和角色employeeCopy.

3.当您更改(更改) employeeCopy ,您知道employee会自动进行更改吗?

上面的示例说明了为什么突变会令人恐惧-当您更改一段代码时,另一段代码可能会在您不知情的情况下更改。

结果,您将获得难以跟踪和修复的错误。 因此,请始终使用不变性

在计划应用程序时,您会考虑很多布局。 更少-关于数据处理。 一个大错误。

react,react-native中有很多丰富的数据处理库,例如redux,flux,mobx 。 这些数据存储可帮助我们正确存储数据。 如果正确计划了数据存储,则它是用于管理应用程序数据的强大工具。 如果没有的话,它会使所有事情搞砸。

因此,请务必仔细计划存储,并给予与布局同样重要的存储。

为了在redux的帮助下验证表单,我需要在reducer中创建动作,动作类型和单独的字段。 这真的很烦人。

因此,我决定仅在组件内部的状态帮助下执行此操作。 它使我免于编写和管理动作以及化简器中的数据。

有时您想节省时间-因此您使用外部模块。 通常,模块具有良好的文档,您可以从中获取信息并使用。

但是有时这些模块可能会损坏,或者它们的工作与文档中所提到的不一致。 这就是为什么您需要阅读代码。 您将了解问题所在。 您可能会使用不正确或模块损坏。

最重要的是,如果您开始阅读模块代码,您将学习如何构建自己的模块。

每个开发人员都有不同的编码风格。 一个将花括号与函数名放在同一行,而其他人将花括号写在新行上。 一些用于在CamelCase中命名变量,其他用于在SnakeCase或PascalCase中命名。 没有对与错。 这只是一个偏好问题。

当两个或多个开发人员开始处理放置的项目时,您将开始注意到代码之间的不一致。 为了避免这种不一致,Eslint可以营救我们。

这就是ESLint工作的原因…

  • 您的代码(和您团队的代码)将更加一致
  • 查找错误和错误变得更加容易。
  • 代码可维护性得到提高。
  • 测试新功能时耗时更少。

这让你…

压力较小生产力更高的开发人员。 ESLint是一种增强绒毛并使您感觉像超级英雄的工具。

如果布局完全不同,最好将它们分成不同的文件,然后可以将重复的代码移到实用程序或帮助程序中。

在render方法中使用bind和arrow函数是非常糟糕的方法,它导致–

  (例如 this.setName(text)}> /) 

要么

  (例如 /) 

一种。 每当调用render方法时,它总是创建新函数。

b。 在render方法中使用bind也将在每个渲染中创建不同的引用。

为了解决这个问题,让我们看一下下面的方法-

一种。 我们应该始终将函数绑定到构造函数中,因为构造函数仅调用一次,并且在每次渲染之后(而不是创建新对象)唯一的引用将通过。

b。 使用如下所示的匿名函数。

 
导出默认类示例扩展了React.Component {

状态= {名称:''}
setName = {name)=> {this.setState({name}}} render(){
返回(



);
}
}

作为一个初学者,我不知道什么是单元测试用例以及为什么我们应该为代码编写单元测试用例。 因此,当我开始编写单元测试用例时,它可以节省大量时间,并有助于快速调试和修复错误。

我想分享的好处很少

  1. 我的代码质量得到了改善。
  2. 错误很容易识别
  3. 提供文件

React / React Native是很棒的技术。 一旦开始使用React / React-Native,您将犯错,请务必学习。

谢谢阅读。

干杯🍹🍻! 快乐编码😀