日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

react中的雙向綁定你真的了解嗎_React

作者：前端三腳貓 ? 更新時(shí)間： 2022-05-07 編程語言

前言：因?yàn)轫?xiàng)目原因需要學(xué)習(xí)另一個(gè)超級(jí)火的框架react, 因?yàn)橹耙恢笔褂胿ue進(jìn)行開發(fā)，所以在學(xué)習(xí)react中會(huì)不自覺的代入一些vue中的概念來理解react中的實(shí)現(xiàn)，下面就通過對(duì)比學(xué)習(xí)的方式記錄下react中的知識(shí)。

在react中其實(shí)是沒有雙向綁定的概念，每次更新頁面和值都需要我們自己去調(diào)用指定的api來觸發(fā)，而在vue中只需要使用v-model指令就可以完全實(shí)現(xiàn)，在vue中的指令其實(shí)也是使用了幾個(gè)事件的語法糖來實(shí)現(xiàn)，所以下面就去看下react中的“雙向綁定”是怎么來實(shí)現(xiàn)的。

如果實(shí)現(xiàn)react中得雙向綁定，首先要理解state這個(gè)屬性，簡單來說react中得state就是一個(gè)對(duì)象，它用來緩存和維護(hù)當(dāng)前組件中所使用到得狀態(tài)，可以理解為vue中data中定義得值，如：

import React, { Component } from 'react'
export default class Class extends Component {
  constructor(props) {
    super(props)
    this.state = {name: '', age: ''}
  }
  render() {
    return (
      

        

        

      

    )
  }
}

而在函數(shù)式組件中，使用hooks可以將這個(gè)統(tǒng)一的state值根據(jù)功能和場(chǎng)景拆分為多個(gè)state用來更加方便的使用和維護(hù)，如：

import React, { useState } from 'react'
export default function ModelChange() {
  const [name, setName] = useState('')
  const [age, setAge] = useState()
  const handleSubmit = () => {
  }
  return (
    

      

      

    

  )
}

需要注意的是，如果需要改變維護(hù)的狀態(tài)的值，需要使用指定的方法才會(huì)使頁面更新，如函數(shù)式組件中定義的setName方法等。下面就看看react在input輸入框中實(shí)現(xiàn)雙向綁定，代碼如下：

import React, { useState } from 'react'
export default function ModelChange() {
  const [name, setName] = useState('')
  const handleCnhange = e => {
    const data = e.target.value
    setName(data)
  }
  return (
    

      

        
      

    

  )
}

上面的代碼通過useState定義了值name，然后通過input標(biāo)簽的value將name展示出來，通過監(jiān)聽change事件獲取輸入的值并調(diào)用定義好的方法setName修改name的值并更新頁面，又使頁面展示為新輸入的值，通過這個(gè)流程的操作就實(shí)現(xiàn)了在react中的雙向綁定。如果我們想要修改和獲取多個(gè)輸入的值可以使用name屬性來實(shí)現(xiàn)，代碼如下：

import React, { useState } from 'react'
export default function ModelChange() {
  const [data, setData] = useState({
    name: '', age: ''
  })
  const handleCnhange = e => {
    const {value, name} = e.target
    setData(preData => {
      return {
        ...preData,
        [name]: value
      }
    })
  }
  const handleSubmit = (e) => {
    console.log(data)
  }
  return (
    

      

        
        
        
      

    

  )
}

上面代碼將name和age字段聲明在了一個(gè)集合中（根據(jù)業(yè)務(wù)和使用場(chǎng)景也可以進(jìn)行拆分定義），通過給input標(biāo)簽添加name屬性來更給指定屬性更新當(dāng)前輸入的值，效果如下：

在這里插入圖片描述

總結(jié)

原文鏈接：https://blog.csdn.net/weixin_43911758/article/details/123312684

欄目分類
最近更新