只会Vue的我，用两天学会了react，这个方法您也可以

背景

由于工作需要学习react框架；最开始看文档的时候感觉还挺难的。但当我看了半天文档以后才发现，原来react这样学才是最快的；前提是同学们会vue一类的框架哈。

该方法适用于会vue的同学们食用

我们在学习以前先去想一想，在vue中我们常用的方法是什么，我们遇到一些场景时在vue中是怎么做的。

当我们想到这儿的时候就会发现，对啊；既然vue是这样做的，那么react中是怎么做的呢？别急，我们一步一步对比着来。

这样岂不是更能理解哦！下面就让我们开始吧！

冲冲冲。。。

Vue梳理

在开始之前，我们先来梳理一下我们在vue中常用的API或者场景有哪些。

以下这几种就是我们常见的一些功能，主要是列表渲染、表单输入和一些计算属性等等；我们只需要根据原有的需要的功能去学习即可。

组件传值
获取DOM
列表渲染
条件渲染
class
计算属性
监听器
表单输入
模板

vue/react对比学习

组件传值

vue

// 父组件
<GoodsList v-if="!isGoodsIdShow" :goodsList="goodsList"/>
// 子组件 -- 通过props获取即可
props: {
    goodsList:{
      type:Array,
      default:function(){
        return []
      }
    }
  }

react

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

    return(
        <View className='tab'>
            <View className='box'>
                <TabName msg={serverUrl} changeMsg={changeMsg} />
            </View>
        </View>
    )
}

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

获取DOM

vue

this.$refs['ref']

react

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

return(
        <View className='home'>
            <View className='box'>
                <Input ref={domRef} type="text" />
                <button onClick={handleBtnClick}>增加</button>
            </View>
        </View>
    )

列表渲染

vue

<div v-for="(item, index) in mealList" :key="index">
	{{item}}
</div>

react

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

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

return (
      {
        list.map((oi)=>{
          return <Text className='main-list-title' key={oi.age}>{oi.name}</Text>
        })
      }
      <View>{ listItem }</View>
    </View>
  )

条件渲染

计算属性

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)
}