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

相关推荐
肖师叔爱抽风6 分钟前
使用nvm use切换版本时出现虚假成功信息,使用nvm ls,实际显示没有切换成功,解决方法
前端
猩猩程序员9 分钟前
Rust为什么需要Borrow Trait
前端
BUG收容所所长9 分钟前
Zustand状态管理如何驱动低代码平台的数据流?
前端·javascript·设计
司宸12 分钟前
学习笔记十四 —— 嵌套JSON树结构 实现模糊匹配返回搜索路径
前端
盗德13 分钟前
Vue渲染引擎的范式革命:从虚拟DOM到Vapor模式
前端·vue.js
BUG收容所所长14 分钟前
React递归渲染与react-dnd——低代码平台的组件拖拽与动态渲染实践
前端·javascript·设计
阿华的代码王国30 分钟前
【Android】日期选择器
android·xml·java·前端·后端
张拭心1 小时前
拭心 7 月日复盘|个体在 AI 时代的挑战
前端
这是个栗子1 小时前
express-jwt报错:Error: algorithms should be set
前端·npm·node.js
Dolphin_海豚1 小时前
vapor 的 IR 是如何被 generate 到 render 函数的
前端·vue.js·vapor