Vue与React的对比（API）

组件传值

VUE

// 父组件

// 子组件 -- 通过props获取即可
props: {
    goodsList:{
      type:Array,
      default:function(){
        return []
      }
    }
  }

REACT

// 父组件
export default function tab(props:any) {
    const [serverUrl, setServerUrl] = useState('https://');
    console.log(props);
	// 父组件接收子组件的值并修改
    const changeMsg = (msg?:string) => {
        setServerUrl(msg);
     };

    return(
        
            
                
            
        
    )
}

// 子组件
function TabName(props){
    console.log('props',props);
	// 子传父
    const handleClick = (msg:string) => {
      props.changeMsg(msg);
    };
    return (
        
            {props.msg}
            {handleClick('77777')}}>测试
        
    );
};

获取DOM

VUE

this.$refs['ref']

REACT

// 声明ref    
const domRef = useRef(null);
// 通过点击事件选择input框
const handleBtnClick = ()=> {
     domRef.current?.focus();
     console.log(domRef,'domRef')
}

return(
        
            
                
                增加
            
        
    )

列表渲染

VUE

	{{item}}

REACT

//声明对象类型
  type Coordinates = {
    name:string,
    age:number
  };
	// 对象
  let [userState, setUserState] = useState({ name: 'John', age: 30 });
	// 数组
  let [list, setList] = useState([{ name: '李四', age: 30 }]);

// 如果你的 => 后面跟了一对花括号 { ，那你必须使用 return 来指定返回值！
const listItem = list.map((oi)=>{
    return {oi.name}
  });

return (
      {
        list.map((oi)=>{
          return {oi.name}
        })
      }
      { listItem }
    
  )

计算属性

VUE

computed: {
    userinfo() {
      return this.$store.state.userinfo;
    },
  },

REACT

const [serverUrl, setServerUrl] = useState('https://localhost:1234');
let [age, setAge] = useState(2);

const name = useMemo(() => {
        return serverUrl + " " + age;
}, [serverUrl]);
console.log(name) // https://localhost:1234 2

监听器

VUE

watch: {
    // 保证自定义菜单始终显示在页面中
    customContextmenuTop(top) {
      ...相关操作
    }
  },

REACT

import { useEffect, useState } from 'react';

export default function home() {
    const [serverUrl, setServerUrl] = useState('https://localhost:1234');
    const [age, setAge] = useState(2);

   /**
     * useEffect第二个参数中所传递的值才会进行根据值的变化而出发;
     * 如果没有穿值的话,就不会监听数据变化
     */
    useEffect(()=>{
        if (age !== 5) {
            setAge(++age)
        }
    },[age])

    useEffect(()=>{
        if(serverUrl !== 'w3c') {
            setServerUrl('w3c');
        }
    },[serverUrl])

    return(78)
}