[译] 在使用 React 一年之后，我学到了这些重要的经验和教训

原文: The most important lessons I’ve learned after a year of working with React

翻译: joky （有稍做修改）

学习一项新技术总是会遇到很多挫折! 万事开头难，然后中间难，然后结尾难…（手动滑稽）。你可能会让自己遨游于各种教程或书籍的海洋中，去倾听别人提出的不同观点。每个人的观点似乎都是正确且完美的，这让我们很难判断我们选择的教程是否对我们有利。

在我们置身于海洋之前，我们需要了解这项新技术的基本概念。例如我们要开始学习React，我们就要站在 React 的角度进行思考，与 React 合二为一。

下面我会跟大家分享我这一年来从 React 中学到的经验和教训

持续关注 React 最新动向

如果你还记得 React 16.3.0 的发布公告，你就会知道，它带来了一些令人兴奋的功能。

以下是我收集到的部分 React 16.3.0 的功能：

• 官方 Context API

• createRef API

• forwardRef API

• 严格模式

• 组件生命周期更改

React 核心团队和社区贡献者们一直在努力改进着这项我们喜欢的技术。在 React 16.4.0 我们迎来了指针事件（Pointer Events），同时更多的功能也会随着时间的推移陆续在后续版本中推出：缓存、异步渲染以及其它未知功能（译者注: React 16.8.0 推出 Hooks）

所以，如果你想成为高手，你必须持续关注 React 社区中所发生的事

了解这些技术的运行原理以及它们为什么被开发出来。

了解你正在解决的问题，以及如何使开发变得更容易。

这会对你有很大的提升和帮助

大胆的将你的代码分割成小组件

React 是基于组件的。所以你应该利用这个概念，大胆的将代码分成小组件

一个简单的组件可以只由 4-5 行代码组成，在某些情况下，这完全没问题。

而且，别人可以很轻松的阅读并理解你的代码。

// 简单易懂，不是吗？

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 信息，仅此而已。

同样，如果你不想到处写 className，我建议使用样式化组件，这有助于提高可读性。

const Number = styled.h1`

  font-size: 36px;

  line-height: 40px;

  margin-right: 5px;

  padding: 0px;

`;

//..

<Container>

  <Number>{skipRatePre}</Number>

  <InfoName>Skip Rate</InfoName>

</Container>

如果你担心创建过多的组件会污染文件夹，那请重新考虑如何构建你的代码。我一直在使用分形结构，它很棒。

尝试使用更高级的技术

有时你可能会认为，你所掌握的知识还不够支撑你去学习更高级的技术。这种担心往往是多余的 - 你应该尝试去挑战新技术。

通过掌握更高级的技术，可以让你了解更多基础知识，以及如何让它们发挥更大的作用。

下面列出一些你可以探索的高级技术：

• 复合组件

• 高阶组件

• Render Props

• Smart/Dumb 组件

• 其它高级技术...

深入了解它们，你就会知道为什么使用以及何时使用它们，这会让你对 React 得心应手。

// 看上去很复杂？

// 其实一点也不难

render() {

  const children = React.Children.map(this.props.children,

   (child, index) => {

      return React.cloneElement(child, {

        onSelect: () => this.props.onTabSelect(index)

    });    

 });  

 return children;

}

同样，不要只是在个人项目或Demo中进行实验。要大胆的在工作中尝试这些新技术（当然，在允许的范围内）。

当你这么做时，你的领导或同事可能会产生质疑，这很正常。你需要做的就是用强有力的论据来捍卫你的工作和决定。你可以使用新技术用来解决现有的问题，让开发变得更简单，或者只是用来重构一些难以维护的代码。即便你的建议遭到拒绝，你也会学到更多。

不要让你的项目过于复杂

我们不应该过度炫技，编写花哨的代码。而应该脚踏实地。编写易于理解的代码。

如果你不了解 Redux，并且不知道它的用处。但是仅仅因为周围的人都在用它，你就想用它的话，建议你不要这么做。要有自己的主见，当别人质疑你时，你要挺身而出。

有时，你可能想利用最新的技术编写一些花哨的代码来向全世界炫耀你的技术。说实话，这是我作为一个初学者时的心态。但是随着时间的推移，你会明白，编写平实的代码更有用：

• 同事可以帮忙处理你的工作，你不用一个人负责 开发/修复Bug/测试 等全部工作

• 团队里的人可以很轻松的了解你的工作内容

• 当你休假时，同事可以接管你的工作，并能很轻松的完成

所以，如果您想获得团队成员的尊重，请提升你的水平。并在写代码时为团队而不是为你自己着想。这会让你成为一个受欢迎的团队成员。

重构，重构，再重构

由于项目经理会频繁的变更需求，所以你需要更频繁的更改和重构你的代码。别担心，这是一个正常的学习过程，没有什么问题是不能解决的。

同时，你要确保对你的软件进行了测试。不管是 冒烟测试、单元测试、集成测试、快照测试 - 大胆的使用它们

虽然测试可以节省大量的时间，但是或许你像很多人一样，认为测试是在浪费时间，但是请考虑这些好处：

1. 您不必向您的同事解释代码的工作原理

2. 您不必向您的同事解释代码为什么崩溃

3. 您不必为您的同事修复Bug

4. 您不必修复一个数周之后才发现的Bug

5. 你有时间做自己想做的事

总结

在过去的一年里，我的目标是提高我的 React 技术。

在这一年期间，我变得更强大并且对 React 的使用更得心应手 - 各种模式、范式、内部工作原理。我可以参与更高级别的讨论并向其他人传授我之前不敢接触的知识。直到今天，回想起过去一年的成长经历，我仍然感到激动和兴奋。

所以我建议大家问一下自己：“你喜欢你现在做的事吗？”

如果不喜欢，请寻找一项你可以谈论几个小时，学习一整晚，并感到快乐的事。

因为我们必须找到我们内心深处真正感兴趣的事，并坚持下去，直到成功。