React实现Vue中的computed、watch、mounted()、beforeDestroy()功能

最新推荐文章于 2025-02-26 17:32:45 发布

qq_41985405

最新推荐文章于 2025-02-26 17:32:45 发布

阅读量1.1k

点赞数 1

文章标签： react.js vue.js 前端

本文链接：https://blog.csdn.net/qq_41985405/article/details/131132135

版权

该文章演示了如何使用React的Hooks（useState、useMemo和useEffect）来模拟Vue中的computed属性、watcher、组件生命周期的mounted和beforeDestroy阶段。通过示例函数组件Test，作者展示了如何创建响应式的fullName计算属性，以及监听firstName和lastName变化的watch效果，并在组件挂载和卸载时执行相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React实现Vue中的computed、watch、mounted()、beforeDestroy()功能

import { useEffect, useState, useMemo } from "react";

export function Test () {
  const [firstName, setFirstName] = useState('xia')
  const [lastName, setLastName] = useState('xin')

  // computed
  const fullName = useMemo(() => {
    return `${firstName} ${lastName}`
  }, [firstName, lastName])

  useEffect(() => {
    // mounted()
    console.log('componentDidMount')
    return () => {
      // beforeDestroy()
      console.log('componentWillUnmount')
    }
  }, [])

  // watch
  useEffect(() => {
    console.log('fullName changed')
  }, [firstName, lastName])


  const changeFirstName = () => {
    setFirstName(firstName + '1')
  }

  const changeLastName = () => {
    setLastName(lastName + '2')
  }

  return (
    <>
      <p>{fullName}</p>
      <button onClick={changeFirstName}>改变firstName</button>
      <button onClick={changeLastName}>改变lastName</button>
    </>
  )
}