微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

我从React身上得到的那些经验教训

2018-06-11 18:30 胡红星 译
作者|Tomas Eglinskas
译者|胡红星
编辑|覃云

开始使用新技术可能会非常麻烦。 通常会有大量的教程让你无从下手。 每一篇教程都说自己是"正确完美的方式"。

这让我们质疑选择的教程是否值得看下去。

在开始之前,必须了解技术的基本概念。 那么我们需要开发一种基于技术的思维模式。 如果开始学习 React,首先必须以 React 的思维方式来思考。

在本文中,我将通过个人项目,本地 JavaScript 分享演讲来介绍一些我从 React 中学到的一些思维方式。

React 在发展,请随时保持更新

还记得 16.3.0 版本的初始公告吗?当时每个人都很兴奋。

以下是我们收到的一些更改和改进:

  • 官方上下文接口

  • createRef 接口

  • forwardRef 接口

  • 严格模式

  • 组件生命周期变更

React 核心团队和所有贡献者都在努力改进我们都喜欢的技术面。 在 16.4.0 版本中,我们收到了指针事件。

进一步的变化肯定会到来,而这只是一个时间问题:17.0.0 给我们带来了异步渲染,缓存,以及其他许多尚未公布的内容。

所以如果你想成为顶尖人物,那必须了解社区中发生的事情。

知道事情是如何工作的以及为什么要开发这个功能点。了解哪些问题正在得到解决,以及如何使开发更容易。了解了这些问题会有很大帮助。

将代码分割为更小的模块

React 是基于组件的。所以应该充分利用这个概念,把视图分成一个个尽可能小的组件。

有时候一个简单的组件可以由 4-5 行代码组成,在某些情况下,这是完全正确的。

这样有助于新人尽快地熟悉项目。

// isn't this easy to understand?
return (
  [
   <ChangeButton
    onClick={this.changeUserApprovalStatus}
    text="Let’s switch it!"
   />,
   <UserInformation status={status}/> 
  ]
);

我们不必让组件有复杂的内置逻辑。 组件只用来做视图呈现。 如果这样改进了代码的可读性和测试性,让代码更清爽,这对团队中的每个人都是一个巨大的胜利。

import ErrorMessage from './ErrorMessage';
const NotFound = () => (
  <ErrorMessage
    title="Oops! Page not found."
    message="The page you are looking for does not exist!"
    className="test_404-page"
  />
);

上面的例子中,属性是静态的。 这是一个纯粹的组件,它负责网页的错误消息“Not Found”,仅此而已。

另外,如果不喜欢将 CSS 类作为类名称,推荐使用样式化组件。 这可以提高可读性。

const Number = styled.h1`
  font-size: 36px;
  line-height: 40px;
  margin-right: 5px;
  padding: 0px;
`;
//..
<Container>
  <Number>{skipRatePre}</Number>
  <InfoName>Skip Rate</InfoName>
</Container>

如果担心创建了太多组件造成了文件夹污染,请重新考虑如何构建代码。 我一直在使用分形结构,它很棒。

不要只坚持基础用法,向高级进阶

有时你可能会认为需要对某个东西有足够的了解才能向高级进阶。 通常不应该有太多顾虑,打破禁锢,接收挑战。

强行让自己去了解高级知识点,可以对基础知识有更多的认识并理解这些基础知识是如何构建起强大功能的。

有很多需要探索的模式:

  • 复合组件

  • 高阶组件

  • 渲染属性

  • 智能 / 哑元组件

  • 其他

将他们都探索一遍,你会知道如何使用,应该在哪使用这些组件,React 的使用会变得更加舒适。

// looks like magic?
// it's not that hard when you just try
render() {
  const children = React.Children.map(this.props.children,
   (child, index) => {
      return React.cloneElement(child, {
        onSelect: () => this.props.onTabSelect(index)
    });    
 });  
 return children;
}

另外,不要害怕在工作中尝试新的东西 - 在一定范围内! 不要只对个人项目进行实验。

人们会有质疑,这很正常。而你的任务是以强有力的论据来捍卫你的工作和决定。

你的目标应该是解决现有问题,进一步简化开发。 即使你的建议被拒绝了,也是值得鼓励的。

不要让事情过分复杂

这听起来像是反驳的论点,但这不同。 在生活中,总是需要保持平衡,这种平衡无处不在。 我们不应该炫耀过度工程化。 应当切实可行。 编写易于理解和实现其目的的代码。

