咱们好，我是森木。本文将从最小学习本钱的视点来助你从 Vue 平滑的过渡到 React。

需求学习的常识清单（最小本钱）：

  • JSX
  • Hook
  • 承受单向数据流
  • 组件化思维（UI 与数据逻辑的拆分）

本文适合人群：

条件：有 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

到这儿，咱们的航行就完毕啦～

觉得有用的话期望咱们能够点点赞，感谢咱们