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>
        <Son
          msg={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 } = props
  return (
    <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 =>
            <ListItem
              key={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