[译] 使用 React 一年后,我学到的最重要经验

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

作者:Tomas Eglinskas

images

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 行代码,在某些情况下,这完全没有问题。

这样做,可以让新人加入时,不需要花几天的时间去理解这些代码是如何运行的。

1
2
3
4
5
6
7
8
9
10
// isn't this easy to understand?
return (
[
<ChangeButton
onClick={this.changeUserApprovalStatus}
text="Let’s switch it!"
/>,
<UserInformation status={status}/>
]
);

你不必让组件都包含复杂的逻辑。它们可以只当视觉组件。如果这样可以提高代码的可读性和方便测试,并减少代码的“坏味道”,那么对团队的每个人来说都是个伟大的胜利。

1
2
3
4
5
6
7
8
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。这样可以提高可读性。

1
2
3
4
5
6
7
8
9
10
11
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 你会感觉更加得心应手。

1
2
3
4
5
6
7
8
9
10
11
// 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 用得更加得心应手 —— 各种模式,范式和内部原理。我可以进行高级内容的讨论并向别人讲授我之前害怕接触的话题。

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

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

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

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

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

Thank you for reading!

点击赞赏,您的支持将鼓励我继续创作!