2021 年 React 开发者需要了解的内容

JavaScript 知识

使用状态管理器

React Hooks

服务器端渲染

学习 React 的常见错误

JavaScript 知识

React 是建立在 JavaScript 基础之上的。首先，想要学习 React 的人需要了解自己对 JavaScript 本身的了解程度。

很多时候，开发者提出的问题表明他们不了解 JavaScript 的基础知识。而关于 React 生态系统的问题则很少出现。因此，我们建议您首先加深对 JavaScript 的了解，然后再回归 React。

使用状态管理器

React.js 没有内置的 StateManager。Redux 库虽然作为标准库使用已久，但它的表现并不理想——使用它时，你必须编写大量的样板代码，而且缺乏对异步行为和副作用的控制。

于是其他的 State Manager 开始出现，Redux 的开发者们考虑到它们的不足，推出了 Redux Toolkit 库，受到了前端开发者的一致好评。

Redux Toolkit 是一个基于 Redux 的库。它允许您实现与 Redux 相同的功能，但使用 Redux Toolkit 编写的代码比使用 Redux 少得多。此外，Redux Toolkit 内部使用 Immer.js，因此您无需考虑数据不变性，例如使用解构，每次在 Reducer 中创建新的状态对象。

另一个颇有前景的库是 MobX。MobX 的业务逻辑与 Redux 不同。别忘了 Effector，它是由 CIS 的成员创建的。

到目前为止，这三个状态管理器是最受欢迎的。这三个库都能很好地完成它们的工作，但我们通常使用 Redux Toolkit 或 Effector。

React Hooks

React Hooks 在 16.8 版本中亮相，并将长期陪伴我们。如果您是第一次听说它，那么您应该先阅读 React 官方文档。

Hooks 只是描述组件逻辑的另一种方式。它允许你为函数式组件添加一些以前只有类组件才有的功能。

尽管所有信息都在文档中，但面试官们大部分都会问一些关于 Hooks 的问题。任何想做开发的人，至少都应该了解一下 Hooks 的工作原理，积累经验后，才能更深入地理解这项技术。

使用 Hooks 有一些限制，使其与普通函数有所区别。首先，它们不能在类组件中使用。Hooks 不能在循环或条件语句中调用。此限制是由 React 自身施加的，以便能够追踪哪些 Hooks 被调用。

当 Hooks 首次出现时，Holyweb 团队对其进行了实验，编写了新的组件，并观察了其效果。当一切进展顺利时，我们进一步使用了它们，并基于它们编写了新功能。对于尚未使用 React Hooks 的朋友，我建议尝试一下——它们可以非常轻松地描述必要的逻辑，使代码更简洁易懂。

许多人担心是否因为有钩子而需要以新的方式重写项目。我不认为这样的做法会显著提高或降低性能。如果你喜欢钩子，那么就用它们来编写项目的新功能吧。你总是有时间重写旧的代码。

我们来看一下钩子上的例子。

让我们制作一个简单的计数器。

以下是使用类组件的代码：

class App extends React.Component {
 state = {
   counter: 0
 };
 onIncrement = () => {
   this.setState((state) => {
     return {
       counter: state.counter + 1
     }
   });
 };
 onDecriment = () => {
   this.setState((state) => {
     return {
       counter: state.counter - 1
     }
   });
 };
 render() {
   return (
     <div>
       <button onClick={this.onIncrement}>+</button>
       <button onClick={this.onDecriment}>-</button>
       <div>Counter: {this.state.counter}</div>
     </div>
   );
 }
}

以下是使用功能组件和钩子的代码：

function App () {
 const [counter, toggleCounter] = React.useState(0)
 const onIncrement = () => {
   toggleCounter(counter => counter + 1)
 }
 const onDecriment = () => {
   toggleCounter(counter => counter - 1)
 }
 return (
   <div>
     <button onClick={onIncrement}>+</button>
     <button onClick={onDecriment}>-</button>
     <div>Counter: {counter}</div>
   </div>
 );
}

您可以确保钩子上的代码更加干净、清晰。

服务器端渲染

现在有几种流行的 SSR 解决方案。在我们最初使用 SSR 的项目中，我们有一个完全定制的解决方案。随着时间的推移，我们开始研究和使用现成的解决方案。每种方案都有其优缺点。例如，在当前的一个项目中，我们使用 Razzle，在另一个项目中，我们使用 Next.js。

Next.js是一个流行的轻量级框架，适用于使用 React 的静态和服务器端应用程序。它包含现成的样式和路由解决方案，并假定您使用 Node.js 作为服务器环境。Next 不太令人满意的地方在于，在某些情况下，它会规定架构以及如何构建应用程序。但这完全取决于个人喜好。

Razzle 是一个服务器端渲染框架，比 Next.js 更灵活，但不需要强制配置。

如果您正在认真考虑 SSR，我们建议您仔细研究以下产品并尝试获取最实用的体验：

• js（基于 React）；
• js（基于 Vue）；
• Gatsby（基于 React）；
• Gridsome（基于 Vue）。

学习 React 的常见错误

大多数开发人员的主要错误是没有认真阅读文档。例如，我们的一位开发人员承认他没有认真阅读文档，在不必要的情况下到处使用 useCallback。直到后来他重新阅读文档时才意识到这一点。

人们在聊天和个人资料社区中提出的问题通常已经在文档中得到解答——您只需仔细阅读即可。

除了库本身之外，专家还必须掌握 HTML、CSS、JavaScript、npm、Git、Babel、WebPack、Redux 等技术。其他工具的使用技能也可能有用，但这取决于职位空缺。

但最重要的并非一个人已经掌握的硬技能，而是他的学习能力。如果开发人员具备这种技能，那么准备面试、进入公司以及学习工作过程中所需的一切知识对他来说都不是什么难事。

原文为俄语