react实战课程

by Tomas Eglinskas

由Tomas Eglinskas

在使用React一年后，我学到的最重要的课程 (The most important lessons I’ve learned after a year of working with React)

Starting out with a new technology can be quite troublesome. You usually find yourself in a sea of tutorials and articles, followed by millions of personal opinions. And every single one states that they found the “right and perfect way.”

开始使用新技术可能会很麻烦。 通常，您会在大量的教程和文章中发现自己，然后是数百万的个人观点。 每个人都说他们找到了“正确而完美的方式”。

This leaves us debating whether our chosen tutorial will be a waste of time or not.

这使我们争论我们选择的教程是否会浪费时间。

Before diving into the ocean, we must understand the underlying concepts of a technology. Then we need to develop a technology-based mindset. If we are starting to learn React, we first have to think in React. Only later on we can start mixing various mindsets into one.

在深入海洋之前，我们必须了解技术的基本概念。 然后，我们需要发展基于技术的思维方式。 如果我们开始学习React，我们首先必须考虑React。 直到后来，我们才可以开始将各种思维方式融合在一起。

In this article we’ll be covering some lessons I learned regarding this mindset from my personal experiences with React. We’ll go over the days at work and nights with personal projects and even the talk I gave at a local JavaScript event.

在本文中，我们将介绍一些我从React的个人经验中学到的关于这种思维方式的课程。 我们将在白天和晚上进行个人项目，甚至是我在本地JavaScript活动中所做的演讲。

So let’s go!

所以走吧！

React不断发展，因此您必须保持最新 (React is evolving, so you must be up to date)

If you remember the initial announcement of version 16.3.0, you’ll remember how excited everyone was.

如果您还记得版本16.3.0的最初发布，您会记得每个人都很兴奋。

Here are some of the changes and improvements we received:

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

• Official Context API
  官方上下文API
• createRef API
  createRef API
• forwardRef API
  forwardRef API
• StrictMode
  严格模式
• Component Lifecycle Changes
  组件生命周期变更

The React Core team and all the contributors are doing a great job trying to improve the technology we all adore. And in version 16.4.0 we received Pointer Events.

React Core团队和所有贡献者都在努力改善我们都喜欢的技术方面做得很好。 在16.4.0版中，我们收到了指针事件 。

Further changes are surely coming, and it’s only a matter of time: Async Rendering, Caching, version 17.0.0 and many others not yet known.

当然，进一步的更改即将到来，这只是时间问题：异步渲染，缓存，17.0.0版和许多其他尚不为人所知。

So if you want to be at the top, you have to be up to date with things that are happening in the community.

因此，如果您想成为高层，就必须了解社区中正在发生的事情。

Know how things work and why they are being developed. Learn what problems are being solved and how development is being made easier. It’ll really help you out.

了解事情如何运作以及为什么要开发它们。 了解正在解决的问题以及如何使开发变得更容易。 它将真正帮助您。

不要害怕将代码拆分成较小的夹头 (Don’t be afraid to split your code into smaller chucks)

React is component-based. So you should leverage this concept and not be afraid to split bigger pieces into smaller ones.

React是基于组件的。 因此，您应该利用这个概念，不要害怕将较大的部分拆分为较小的部分。

Sometimes a simple component can be made of 4–5 lines of code, and in some cases, it is totally fine.

有时，一个简单的组件可以由4-5行代码组成，在某些情况下，它完全可以。

Make it so that if a new person jumps in, they won’t need days to understand how everything works.

做到这一点，这样，如果一个新人跳了进来，他们将不需要几天的时间来了解一切。

// isn't this easy to understand?

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

You don’t have to make components that all have complex logic built-in. They can be only visual. If this improves code readability and testing, and reduces further code smells, it’s a great win for everyone on the team.

您不必制作所有内置了复杂逻辑的组件。 它们只能是视觉的。 如果这可以提高代码的可读性和测试能力，并减少进一步的代码气味，那么这对于团队中的每个人都是一个巨大的胜利。

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"  />);

In the above example, the properties are static. So we can have a pure component which is responsible for the website’s error message Not Found, and nothing more.

在上面的示例中，属性是静态的。 因此，我们可以使用一个纯粹的组件负责网站的错误消息“ Not Found ，仅此而已。

