Vue/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('7777')}}>测试</Button>
      </View>
    )
}

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

return (


增加

)

### 列表渲染

获取DOM

### 列表渲染

// 声明对象类型
type Coordinates = {
name: string,
age: number
}

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

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

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

})
}
{ listItem }
)

### 条件渲染

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

const name = useMemo(() => {
return serverUrl + " " + age;
}, [serverUrl]);

### 监听器

import {useEffect, useState} from 'react';

export default function home() {
const [serverUrl, setServerUrl] = useState('test');
const [age, setAge] = useState(2);
/**

• useEffect第二个参数所传递的值会进行根据值的变化而出发

*/
useEffect(() => {
if(age !== 5) {
setAge(++age);
}
}, [age]);
}