前端四种框架的区别

1. 不同框架的区别

• react和vue的区别

• react使用jsx语法，写在return里；vue使用模板语法，写在template标签里，更接近html语法。
• react是单向数据流，父组件通过props向子组件传递数据；vue是双向数据绑定，父组件通过v-model来实现和子组件的绑定。
• react的特点是组件化，方便对代码进行复用；vue的特点是一站式，有一些状态管理、路由的内置功能。

• react类组件和函数组件的区别

• 类组件使用ES6类语法来定义组件，继承自React.Component；函数组件是一个js函数，参数可以接受props，返回值就是用来渲染UI的jsx结构。
• 类组件使用setState来管理状态；函数组件使用钩子函数useState来管理状态。
• 类组件使用componentDidMount、componentDidUpdate、componentWillUnmount来处理生命周期事件；函数组件使用钩子函数useEffect来模拟生命周期效果。
• 函数组件语法更简洁，在react16.8引入hooks后拥有了更多类似于类组件的功能，逐渐成为主流。

• vue2和vue3的区别

• vue2使用选择对象data、methods等来组织组件逻辑；vue3引入了composition api，让使用者更灵活的组织和复用组件逻辑。
• vue3在底层进行了大规模的重写，优化了性能；改进了虚拟dom算法，加快了渲染速度。

---

2. 不同框架拿到canvas上下文

• react类组件构造函数形式

class page extends Component{
 constructor(){
  super()
  this.canvasRef=React.createRef()
 }
 componentDidMount(){
  let canvas=this.canvasRef.current
 }
 render(){
  return(
   <canvas ref={this.canvasRef}></canvas>
  )
 }
}

• react类组件类字段形式（ES10后引入）

class page extends Component{
 canvasRef=React.createRef()
 componentDidMount(){
  let canvas=this.canvasRef.current
 }
 render(){
  return(
   <canvas ref={this.canvasRef}></canvas>
  )
 }
}

• react函数组件（hooks）

function page(){
 let canvasRef=useRef()
 useEffect(()=>{
  let canvas=canvasRef.current
 },[])
 return(
  <canvas ref={canvasRef}></canvas>
 )
}

• js+html

//html
<canvas id="myCanvas"></canvas>
//js
let canvas=document.getElementById("myCanvas")

• js原生

let canvas=document.createElement("canvas")
document.body.appendChild(canvas)

• vue2选择式组件

<template>
 <canvas ref="myCanvas"></canvas>
</template>
<script>
 export default{
  mounted(){
   let canvas=this.$refs.myCanvas
  }
 }
</script>

• vue3函数式组件（composition api）

<template>
 <canvas ref="myCanvas"></canvas>
</template>
<script>
 export default{
  setup(){
   let myCanvas=ref(null)
   onMounted(()=>{
    let canvas=myCanvas.value
   })
   return{
    myCanvas
   }
  }
 }
</script>

---

3. 不同框架实现增加计数器和减少计数器

• react类组件

//this指向组件实例
class Page extends Component{
 state={
  inCount:0,
  deCount:0
 }
 increment=()=>{
  this.setState({inCount:this.state.inCount+1})
 }
 decrement=()=>{
  this.setState({deCount:this.state.deCount-1})
 }
 render(){
  return (
   <div>
    <div>增加的数字：{this.state.inCount}</div>
    <button onClick={this.increment}>增加</button>
    <div>减少的数字：{this.state.deCount}</div>
    <button onClick={this.decrement}>减少</button>
   </div>
  )
 }
}

• react函数组件（hooks）

//函数没有实例，所以没有this
function Page(){
 const [inCount,setInCount]=useState(0)
 const [deCount,setDeCount]=useState(0)
 const increment=()=>{
  setInCount(inCount+1)
 }
 const decrement=()=>{
  setDeCount(deCount+1)
 }
 return(
  <div>
    <div>增加的数字：{inCount}</div>
    <button onClick={increment}>增加</button>
    <div>减少的数字：{deCount}</div>
    <button onClick={decrement}>减少</button>
   </div>
 )
}

• vue2选择式组件

<template>
 <div>
    <div>增加的数字：{{inCount}}</div>
    <button @click="increment">增加</button>
    <div>减少的数字：{{deCount}}</div>
    <button @click="decrement">减少</button>
  </div>
