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
// 通过点击事件选择input框
const handleBtnClick = () => {
domRef.current?.focus();
console.log(domRef, 'domRef');
}
return (
)
### 列表渲染
获取DOM
### 列表渲染
// 声明对象类型
type Coordinates = {
name: string,
age: number
}
// 对象
let [userState, setUserState] = useState
// 数组
let [list, setList] = useState<Coordinates[]>([{name: '李四', age: 30}]);
const listItem = list.map((oi) => {
return
});
return (
{
list.map((oi) => {
return
{oi.name}
})
}
)
### 条件渲染
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]);
}