vue和react使用上的不同

使用表达式

**react使用js表达式**
const name = '李四'
<h1>你好，我叫{name}</h1> 
**vue 使用表达式**
const name = '李四'
<div>你好，我叫{{name}}</div>

列表渲染

列表渲染
const songs = [{ id: 1, name: '痴心绝对' },{ id: 2, name: '像我这样的人' },{ id: 3, name: '南山南' }
]function App() {return (<div className="App"><ul>{songs.map(item => <li>{item.name}</li>)}</ul></div>)
}
export default App< div v-for="todo in todos" :key="todo.name"><li>{{ todo.name }}</li>
</div>

事件处理

事件处理
// react函数组件
function HelloFn () {// 定义事件回调函数const clickHandler = (e) => {console.log('事件被触发了', e)}return (// 绑定事件<button onClick={clickHandler}>click me!</button>)
}
import React from "react"
// 如何获取额外的参数？
// onClick={ onDel } -> onClick={ () => onDel(id) }
// 注意: 一定不要在模板中写出函数调用的代码 onClick = { onDel(id) }  bad!!!!!!const TestComponent = () => {const list = [{id: 1001,name: 'react'},{id: 1002,name: 'vue'}]const onDel = (e, id) => {console.log(e, id)}return (<ul>{list.map(item =>（<li key={item.id}>{item.name}<button onClick={(e) => onDel(e, item.id)}>x</button></li>))}</ul>)
}
function App () {return (<div><TestComponent /></div>)
}export default App
vue
function say(message) {alert(message)
}
<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

组件通信
import React from 'react'// 子组件
function Son(props) {function handleClick() {// 调用父组件传递过来的回调函数 并注入参数props.changeMsg('this is newMessage')}return (<div>{props.msg}<button onClick={handleClick}>change</button></div>)
}class App extends React.Component {state = {message: 'this is message'}// 提供回调函数changeMessage = (newMsg) => {console.log('子组件传过来的数据:',newMsg)this.setState({message: newMsg})}render() {return (<div><div>父组件</div><Sonmsg={this.state.message}// 传递给子组件changeMsg={this.changeMessage}/></div>)}
}export default App
vue
<BlogPost :id="post.id" :title="post.title" @dialogClose="dialogSenceClose" />
const dialogSenceClose = () => {dialogSenceDelDef.dialogVisible = false
}
子组件
const props = defineProps({dialogObject: {type: Object,default: () => { },},
});
const emits = defineEmits(['dialogClose', 'dialogSuccess']);
const dialogShow = computed({get() {return props.dialogObject.dialogVisible;},set(val) {return val;},
});
const obj = {dialogTitle: props.dialogObject.title || '标题',dialogWidth: props.dialogObject.width || '30%',
};
const close = () => {emits('dialogClose', false, 'close');
};
const success = () => {emits('dialogSuccess', false, 'success');
};
</script>
<template><div class="dialog"><el-dialog v-model="dialogShow" :title="obj.dialogTitle" :width="obj.dialogWidth" :before-close="close" draggable><slot /></el-dialog></div>
</template>

react：App为父组件用来提供列表数据 ，ListItem为子组件用来渲染列表数据
import React from 'react'// 子组件
function ListItem(props) {const { name, price, info, id, delHandler } = propsreturn (<div><h3>{name}</h3><p>{price}</p><p>{info}</p><button onClick={() => delHandler(id)}>删除</button></div>)
}// 父组件
class App extends React.Component {state = {list: [{ id: 1, name: '超级好吃的棒棒糖', price: 18.8, info: '开业大酬宾，全场8折' },{ id: 2, name: '超级好吃的大鸡腿', price: 34.2, info: '开业大酬宾，全场8折' },{ id: 3, name: '超级无敌的冰激凌', price: 14.2, info: '开业大酬宾，全场8折' }]}delHandler = (id) => {this.setState({list: this.state.list.filter(item => item.id !== id)})}render() {return (<>{this.state.list.map(item =><ListItemkey={item.id}{...item}delHandler={this.delHandler} />)}</>)}
}export default App

函数组件跨组件传递

import { createContext, useContext } from 'react'
// 创建Context对象
const Context = createContext()function Foo() {  return <div>Foo <Bar/></div>
}function Bar() {  // 底层组件通过useContext函数获取数据  const name = useContext(Context)  return <div>Bar {name}</div>
}function App() {  return (    // 顶层组件通过Provider 提供数据    <Context.Provider value={'this is name'}>     <div><Foo/></div>    </Context.Provider>  )
}export default App