2023 Vue开发者的React入门

Vue 和 React 都是流行的 JavaScript 框架，它们在组件化、数据绑定等方面有很多相似之处

本文默认已有现代前端开发(Vue)背景，关于 组件化、前端路由、状态管理 概念不会过多介绍

0基础建议详细阅读 Thinking in React-官方文档 了解 React 的设计哲学

• React 新文档- https://react.dev

• React 中文文档(翻译中)- https://react.jscn.org

经过本文的学习让没开发过 React 项目的 Vue 开发者可以上手开发现有的 React 项目，完成工作需求开发

React 新文档

React 新文档重新设计了导航结构，让我们更加轻松地找到所需的文档和示例代码 不仅提供了基础知识的介绍，还提供了更加详细的原理介绍和最佳实践，包括：React 组件的设计哲学、React Hooks的原理和用法等

并且提供了在线编辑和运行的功能，方便开发者进行测试和实验

👇 基于 函数组件

初学可以只学 函数组件，You Don't Need to Learn Class Components

👇 interactive sandboxes 可交互沙箱，边做边学

Fork 可以单独打开页签

JSX 与 SFC

• 在 Vue 中我们使用 单文件组件(SFC) 编写组件模版 (虽然 Vue 也支持使用 JSX , 但是更鼓励使用SFC)

• 在 React 中，JSX（JavaScript XML）是一种将HTML语法嵌入到 JavaScript 中的语法扩展。它可以使得我们在 JavaScript 代码中轻松地定义组件的结构和样式，从而提高代码的可读性和可维护性

虽然 React和 Vue 在组件定义方式上存在差异，但是它们的组件化思想是相似的

根节点

👇 Vue

<template>
  <div>同级节点1</div>
  <div>同级节点2</div>
</template>

👇 React

const App = (
  <>
    <div>同级节点1</div>
    <div>同级节点2</div>
  </>
)

const App = (
  <React.Fragment>
    <div>同级节点1</div>
    <div>同级节点2</div>
  </React.Fragment>
)

条件渲染

👇 Vue

<div v-if="show">条件渲染</div>
<div v-show="show">条件渲染</div>

👇 React

{
  show ? <div>条件渲染</div> : null
}

循环语句

👇 Vue

<ul>
  <li v-for="i in list" :key&