likes
comments
collection
share

最小学习成本助你从 Vue 平滑的过渡到 React

作者站长头像
站长
· 阅读数 19

大家好，我是森木。本文将从最小学习成本的角度来助你从 Vue 平滑的过渡到 React。

需要学习的知识清单（最小成本）：

本文适合人群：

前提：有 Vue 基础

  • 由于一些原因需要快速过渡到 React 的
  • 对 React 有兴趣想试试的
  • 想快速上手 React 的
  • 想学 React 不知道如何下手的

当然，如果你是 React 资深用户，也欢迎你来阅读并且提出不同看法或者更好的建议的～

前言

在正式开始学习之前，你需要明白，学习是一个循序渐进的过程，一些基础知识是必须要学习的，高阶知识不推荐在入门时去学习，甚至看都不要看。

由于工作变动的原因，我也从 Vue 转到 React 了；当时我的入门功能是仿照 xx 组件库实现 tooltip 功能（如果你对 React 有兴趣但不知道怎么下手，可以尝试也实现一个 tooltip 组件），由于我之前 Vue 的工作中用到的是 Composition Api + tsx 这种方式，所以我直接上手撸 React 代码了；（⚠️ 反面教材，请勿模仿）当然，即使我有 Hook 与 JSX 的一点基础还是遇到了很多问题，所以，现在将这些问题整理了下来，希望大家可以不要走弯路～🦌

值得注意的是，对于一个 React 新手来说，不要被各种源码解读或者高级用法等等的条目所吸引（至少是不要花大量时间浪费在这个地方），在这个阶段掌握好我上面所罗列的最基本的能力以及思想才是最关键的；俗话说，万事开头难，我希望通过本篇文章能让你入门 React 更加轻松，平滑地度过这个开头～

那我们就正式起航 🚢

JSX

很多人可能没听过 JSX ，所以 JSX 的最小学习内容为：什么是 JSX 、JSX 的语法。

什么是 JSX

JSX 是 React 使用的一种类似 XML/HTML 的语法，它扩展了 ECMAScript，以便类似 XML/HTML 的文本可以与 JavaScript/React 代码共存。该语法需要配合预处理器（像 Babel 这样的转译器）使用，将 JavaScript 文件中的 HTML 类文本转换为 JavaScript 引擎将解析的标准 JavaScript 对象。 基本上，通过使用 JSX，你可以在编写 JavaScript 代码的同一文件中编写简洁的 HTML/XML 类结构（例如，DOM 类树结构），然后 Babel 会将这些表达式转换为实际的 JavaScript 代码。 下面看一段简单的代码：

const element = <div>你好，世界！</div>

相信聪明的你已经对 JSX 有了一个基本的认识 🎶

JSX 的语法

官网给的这篇教程真的很简单易懂，戳我跳转

我这里提几点大家需要重点关注的东西：

  • JSX 是一段 JavaScript 表达式 ，并且 JSX 元素中嵌入的也是 JavaScript 表达式。
  • JSX 本质是一个对象，描述了元素的各种属性

例如：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// 这两个是等效的
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
// 最终都会被 Babel 编译为
// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

了解这些知识，JSX 也算是入门啦～🥳

Hook

Vue 中的叫法为 Composition Api，本质思想是一样的

⚠️ Hook 是 React 在 16.8 版本新增的特性，如果你们的 React 版本低于这个版本，请忽略本节内容。 掌握以下几个基础 Hook 你就可以开始入门了：

  • useState *
  • useEffect *
  • useContext

useState

一个简单的计数器例子：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

从这个例子，我们来看看 React 中 Hook 到底是什么： Hook 是具有 XX 功能的特殊函数，上述例子的 Hook 就是具有 state 功能的函数，好的 Hook 应该是具有某一功能的全部特性并与其他功能解耦。

useEffect

沿用上面的例子： 我们想在 **count **变化后做些事情，就可以用 useEffect

import React, { useState, useEffect } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // 做些事情
    console.log('do something...');
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useContext

useContext 是跨组件（前提是同一父组件）通信的利器 🔱 最小学习成本助你从 Vue 平滑的过渡到 React 在使用 useContext 之前，你需要先创建 Context

import React, { useContext } from 'react';

const Context = React.createContext(value);

function Example() {
  return (
    <Context.Provider value={value}>
      <ChildrenComp />
    </Context.Provider>
  )
}

function ChildrenComp() {
  // 拿到 value 做一些事情
  const value = useContext(Context)
  return (
    <div>
      <ChildComp />
    </div>
  )
}

function ChildComp() {
  // 拿到 value 做一些事情
  const value = useContext(Context)
  return <div>{value}<div>
}

点击这里可以查看 Context 更详细的操作

Hook 还有一些需要遵守的规则，你可以添加 eslint-plugin-react-hooks ，该 eslint 插件来帮助你提示使用 Hook 中不当的地方。

接受单向数据流

在 Vue 中大家已经熟悉了双向数据流，在 React 中的数据流是自上而下的单向数据流，刚开始可能不太习惯，不过大家只要在编写代码的时候注意数据与 UI 逻辑的交互就可以了。 具体 Vue 与 React 的对比，大家可以看我之前写过的一篇文章中的 Vue 概览和 React 概览部分： 点此链接跳转

组件化思想

这里我要强调的不只是封装一个简单的组件而已，而是要将 UI 逻辑与数据分离，这也是为什么我们使用 Hook 的原因之一。 这样做的好处有：

  • 组件之间的耦合度降低
  • 数据与 UI 耦合度降低
  • 组件/数据复用性提高
  • 维护代码更加轻松
  • 编写代码思路更加清晰

并且，你这样做还可以让你的代码更加优雅 💃 大家在掌握了以上的基础知识后，可以来看看我写的这篇文章： 7 个小技巧助你用 TS 写出干净的 React 代码

总结

本文主旨在于 Vue 到 React 最小学习成本的过渡，也就是带你花最少的时间精力去入门 React、会用 React 。 最后，我希望你可以自己动手试着用 React 实现一个入门组件，如果你不知道该实现什么，不妨先尝试仿照 Ant 实现一个 tooltip

到这里，我们的航行就结束啦～

觉得有用的话希望大家可以点点赞，感谢大家 💕