Also, if you don’t like having CSS classes as class names everywhere, I would recommend using styled components. This can improve readability quite a lot.

另外，如果您不喜欢到处都有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>

If you’re afraid of creating more components because of polluting your folders with files, rethink how you structure your code. I have been using the fractal structure and it’s awesome.

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

不坚持基础-变得先进 (Don’t stick to the basics — become advanced)

You might think sometimes that you don’t understand something enough to move on to the advanced stuff. But often times you shouldn’t worry about it too much — take up the challenge and prove yourself wrong.

有时您可能会认为您不了解某些内容，无法继续学习高级内容。 但是，通常情况下，您不必太担心–接受挑战并证明自己做错了。

By taking up the advanced topics and pushing yourself, you can understand more of the basics and how they are used for bigger things.

通过学习高级主题并推动自己发展，您可以了解更多基础知识以及如何将它们用于更大的事情。

There are many patterns which are yours to explore:

您可以探索许多模式：

• Compound Components
  复合成分
• High Order Components
  高阶组件
• Render Props
  渲染道具
• Smart/Dumb Components
  智能/哑巴组件
• many others (try out Profiling)
  其他许多(尝试分析)

Explore them all, and you’ll know why and where they are used. You’ll become more comfortable with React.

浏览所有内容，您会知道为什么使用它们以及在哪里使用它们。 您将对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;}

Also, don’t be afraid to try something new at your work — within certain boundaries, of course! Don’t just experiment on personal projects.

另外，不要害怕在工作中尝试一些新事物-当然，在一定范围内！ 不要只是尝试个人项目。

People will ask questions, and that is normal. Your task is to defend your work and decisions with strong arguments.

人们会问问题，这很正常。 您的任务是以有力的论据捍卫您的工作和决策。

Your aim should be to solve an existing problem, make further development easier, or just clean some pasta in the code. Even if your suggestions are rejected, you’ll go home knowing more than by sitting silent.

您的目标应该是解决现有问题，使进一步开发变得容易，或者只是清理代码中的某些意大利面。 即使您的建议被拒绝，您也可以坐在家里而不是沉默。

不要让事情过于复杂 (Don’t over-complicate things)

This might sound like a counter argument, but it’s different. In life, and everywhere, we must have balance. We shouldn’t over-engineer to show off. We must be practical. Write code which is easy to understand and fulfills its purpose.

这听起来像是一个反论点，但是却有所不同。 在生活中，在任何地方，我们都必须保持平衡。 我们不应该过度设计来炫耀。 我们必须务实。 编写易于理解并实现其目的的代码。

If you don’t need Redux, but you want to use it because everyone uses without knowing it’s true purpose, don’t. Have an opinion and don’t be afraid to stand up for yourself if others push you.

如果您不需要Redux，但又想使用它，因为每个人都在使用它而不知道它的真正目的，那就不要。 有意见，不要怕别人推你而站起来。

Sometimes you might think that by leveraging the latest technologies and writing complex code you’re saying to the world:“I’m not a junior, I am becoming a mid/senior. Look what can I do!”

有时您可能会认为，通过利用最新技术并编写复杂的代码，您对世界说的是：“我不是大三，我正在成为中高级。 看我该怎么办！”

To be honest, that was my mindset in the beginning of my developer journey. But over time you understand that the code which was written without showing off or because “it works” is easier to live with.

老实说，这就是我开发者旅程之初的想法。 但是随着时间的流逝，您会了解编写的代码不会炫耀，也不会因为“有效”而易于使用。

1. Co-workers can work on your projects and you’re not the only person who’s responsible for developing / fixing / testing <insert task>.

   同事可以从事您的项目，而您不是唯一负责开发/修复/测试＆ lt; insert tas k>的人。

2. The team can understand what others did without sitting through a long meeting. A couple of minutes is enough to discuss.
   团队无需长时间开会即可了解其他人的所作所为。 几分钟就足够讨论了。
3. When your colleague goes out for a two week vacation, you can take over their task. And you won’t have to work on it for 8 hours, because it can be done in an hour.
   当您的同事出去度假两个星期时，您可以接管他们的任务。 您无需花8个小时就可以完成它，因为它可以在一小时内完成。

