使用 React 一年后，我学到的最重要经验

英文：Tomas Eglinskas   译文：hhking 

blog.hhking.cn/2018/09/12/mindset-lessons-from-a-year-with-react/

No, I didn’t wrote that, but I know it got your attention

开始学习一项新的技术时候令人很苦恼。你经常发现自己处于教程和文章的海洋里，还伴随着无数的个人观点。并且每个人都声称他们找到了“正确而完美的方式”。

这让我们需要去辨别：我们选择的教程是否会浪费时间。

在潜入这片海洋之前，我们必须要理解该技术的基本概念。然后我们需要建立基于技术的思维模式。如果我们开始学习 React，我们首先要以 React 的方式去思考。后面我们才可以开始将各种思维模式融为一体。

在这篇文章，我将从个人使用 React 的经历来介绍从中学到的一些关于这种思维的经验。我们将回顾工作时间和做个人项目的夜晚，甚至我在本地 JavaScript 活动中的演讲。

我们开始吧！

React 在不断发展，你需要与时俱进

如果你记得 16.3.0 版本的首次公告，你会想起当时大家是多么的激动。

下面是我们看到的一些变化和提升：

● Official Context API

● createRef API

● forwardRef API

● StrictMode

● Component Lifecycle Changes

React 的核心团队和所有的贡献者正在做着伟大的工作 —— 努力改进我们所喜爱的技术。在 16.4.0 版本我们看到了 Pointer Events。

毫无疑问更多的变化将会来临，这只是时间问题：异步渲染 (Async Rendering)、缓存 (Caching) 、version 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 的 class 选择器作为 class 名到处都是，我会推荐使用 styled components。这样可以提高可读性。

const Number = styled.h1`

  font-size: 36px;

  line-height: 40px;

  margin-right: 5px;

  padding: 0px;

`;

//..

<Container>

  <Number>{skipRatePre}</Number>

  <InfoName>Skip Rate</InfoName>

</Container>

如果你担心创建太多组件是因为太多文件会污染目录，那么重新考虑如何架构你的代码。我一直在使用分形结构 (fractal structrue)，它非常棒。

不要局限于基础 —— 转向高级

有时你可能会认为你对某些东西理解不够，不能转向高级应用。但是通常你不必过多担心 —— 接受挑战并证明自己的担心是错的。

通过掌握高级内容并推动你自己，你可以理解更多基础知识以及如何将他们运用在更大的项目上。

这里有许多模式可以尝试：

● 复合组件（Compound Components）

● 高阶组件 （High Order Components）

● Render Props

● Smart/Dumb 组件 （Smart/Dumb Components）

● 等等 (尝试去分析)

去研究他们，你会知道为什么使用它们、在哪里使用它们。用起 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. 你不需要修 3 周后才发现的 bug。

5. 你将有时间做你想做的事情。

这些都是有很多益处的。

如果你喜欢它，你会不断成长

在过去的一年里，我的目标是更好的使用 React。我想做一个关于它的演讲。我想其他人和我一样享受它。

我可以不停歇的整晚坐在那编程，观看各种演讲并享受每一分钟。

事实是，当你想要什么，你会发现，不知怎么的就会有人开始帮助你。在上个月，我为 200 人做了首次关于 React 的演讲。

在这过去的一年里，我变得更加强大，React 用得更加得心应手 —— 各种模式，范式和内部原理。我可以进行高级内容的讨论并向别人讲授我之前害怕接触的话题。

今天我依旧感到兴奋和享受，一如一年前的感受。

因此，我建议每个人都问问自己：“你是否喜欢你在做的事情？”

如果不喜欢，那就继续寻找你可以谈论几个小时、每晚学习并且使你开心的那个特别的事情。

因为我们必须找到最接近我们内心的东西。成功不能强迫，而是主动获取。

如果我可以回到一年前，那么在进行这个大的旅程之前，这些就是我想对自己说的。

原文发布时间为：2018-09-24

本文来自云栖社区合作伙伴“

前端大学

”，了解相关信息可以关注“

”