千万不要因为其他人都在使用 Redux 而你并不了解其作用就非得使用。 要有自己的认识,当别人在推动你去做不正确的事,勇敢站出来说不!

有时候你可能会认为,通过利用最新的技术和编写复杂的代码,就可以向别人宣称:“我已经不是菜鸟,正在成为一名中 / 高级开发者。 看看我做的!“

说实话,这也是我刚做开发者时候的心态。 但是随着时间的推移,你会明白,不是因为炫技写出来的代码更容易处理。

  1. 同事可以处理你的项目,你不是唯一负责开发 / 修复 / 测试的人员。

  2. 通过长时间的会议,团队可以理解别人的做法。 几分钟就足以讨论。

  3. 当同事出去度假两周,你可以接管他们的任务。 并且不需要 8 个小时来完成任务,1 个小时就够了。

人们尊重让他人生活更轻松的人。 因此,如果想要获得尊重,提高队伍水平,以团队为目标进行改进,而不仅仅是让自己更轻松。

重构,重构再重构

你脑子里会经常改变实现需求的思路,然而产品经理变更需求却更频繁。其他人会审阅你的代码,你自己也会审阅自己的代码。综合这些因素,你的代码会修改很多很多次。

但别担心,这是一个自然的学习过程。 没有错误,我们无法改进。

跌倒的次数越多,就越容易恢复。

但这里有一个提示:确保测试当前软件。 冒烟测试,单元测试,整合,快照 - 不要回避任何一项。

如果你像许多人一样认为测试浪费时间,试着这样想想。

  1. 不必跟同事解释项目是如何工作的。

  2. 不必跟同事解释项目为何出错。

  3. 不必为同事修复 bug。

  4. 不必修复项目上线后的 bug。

  5. 有更多的时间去做你想做的事情。

这些都是非常大的好处。

如果你喜欢 React,你会进步

在过去的一年中,我的目标是在 React 中变得更好。 让别人跟我一起享受。

我可以不停地编写代码,观看各种会谈并享受它的每一分钟。

事情是,如果你想要的东西,不知何故,每个人都开始帮助你。 上个月,我给大约 200 人做了一次 React 分享。

在这一年期间,我对 React 的使用更熟练 - 各种模式,范例和内部原理。 现在我可以进行高级分享,并与其它人讨论以前不愿接触的知识点。

今天,我仍然感受到一年前感受到的兴奋和享受。

所以大家不妨问一下自己:“喜欢自己目前做的吗?”

如果没有,继续寻找,去寻找那个可以谈论几个小时,为之昼夜学习都不觉疲倦的东西,快乐会让你坚持下去。

因为必须找到离我们想法最近的东西。成功不能被强迫,只能被实现。

如果能回到一年前,我会告诉自己为这次重大旅程做好准备。

  原文链接

https://medium.freecodecamp.org/mindset-lessons-from-a-year-with-react-1de862421981

前端之巅

「前端之巅」是 InfoQ 旗下关注大前端技术的垂直社群。紧跟时代潮流,共享一线技术,欢迎关注。


前端之巅

InfoQ大前端技术社群

 活动推荐

GMTC全球大前端技术大会携手顶级共创伙伴:APICloud企业互联网化生态平台,历时半年筹备,为大家梳理了目前大前端领域的最新动态,并邀请到了来自Google、Twitter、Instagram等国外一线前端专家前来分享他们的前端前沿技术和最佳实践,更有iOS社区大神Mattt、Apollo GraphQL负责人等大牛的助阵,可谓干货满满,不容错过。

目前大会倒计时门票热销中,团购更优惠,购票咨询:18514549229(同微信)戳阅读原文或识别下图二维码,了解更多干货详情!


 
前端之巅 更多文章 引擎V8推出“并发标记”,可节省60%-70%的GC时间 为什么前端开发这么不稳定? 你需要了解的23种JavaScript设计模式 Node之父ry发布新项目deno:下一代Node 谷歌AMP和百度MIP,你选哪个?
猜您喜欢 淘宝技术部喊你来推荐,赢“享爱”大礼包!~ 监控可视化产品OneOaaS Monitor 抓包,只为让DBA过的更开心 2018年让你的技术学习快人一步! TiD2018——新一代软件精益实践