您现在的位置是：首页 >其他 >react和vue对比网站首页其他

计算属性

Vue 中的计算属性：

Vue 提供computed来定义基于状态的衍生数据，具有缓存能力（除非依赖改变，否则不会重新计算）。

使用方法:

const sum=computed(()=>{return a+b})

React 中的计算属性:

使用useMemo（性能优化）或者useCallback（缓存函数）

`useMemo`是一个 React 钩子，用于缓存计算结果。它会在组件重新渲染时，根据依赖项数组来决定是否重新计算。如果依赖项没有改变，就会返回之前缓存的计算结果，从而避免不必要的计算开销。

使用方法：

import React from 'react'
function Mycomponent(){
const [numbers,setNumbers]=useState([1,2,3])
const sum=useMemo(()=>{
return numbers.reducer((acc,cur)=>acc+cur,0)
},[numbers])
return(
<>
<div>{sum}</div>
</>
)

}

`useCallback`主要用于缓存函数。在 React 中，当组件重新渲染时，函数会被重新创建。但是有些情况下，我们希望函数在依赖项没有改变时保持不变，以避免不必要的子组件重新渲染。

function Mycomponent(){
const [count,setCount]=useState(0)
const handleClick=useCallback(()=>{
setCount(count+1);
},[count])

return(<>

<div>Count:{count}</div>
<ChildComponent onClick={handleClick}/>
</>)
}

监听属性

Vue 中的监听属性：Vue 使用watch 来监听特定数据的变化，并触发回调。

使用方法：

watch(x,(newVal,oldVal)=>{
console.log(newVal)
})

React 中的监听属性:React 中通过useEffect实现监听，useEffect 的依赖数组用于指定监听的状态。

使用方法：

useEffect(()=>{
console.log(`Count changed to ${count}`)},[count])

透传属性:

vue的透传属性：指令v-bind=“$attrs”

使用方法：

<template>
<childComponent v-bind="$attrs"/>
</template>

react的透传属性：{...props}

使用方法：

import React from 'react';
import { Button } from 'antd';

const CustomButton = (props) => {
  return (
    <Button {...props} />
  );
};

export default CustomButton;

通过...props ,父组件传递的type和onClick等属性会直接传递到Button上


父组件：

<CustomButton type="primary" onClick={() => console.log('Clicked')}>
  Click Me
</CustomButton>

通过useRef获取子组件实例

使用方法：

父组件


function getTab(){
const TabRef=useRef(null)

return(
<>
<TabChange ref={TabRef}/>
</>
) 
}


子组件

const TabChange=({ref})=>{

 useImperativeHandle( ref,()=>({
  getNewColumns:()=>updatedColumns
    }))
return(
<></>)

}