type
status
date
slug
summary
tags
category
icon
password
1. 前言
本文将以 React 和 Vue3 进行同步对比，带大家快速掌握 React。这个系列分为上下两篇，上篇内容包括：
- 组件
- JSX
- 插值
- 数据通信
- 渲染
- 事件
- 状态
下篇包括：
- 元素引用
- 跨级传值
- Portals
- Suspense
- Error Boundaries
- Hooks
2. 元素引用
想要引用HTML元素节点，在 Vue 中通过 ref 来实现，React 通过 useRef 钩子。
Vue：
React：
通过 .current 使用 ref 引用。
3. 跨级传值
Vue：
React：
如果父组件没有提供
<ThemeContext.Provider>，将会使用默认值 light。4. Portals
传送门，Vue3提供了内置组件
<Teleport>，而在 React 中使用的是 createPortal。Vue：
React：
5. Suspense
Vue：
React：
6. Error Boundaries
边界错误处理。
Vue：
React：
7. Hooks
7.1 State 状态
Vue：ref(), reactive()
React：useState()
7.2 Context 上下文
Vue：provide() + inject()
React：useContext()
7.3 Ref 引用
Vue：ref()
React：useRef()
7.4 Effect 副作用
Vue：无
React：useEffect() React 组件是比较“纯”的函数，它能保证输入和输出的一致性。与浏览器、API等外部系统等连接（如：网络请求、订阅事件、更新 DOM），要使用 useEffect() 钩子，而不是插入到组件的渲染中，这是跳出 React 的方式。
下面是 React 组件能够直接进行网络请求的两个位置：
7.5 Performance 性能优化
Vue：computed()
React：useMemo(), useCallback()
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/vue-to-react-2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章