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=