【译】怎样学习React

小郭郭yu
1,472 阅读6分钟

原文：kentcdodds.com/blog/how-to…

让我们看看如何通过正确的顺序学习React，来减少障碍。

正确学习React的方法是。。。实话说，他因人而异。但是仍然有一些建议给众多学习React的开发者。

封装

我们开始谈论封装。这个抽象的例子来自： youmightnotneedjquery.com

// $(el).toggleClass(className);
function toggleClass(el, className) {
    if (el.classList) {
        el.classList.toggle(className)
    } else {
    var classes = el.className.split(' ')
    var existingIndex = -1
    for (var i = classes.length; i--; ) {
        if (classes[i] === className) existingIndex = i
    }
    if (existingIndex >= 0) {
        classes.splice(existingIndex, 1)
    } else {
        classes.push(className)
    }
        el.className = classes.join(' ')
   }
}

很方便。但关键在这里。。。如果你不需要兼容IE8，你实际上可以这样写

// $(el).toggleClass(className)
function toggleClass(el, className) {
  el.classList.toggle(className)
}

我们也许并不需要封装，因为_el.classList.toggle(className)_本身就已经很简单了。

所以在你将封装实际应用在工作中，你需要知道这些：

  1. 这次的封装有什么好处
  2. 这次封装有什么代价

如果你不了解这些。就好比付出一定代价得来的解决方案，但是你并不需要。没有任何益处的消费并不是一笔好生意。

理解这些益处和代价的很重要的部分是，感受封装解决问题的痛点。这也是为什么确定学习React及其生态的正确顺序，会避免你一次被太多知识困惑以及高效使用封装

用javascript+最新javascript开始

我热爱React的原因之一是它含有多少javascript。如果你使用regular、JavaScript以及DOM APIs制作过一个简单的app，你就会明白React有多少优点了。你也会在React的使用方面更高效，实际上使用React更高效的90%的原因是对Javascript的理解到位。因此，我建议读我的博客"JavaScript to Know for React"。再看看JavaScript30.com（免费）和BeginnerJavaScript.com（不免费）；

除此之外，学习js的新特性也是一条很长的路。因为jsx语法需要一个编译器，大量的React开发者也会理所当然的使用js的新特性和编译器。所以大量的课程和例子都假定你对js新特性有基本的理解。因此我建议看下我的《ES6 and Beyond Workshop》（完全免费），这里面记录了PayPal工作时做的分享会。

下一步，我们来学习React

太多“React起步”的教材，是从JSX和一堆React相关工具开始的。React本身是很简单的（官方文档也很讲的很好）。不幸的是，它相关的生态让React很快变得复杂化，而且很难辨认出哪些代码是React，哪些是相关依赖。我创建了《React起步指南》，可以免费在egghead.io使用。它的一切是从index.html文件开始的，我认为它很重要。使用React，你也不需要任何工具。我通过快速迭代和部署创建了一个真正的附加项目。这是我所能想到的创建这种简单应用的最快的方式，他能让你跳过复杂的步骤。想了解更多这种实现，可以看我的文章《Super Simple Start to React》。

《The last lesson of my free egghead course》给你展示了怎样使用CodeSandbox.io完全在浏览器中创建app，然后把它下载在一个create-react-app应用上。

你不需要花费时间来进行任何安装。一旦你这样做完，你可以在不配置任何工具上走得很远。我知道有几个公司，用create-react-app制作应用。

如果你正在寻找快速开始React的方法，看看EpicReact.Dev。他将教会你我的React起步教程的任何东西。在你从React新手到高手的道路上，EpicReact会一直陪伴着你。而且它练习驱动的方法是十分高效的。比起其他教程，它会让你花费更多时间在敲键盘上。不要错过EpicReact.Dev。

依赖和npm

如果你不想自己写组件的每一个部分，你就需要看看相关依赖了。这里有着大量的组件，你需要掂量一下那些是何时的。试着不要用任何依赖，除非你认为它能够解决你现在的痛点。这个思想会使你更高效的使用依赖。

我建议花一个下午通读the npm documentation（npm文档）。认真的去做这件事，里面真的有很多有用信息。

除此之外，当你开始使用依赖，你一定会很想了解如何引入依赖。我有一篇演讲叫做《More than you want to know about ES6 Modules》，你可能会学到es 模块语法的有用信息。

Router

如果你的应用是服务器端渲染并且准备使用React来增加些互动性，那就不必使用路由了。然而如果你的应用是单页应用，或者客户端有责任路由，那么你就可以试着学学使用react-router。

它的文档写的很棒。如果你真的想知道它是如何工作的，请读读Tyler McGinnis写的《Build your own react-router》

状态管理

如果你学过React，那么你一定知道useState API。你可能也知道状态提升。这可能会占用你在学习React上的很长的时间，但我希望你坚持下去。事实上你可能会遇到一些prop深入的问题。当你感受到时，就会明白它。当你遇到了，我建议你读一下我的博文"Application State Management"

使用react-query进行服务缓存管理

当你正在和一个后端合作，你一定会需要一些存储和与服务器交互的机制。为此，react-query再合适不过了。他很神奇，而且会大量简化你的工作。

组件样式

我非常推荐CSS-in-JS。一旦你的应用里有了几百行css代码，你将会发现CSS-in-JS可以真正从概念上简化他们。这里有一些资源说明了为什么：

A Unified Styling Language — Mark Dalgleish:

  • 范围样式
  • 关键css
  • 智能的优化
  • 依赖包
  • 非浏览器样式

Maintainable CSS in React — me

  • 共同关注点

我推荐emotion，因为它有你所有想要的特性。而且很轻便，很快，还有更多节约内存的解决方案。

另一个你需要了解的是TailwindCSS。他是一个注重效率的css框架，用于快速创建常见的设计。

还有更多。。。

从这里开始，我建议你深入了解React。我有一篇Advanced React Component Patterns course，发表在egghead.io上，可以给你大量有用的信息。

除此之外，你可以学习：

  • 服务器端渲染（Gatsby.js, Next.js, After.js）

我再次提醒，除非你认为他们可以解决你的痛点，否则不要使用这些解决方案。这样会是你更高效的使用这些解决方案。

结论

我希望这些可以告诉你如何学习React，并且怎样开始开发React项目。在项目中太早的使用封装会变得不够灵活。所以在写应用时，一般也会遵循这些规则。好运！

avatar
文章
阅读
粉丝