React 的常用钩子函数在Vue中是如何设计体现出来的。

1、定义响应式数据:

React 通过 useState 和 useReducer Vue 通过 ref 和 reactive

javascript 复制代码
  const [state, setState] = useState(initialState)
  const [state, dispatch] = useReducer(reducer, initialState)

2、定义缓存数据:

React 通过 memo 和 useMemo useCallback

Vue 通过 v-memo 指令和 computed 计算属性

javascript 复制代码
 memo 允许你在属性不变时跳过重新渲染组件。
 useMemo 是一个 React 钩子,可让你在重新渲染之间缓存计算结果。
 useCallBack 包裹就能防止函数体在渲染的时候重复创建

3、访问 DOM 元素 && 获取组件实例

React 通过 useRef

javascript 复制代码
const chartRef = useRef(null)
chartRef.current

Vue 通过 $refs 或 useTemplateRef获取DOM, 通过 getCurrentInstance 函数获取组件实例

javascript 复制代码
const { proxy } = getCurrentInstance()
proxy.$refs["ruleFormRef"].validate(valid => {})
proxy.$modal.msgSuccess("修改成功")

4、DOM循环

React:

javascript 复制代码
<ul>
  {colors.map((color) => (
    <li key={color}>{color}</li>
  ))}
</ul>

Vue:

javascript 复制代码
<ul>
  <li
    v-for="color in colors"
    :key="color"
  >
    {{ color }}
  </li>
</ul>

5、点击事件

javascript 复制代码
React: <button onClick={incrementCount}>+1</button>
Vue:  <button @click="incrementCount">+1</button>

6、生命周期

组件加载时:

javascript 复制代码
React useEffect 
VUe onMounted 

7、startTransition 和 useTransition 搜索和过滤后大规模的数据渲染

javascript 复制代码
const [isPending, startTransition] = useTransition();
startTransition(() => {
  // 此处的更新会被标记为低优先级
  setState(newValue);
});

8、Suspense

是一个内置组件,用来在组件树中协调对异步依赖的处理 相当于vue的 Suspense

9、ViewTransition

ViewTransition 以帮助你制作基于状态变化的过渡和动画 相当于vue的 Transition

相关推荐
胡gh2 小时前
页面卡成PPT?重排重绘惹的祸!依旧性能优化
前端·javascript·面试
言兴2 小时前
# 深度解析 ECharts:从零到一构建企业级数据可视化看板
前端·javascript·面试
山有木兮木有枝_2 小时前
TailWind CSS
前端·css·postcss
烛阴3 小时前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript
杨荧3 小时前
基于Python的农作物病虫害防治网站 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python
Moment4 小时前
毕业一年了,分享一下我的四个开源项目!😊😊😊
前端·后端·开源
程序视点5 小时前
Escrcpy 3.0投屏控制软件使用教程:无线/有线连接+虚拟显示功能详解
前端·后端
silent_missile5 小时前
element-plus穿梭框transfer的调整
前端·javascript·vue.js
专注VB编程开发20年5 小时前
OpenXml、NPOI、EPPlus、Spire.Office组件对EXCEL ole对象附件的支持
前端·.net·excel·spire.office·npoi·openxml·spire.excel
古蓬莱掌管玉米的神5 小时前
coze娱乐ai换脸
前端