People respect people who make other people’s lives easier. Thus if your goal is to gain respect, move up the ranks, and improve, aim to code for the team and not yourself.

人们尊重使别人的生活更轻松的人。 因此，如果您的目标是赢得尊重，晋升并提高自己，则应为团队而非自己编写代码。

You’ll become everyone’s favorite team player.

您将成为每个人最喜欢的团队合作者。

重构，重构和重构-这是正常的 (Refactor, refactor and refactor — it’s normal)

You will change your mind dozens of times, although the project manager will change theirs more often. Others will criticize your work, and you will criticize it. As a result, you’ll have to change your code many, many times.

您会改变主意数十次，尽管项目经理会更频繁地改变主意。 别人会批评您的工作，您也会批评它。 结果，您将不得不多次更改代码。

But don’t worry, it’s a natural learning process. Without faults and errors we cannot improve.

但是不用担心，这是一个自然的学习过程。 没有错误和错误，我们就无法改善。

The more times we fall down, the easier it becomes to get back up.

我们跌倒的次数越多，就越容易恢复。

But here’s a hint: make sure you test your current software. Smoke, unit, integration, snapshot — don’t be shy of them.

但是，这里有一个提示：请确保您测试当前的软件。 冒烟，单元，集成，快照-不要害羞。

Everyone has faced or will face a scenario when a test could have saved precious time.

每个人都面临或将要面对一种情况，那就是测试可以节省宝贵的时间。

And if you, like many people, think that they are a waste of time, just try thinking a little different.

而且，如果您像许多人一样认为自己在浪费时间，请尝试一些不同的想法。

1. You won’t have to sit with your colleague explaining how things work.
   您无需与同事坐在一起解释事情的运作方式。
2. You won’t have to sit with your colleague explaining why things broke.
   您无需与同事坐在一起解释事情为什么破裂。
3. You won’t have to fix bugs for your colleague.
   您不必为同事修复错误。
4. You won’t have to fix bugs which were found after 3 weeks.
   您无需修复3周后发现的错误。
5. You will have time to do stuff you want.
   您将有时间做自己想做的事情。

And these are quite big benefits.

这些都是很大的好处。

如果你喜欢它，你会蓬勃发展 (If you love it, you’ll thrive)

Over the previous year, my goal was to get better at React. I wanted to give a talk about it. I wanted others to enjoy it with me.

去年，我的目标是在React上变得更好。 我想谈一谈。 我希望别人和我一起享受它。

I could sit all night coding non-stop, watching various talks and enjoying every minute of it.

我可以整夜不停地编写代码，观看各种演讲并享受每一分钟。

The thing is, if you want something, somehow everyone starts helping you. And last month, I gave my first React talk to a crowd of 200 people.

问题是，如果您需要某些东西，每个人都会以某种方式开始帮助您。 上个月，我对200人进行了第一次React演讲。

During this year period I became stronger and more comfortable with React — the various patterns, paradigms, and inner workings. I can have advanced discussions and teach others about topics that I was afraid to touch.

在这一年中，我变得更加坚强，对React感到更加舒适-各种模式，范例和内部工作方式。 我可以进行高级讨论，并教别人一些我怕碰到的话题。

And today I still feel the same excitement and enjoyment I felt a year ago.

今天，我仍然感到与一年前一样的激动和享受。

Therefore I would recommend everyone to ask themselves: “Do you enjoy what you do?”

因此，我建议大家自问：“您喜欢自己的工作吗？”

If not, continue looking for that special piece which you can talk about for hours, learn about every night, and be happy.

如果没有，继续寻找您可以谈论几个小时的特殊作品，每晚学习并快乐。

Because we have to find something that is closest to our hearts. Success cannot be forced, it must be achieved.

因为我们必须找到最贴近我们内心的东西。 成功不能被强迫，它必须被实现。

If I could go back a year in time, this is what would I say to myself to prepare before the big journey ahead.

如果我能回到过去的一年，这就是我要对自己说的话，准备在前进的大路上。

Thank you for reading!

感谢您的阅读！

If you found this article helpful, ???.

如果您发现这篇文章有帮助，???。

翻译自: https://www.freecodecamp.org/news/mindset-lessons-from-a-year-with-react-1de862421981/

react实战课程