软件开发遵循原则_8每个网站开发人员都应遵循的最佳做法

软件开发遵循原则

Are you a frontend developer who uses React every day to build awesome user interfaces?

您是每天使用React构建强大的用户界面的前端开发人员吗？

Do you want to keep your code always in a good shape no matter how your project grows?

无论您的项目如何增长，您是否都希望代码始终处于良好状态？

Then you should follow 8 React best practices below.

然后，您应该遵循以下8个React最佳实践。

1.掌握JavaScript的重要概念 (1. Master The Important Concepts of JavaScript)

You can jump directly to React as long as you have a little basic JavaScript knowledge. But to work on a fluent level, you need to understand some important JavaScript concepts.

只要您有一点JavaScript基本知识，就可以直接跳到React。 但是要流畅地工作，您需要了解一些重要JavaScript概念。

What concepts? Check out the story below:

什么概念？ 看看下面的故事：

2.仅在必要时发表评论 (2. Only Comment If You Have To)

What do you think about the code below:

您如何看待以下代码：

console.log(error); // Handle error

I see nothing but a ridiculously nonsensical comment. The rule is do not write unnecessary comments like that.

除了荒唐的荒谬评论外，我什么也看不到。 规则是不要写出不必要的注释。

You think leaving comments everywhere in your code will show that you care about what you’re doing and it’ll help others easy to understand your logic. It doesn’t. Not only it makes your code messy but also you increase the odds of conflicts.

您认为在代码中随处可见注释将表明您在乎自己在做什么，并且将帮助其他人轻松理解您的逻辑。 没有。 这不仅使您的代码混乱，而且增加了冲突的几率。

So, only comment if it’s really necessary.

因此，仅在确实必要时评论。

3.使您的组件小巧并切合实际 (3. Keep Your Components Small and to The Point)

Just like a function, you can write a big component that does a lot of things. However, It does more harm than good. When an issue occurs, you will invest a lot of time to debug. As your application grows big, things probably are out of control.

就像一个函数一样，您可以编写一个做很多事情的大型组件。 但是，这样做弊大于利。 发生问题时，您将花费大量时间进行调试。 随着应用程序的增大，事情可能会失控。

A good component should be small and do one task or a handful of tasks that it means to do. If you can do that, your project will be easier to maintain and extend as it grows big (it will).

一个好的组件应该很小，并且可以完成一个任务或少量任务。 如果您能够做到这一点，则随着项目的增长(它会)，您的项目将更容易维护和扩展。

The best benefit I can see of creating small components is reusability. You don’t want to write the same code over and over again, right? If you tend to create big components, chances are you will write components that already exist.

我看到的创建小型组件的最大好处是可重用性。 您不想一遍又一遍地写相同的代码，对吗？ 如果您倾向于创建大型组件，则可能会编写已经存在的组件。

Don’t give any opportunity for your components to grow big, break them up into small ones.

不要给组件增加任何机会，将它们分解为小组件。

4.有状态与无状态组件 (4. Stateful vs Stateless Components)

Don’t use stateful and stateless components unconsciously. Just because you want to use the stateful component for the User component doesn’t mean you should do it. You have to understand the reasons behind it to take the most advantage of it.

不要无意识地使用有状态和无状态组件。 仅仅因为您要对User组件使用有状态组件并不意味着您应该这样做。 您必须了解其背后的原因才能充分利用它。

Simply put, stateful components have state while the others don’t. That means the stateful components store all the information about the component’s state and the stateless components have no memory, they just print out the data you pass to them.

简而言之，有状态组件具有状态，而其他组件则没有。 这意味着有状态组件将存储有关组件状态的所有信息，而无状态组件则没有内存，它们只会打印出您传递给它们的数据。

Take a look at the example below:

看下面的例子：

// Stateful component
class User extends React.Component {
  constructor() {
    super()
    
    this.state = {
      users: []
    };
  }  render() {
    return (
      <UserList users={this.state.users} />
    );
  }
}// Stateless component
const UserList = ({users}) => {
  render() {
    return (
      <ul>
        {users.map(user => {
          return <li>user</li>;
        })}
      </ul>
    );
  }
}

So when you should you either a stateful component or a stateless one?

因此，什么时候应该使用有状态组件还是无状态组件？