</template>
<script>
//this指向组件实例
 export default{
  data(){
   return{
    inCount:0,
    deCount:0
   }
  }
  method:{
   increment(){
    this.inCount+=1
   }
   decrement(){
    this.deCount-=1
   }
  }
 }
</script>

• vue3函数式组件（composition api）

<template>
 <div>
    <div>增加的数字：{{inCount}}</div>
    <button @click="increment">增加</button>
    <div>减少的数字：{{deCount}}</div>
    <button @click="decrement">减少</button>
  </div>
</template>
<script>
//函数没有实例，所以没有this
 export default{
  setup(){
   const inCount=ref(0)
   const deCount=ref(0)
   const increment=()=>{
    inCount.value+=1
   }
   const decrement=()=>{
    deCount.value-=1
   }
   return{
    inCount,
    deCount,
    increment,
    decrement
   }
  }
 }
</script>

---

4. 不同框架实现计时器

• react类组件

class Page extends Component{
 state={
  seconds:0
 }
 componentDidMount(){
  this.interval=setInterval(()=>{
   this.setState({seconds:this.state.seconds+1})
  },1000)
 }
 componentWillUnmount(){
  clearInterval(this.interval)
 }
 render(){
  return(
   <div>{this.state.seconds}秒</div>
  )
 }
}

• react函数组件（hooks）

function Page(){
 const [seconds,setSeconds]=useState(0)
 useEffect(()=>{
  const interval=setInterval(()=>{
   setSeconds(seconds+1)
  },1000)
  return ()=>{
   clearInterval(interval)
  }
 },[])
 return(
  <div>{seconds}秒</div>
 )
}

• vue2选择式组件

<template>
 <div>{{seconds}}秒</div>
</template>
<script>
 export default{
  data(){
   return{
    seconds:0
   }
  }
  mounted(){
   this.interval=setInterval(()=>{
    this.seconds+=1
   },1000)
  }
  beforeDestroy(){
   clearInterval(this.interval)
  }
 }
</script>

• vue3函数式组件（composition api）

<template>
 <div>{{seconds}}秒</div>
</template>
<script>
 export default{
  setup(){
   const seconds=ref(0)
   let interval
   onMounted(()=>{
    interval=setInterval(()=>{
     seconds.value+=1
    },1000)
   })
   onBeforeUnmount(()=>{
    clearInterval(interval)
   })
   return{
    seconds
   }
  }
 }
</script>

---

5. 不同框架从数据库渲染一张图片到页面上

• react类组件

class Page extends Component{
 state={
  imgSrc:null
 }
 componentDidMount(){
  axios.get("接口地址")
   .then(response=>{
    this.setState({imgSrc:response.data.imgSrc})
   })
   .catch(error=>{
    console.log(error)
   })
 }
 render(){
  let {imgSrc}=this.state
  return(
   <div>
    {imgSrc&&<img src={imgSrc} alt={数据库图片} />}
   </div>
  )
 }
}

• react函数组件（hooks）

function Page extends Component{
 const [imgSrc,setImgSrc]=useState(0)
 useEffect(()=>{
  axios.get("接口地址")
   .then(response=>{
    setImgSrc(response.data.imgSrc)
   })
 },[])
 return(
  <div>
   {imgSrc&&<img src={imgSrc} alt={"数据库图片"} />}
  </div>
 )
}

• vue2选择式组件

<template>
 <div>
  <img :src="imgSrc" alt="数据库图片" v-if="imgSrc" />
 </div>
</template>
<script>
 export default{
  data(){
   return{
    imgSrc:null
   }
  }
  mounted(){
   axios.get("接口地址")
    .then(response=>{
     this.imgSrc=response.data.imgSrc
    })
    .catch(error=>{
     console.log(error)
    })
  }
 }
</script>

• vue3函数式组件（composition api）

<template>
 <div>
  <img :src="imgSrc" alt="数据库图片" v-if="imgSrc" />
 </div>
</template>
<script>
 export default{
  setup(){
   const imgSrc=ref(null)
   onMounted(()=>{
    axios.get("接口地址")
     .then(response=>{
      imgSrc.value=response.data.imgSrc
     })
     .catch(error=>{
      console.log(error)
     })
   })
   return{
    imgSrc
   }
  }
 }
</script>