翻译：在使用React工作一年后，我学到了最重要的经验教训

Peipei Wong 8月 10, 2018

前

原文链接
在M站经常能看到优秀的文章，昨天看到的一篇文章今天在看公众号推荐的文章中，就看到了这篇文章的译文。我看英文文章也是边看边翻译，阅读后的记忆不深，有时候还需要再看一遍，萌发了翻译的念头，先尝试一下！

使用react工作一年后，我学到了最重要的一课

我不想加这张图片，但是我知道它会引起你的注意(hhh 确实很引人注意)🔪

从一门新技术开始可能会得常麻烦，你经常发现你自己处于教程和文章的海洋中，后面是数以百万计的个人观点，每一个人都说他们找到了正确而完美的解决办法。

这些会让我们纠结我们选择的教程是否是浪费时间。

在去知识的海洋中之前，我们必须理解技术的基本概念。接着我们需要开发一种基于技术的思维模式。如果我们开始学习react，我们首先对react进行思考。只有在以后我们才开始将各种心态融合成一体。

在这篇文章中，我将从我个人使用react的经历中介绍我从这方面学到一些经验教训。我们在白天工作，晚上写个人的项目，甚至会谈一些我在本地JavaScript活动。

那么，就让我们开始吧！

react正在发展，你必须是更新到最新版本

如果你还记得版本16.3.0的初始公告，你会记得每个人对此都很兴奋。

这是新版的的一些变化和改进：

Official Context API
createRef API
forwardRef API
StrictMode
Component Lifecycle Changes

react core团队和所有的贡献者都在你鼓励的改进我们喜欢的技术。在版本16.4.0中，我们看到了Pointer Events。

肯定还有更近一步的改变，这只是时间的问题，异步渲染、缓存版本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"
  />
);

在上面的例子中，属性是静态的。所以我们可以有一个负责网站错误信息的pure component：NOTFound，仅此而已。

另外，如果你不喜欢在任何地方都使用css类作为类名，我建议使用样式化组件。这可以提高可读性。

如果害怕创造一个新的组件而污染你的文件夹，请重新思考如果构建代码。我一直在使用fractal structure，它很棒。

不要拘泥于基础-要变的先进

有时你可能认为你不够了解一些东西而转向高级的东西。但通常你不必过于担心：接受挑战并证明自己错误。

通过掌握高级的主题来提高自己，你可以理解更多基础的东西并且如何将它们应用于更大的事情上。

你可以去探索以下很多模式：

Compound Components
High Order Components
Render Props
Smart/Dumb Components
many others (try out Profiling)

探索他们，你将会知道使用它们的原因和地方。你会对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;
}

并且，你不要害怕在你的工作中尝试一些新的事物，当然，在某些范围内。不要只限于在私人的项目中试验。别人可能会提问问题，这些都是正常的。你的任务是用强有力的论据来捍卫你的工作和决定。

你的目标应该是解决现有问题，进一步开发，或者只是提高代码质量（原文是：or just clean some pasta in the code. 我找了pasta code的意思，它与以下的名词有关：SpaghettiCode、RavioliCode、LasagnaCode），即使你的建议被拒绝了，你应该回家去了解，而不是沉默。

不要过于复杂

这个听起来像一个反驳论点，但是它有所不同。在生活中，无处不在，我们必须保持平衡。我们不应该过于炫耀（over-engineer to show off）。我们必须务实。编写容易理解并实现其目的的代码。

如果你不需要redux，但是你想要使用它因为每个人都在不知道它的真正目的而使用它，不要这样，提出意见，如果别人推你，不要害怕站起来。

有时候你也许会想使用最新的技术编写复杂的代码，你就可以向世界说：我不是一个初学者，我正在成为一个中级，看看我能做些什么。

说实话，这是我在开发之旅开始的心态。但是随着时间的推移，你会理解不带有炫耀编写代码，因为‘它能工作’是最容易使用。

同事可以处理你的项目，你不是唯一负责开发、修复、测试的人。
团队可以在不参加长时间的会议了解其他人的所作所为。几分钟就足够用来讨论了。
当你的同事出去度假两周时，你可以接管他们的任务，而且你不需要工作8小时，因为它可以在一小时内完成。
人们尊重让别人生活更轻松的人。

因此，如果您的目标是获得尊重，提升排名并进行改进，则需要为团队而不是自己编写代码。你将成为每个人最喜欢的团队成员。

重构，重构和重构 - 这是正常的

尽管项目经理会经常改变他们的想法，你改变主意十几次。其他人会批评你的工作，你也会批评它。因此，你必须多次改变你的代码。不要担心，这是一个自然的学习过程。没有失败和错误你不能提高。我们倒下的次数越多，恢复起来就越容易。

但这里有一个提示：确保测试当前的软件。 Smoke、unit、integration、snapshot，不要害羞使用它们。

每个人都面临或将面临这个场景：测试可以节省宝贵的时间。如果你像许多人一样认为他们浪费时间，那就试着思考一下。

你不必和你的同事一起解释事情是如何运作的。
你不必和你的同事一起解释为什么事情会破裂。
您不必为您的同事修复错误。
您不必修复3周后发现的错误。
你将有时间做你想要的东西。

这都是非常有益处的。

如果你喜欢它，你会茁壮成长。

在过去的一年里，我的目标是在React上做得更好。我想谈谈它。我希望别人和我一起享受。我可以不停地坐着整夜编码，看着各种各样的谈话，享受它的每一分钟。

问题是，如果你想要什么，不知怎的，每个人都开始帮助你。上个月，我面对200人发表了我的第一次React演讲。

在这一年期间，我变得更强大，更舒适地面对react的多种模式、范式和内部运作。我可以进行高级讨论并向其他人讲授我不敢触及的话题。而今天我仍然感受到一年前我所感受到的同样的兴奋和享受。

所以我建议每个人都问自己：“你喜欢你做什么吗？”，如果没有，继续寻找你可以谈论几个小时的特殊的一块，每晚学习，变得开心。因为我们必须找到最接近我们心灵的东西。不能强迫成功，它必须实现。

如果我可以回到一年的时间，那么在我前面的旅程之前，我会为自己做些准备。

谢谢你的阅读！

如果你觉得这篇文章对你有帮助，请鼓掌。

后

不尝试不知道！翻译过程中，我只能看懂一句话表达的意思，但是翻译出来需要稍微润色一下。对于我看不懂的句子，我尝试google translate，效果还是很好的😂。对于里面的一些通用名词我还是不太了解：例如 pasta code、code smell，需要我再去查一遍，有时候可能自己也是看的懵里懵懂的。
第一次翻译之旅真的是太累了，我需要大量的时间去找一些专业名词，进而才会理解作者要表达的意思，但有时候翻译出来还是很晦涩。这次真真正正的感受到翻译者的不易，感谢我曾经看过的翻译文章的作者，也深深了解到我司编辑的压力。