If you just want to render plain data, go for stateless components. Of course, you can also use stateful components for the task. However, it’s not worth it.

如果您只想呈现纯数据，请使用无状态组件。 当然，您也可以将有状态组件用于任务。 但是，这不值得。

Stateful components are designed for a little more complex usages like handling component’s state, logic, and transforming data (for stateless components usage).

有状态组件被设计用于更复杂的用途，例如处理组件的状态，逻辑和转换数据(用于无状态组件)。

At this point, you should have a sense of when to use what kind of component.

此时，您应该对何时使用哪种组件有所了解。

5.给组件起一个特定的名字 (5. Give a Specific Name to a Component)

In terms of naming, between User and VipUser, what would you choose?

在命名方面，在User和VipUser之间，您会选择什么？

User is comfortable to use anywhere, for any user. It’s convenient. However, it also confuses you at some point in the long run.

对于任何用户，用户都可以在任何地方使用。 很方便但是，从长远来看，它也会使您感到困惑。

For VipUser, you’re limiting the context of use. It’s more controllable. You can only use it for VIP users.

对于VipUser ，您要限制使用上下文。 更加可控。 您只能将其用于VIP用户。

I’ll go for VipUser because I want to know exactly what the component is used for by its name. Besides, it gives others in your team a clear thought of what they should use the component for.

我将选择VipUser，因为我想确切地知道该组件的名称是什么。 此外，它还可以使您团队中的其他人清楚地了解该组件的用途。

6.大写组件名称 (6. Capitalize Component Names)

When it comes to component naming (and any other naming), you should follow a consistent convention.

当涉及到组件命名(以及其他任何命名)时，您应该遵循一致的约定。

VipUser should be preferred rather than vipuser, vip_user, or vipUser. Why? It’s the most common convention nowadays. Therefore, don’t reinvent the wheel based on your hobby.

VipUser应首选而非vipuser，vip_user，或vipUser。 为什么？ 这是当今最常见的惯例。 因此，不要根据自己的爱好重新发明轮子。

7.编写可测试的代码并始终覆盖它 (7. Write Testable Code and Always Get It Covered)

Now, this is the next level of coding. Not only do you make your code work but also you have to make it testable. And it’s should be your rule of thumb.

现在，这是下一个编码级别。 您不仅需要使代码正常工作，而且还必须使其可测试。 这应该是您的经验法则。

One of the best unit testing frameworks I know so far is Jest. Check it out and satisfy your code coverage.

我到目前为止所知道的最好的单元测试框架之一是Jest 。 签出并满足您的代码覆盖率。

For component testing, I use React Testing Library. React is all about component-based approach. Each component should be tested efficiently.

对于组件测试，我使用React Testing Library 。 React完全是基于组件的方法。 每个组件都应进行有效测试。

Don’t write code without having it tested.

未经测试就不要编写代码。

8.将相关文件保存在一个文件夹中 (8. Keep Related Files in One Folder)

By related, I don’t mean the filename extensions but files that serve on a particular purpose. For example, all files relating to a component should be in the same place, including styling files.

相对而言，我不是指文件扩展名，而是指出于特定目的而服务的文件。 例如，与组件相关的所有文件，包括样式文件，都应放在同一位置。

It’s useful because when you need to check things relating to the current file, you don’t have to jump around the hierarchy. Sometimes, you probably lose track if you’re in a huge project.

这很有用，因为当您需要检查与当前文件有关的内容时，不必在层次结构中跳转。 有时，如果您在大型项目中，您可能会迷失方向。

Place your files properly for easier navigating later.

正确放置文件，以便以后浏览。

结论 (Conclusion)

More and more new frontend frameworks come out these days. React still has its respected position, though. And, I think it will grow more in the long run. So, keep these best practices in mind along the way.

这些天来，越来越多的新前端框架问世。 不过，React仍然有其应有的地位。 而且，我认为从长远来看，它将增长更多。 因此，请始终牢记这些最佳实践。

I hope you benefited from this story and I’d like to appreciate it if you can share more in the comment below.

希望您能从这个故事中受益，如果您可以在下面的评论中分享更多信息，我将不胜感激。

翻译自: https://medium.com/javascript-in-plain-english/8-react-best-practices-every-web-developer-should-follow-c485beee7ea4

软件开发遵循原则