快捷導(dǎo)航

React組件與事件的創(chuàng)建使用教程

更新時(shí)間：2023年02月10日 10:11:53 作者：Morningo

react事件綁定時(shí)。this并不會(huì)指向當(dāng)前DOM元素。往往使用bind來(lái)改變this指向，今天通過(guò)本文給大家介紹React事件綁定的方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

創(chuàng)建組件

函數(shù)組件

函數(shù)組件：使用JS的函數(shù)或者箭頭函數(shù)創(chuàng)建的組件

使用 JS 的函數(shù)(或箭頭函數(shù))創(chuàng)建的組件，叫做函數(shù)組件
約定1：函數(shù)名稱(chēng)必須以大寫(xiě)字母開(kāi)頭，React 據(jù)此區(qū)分組件和普通的 HTML
約定2：函數(shù)組件必須有返回值，表示該組件的 UI 結(jié)構(gòu)

// 1. 導(dǎo)包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2. 創(chuàng)建 函數(shù)式組件
// 普通函數(shù)或者箭頭函數(shù)創(chuàng)建組件，首字母大寫(xiě)
// 組件必須要有返回值
function Music() {
  return (
    <div>
      <h1>haha</h1>
    </div>
  )
}
const VNode = (
  <div>
    <Music></Music>
  </div>
)
// 3. 掛載
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

類(lèi)組件

類(lèi)組件：使用 ES6 的 class 創(chuàng)建的組件，叫做類(lèi)（class）組件

約定1：類(lèi)名稱(chēng)也必須以大寫(xiě)字母開(kāi)頭
約定2：類(lèi)組件應(yīng)該繼承 React.Component 父類(lèi)，從而使用父類(lèi)中提供的方法或?qū)傩?/li>
約定3：類(lèi)組件必須提供 render 方法
約定4：render 方法必須有返回值，表示該組件的 UI 結(jié)構(gòu)

// 1. 導(dǎo)包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2.
class Hello extends React.Component {
  render() {
    return <h1>哈哈</h1>
  }
}
const VNode = (
  <>
    <Hello></Hello>
  </>
)
// 3. 掛載
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

組件提取到單獨(dú)的文件中

在components文件夾下，創(chuàng)建函數(shù)組件hello.js，類(lèi)組件home.js,

hello.js

const Hello = () => <h1>我是hello組件</h1>
export default Hello

home.js

import React from 'react'
class Home extends React.Component {
  render() {
    return <h2>home</h2>
  }
}
export default Home

在index.js中導(dǎo)入

// 1. 導(dǎo)包
import React from 'react'
import ReactDom from 'react-dom/client'
// 導(dǎo)入組件
import Hello from './components/hello'
import Home from './components/home'
// 2. 創(chuàng)建虛擬DOM
const App = (
  <>
    <Hello></Hello>
    <Home></Home>
  </>
)
// 3. 掛載
ReactDom.createRoot(document.querySelector('#root')).render(App)

有狀態(tài)組件與無(wú)狀態(tài)組件

狀態(tài)即數(shù)據(jù)

函數(shù)組件又叫做無(wú)狀態(tài)組件函數(shù)組件是不能自己提供數(shù)據(jù) 【前提：基于hooks之前說(shuō)的 16.8之前】
類(lèi)組件又叫做有狀態(tài)組件類(lèi)組件可以自己提供數(shù)據(jù)，數(shù)據(jù)如果發(fā)生了改變，內(nèi)容會(huì)自動(dòng)的更新
組件的私有數(shù)據(jù)也稱(chēng)為狀態(tài) ，當(dāng)組件的狀態(tài)發(fā)生了改變，頁(yè)面結(jié)構(gòu)也就發(fā)生了改變?！緮?shù)據(jù)驅(qū)動(dòng)視圖】
函數(shù)組件是沒(méi)有狀態(tài)的，只負(fù)責(zé)頁(yè)面的展示（靜態(tài)，不會(huì)發(fā)生變化）性能比較高
類(lèi)組件有自己的狀態(tài)，負(fù)責(zé)更新UI，只要類(lèi)組件的數(shù)據(jù)發(fā)生了改變，UI就會(huì)發(fā)生更新（動(dòng)態(tài)）。
在復(fù)雜的項(xiàng)目中，一般都是由函數(shù)組件和類(lèi)組件共同配合來(lái)完成的。

// 1. 導(dǎo)包
import React from "react"
import ReactDom from 'react-dom/client'
// 函數(shù)組件  沒(méi)有狀態(tài)  僅僅做一些數(shù)據(jù)展示的工作，可以使用函數(shù)組件
// function App() {
//   return (
//     <div>我是組件</div>
//   )
// }
// 類(lèi)組件  有狀態(tài)  如果有狀態(tài)，狀態(tài)需要切換，更新視圖 用類(lèi)組件
class App extends React.Component {
  render() {
    return (
      <h1>我是類(lèi)組件</h1>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

類(lèi)組件的狀態(tài)

狀態(tài)state即數(shù)據(jù)，是組件內(nèi)部的私有數(shù)據(jù),只有在組件內(nèi)部可以使用
state的值是一個(gè)對(duì)象,表示一個(gè)組件中可以有多個(gè)數(shù)據(jù)
通過(guò) this.state.xxx 來(lái)獲取狀態(tài)

// 1. 導(dǎo)包
import React from "react"
import ReactDom from 'react-dom/client'
// 類(lèi)組件  有狀態(tài)  如果有狀態(tài)，狀態(tài)需要切換，更新視圖 用類(lèi)組件
class App extends React.Component {
  // state節(jié)點(diǎn)中提供狀態(tài)
  // 通過(guò) this.state.xxx 來(lái)獲取狀態(tài)
  state = {
    name: 'Tt',
    age: 17
  }
  render() {
    return (
      <h1>{this.state.name} ----- {this.state.age}</h1>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

事件處理

注冊(cè)事件

語(yǔ)法：on+事件名=｛事件處理程序｝ 比如onClick={this.handleClick}

// 1. 導(dǎo)包
import React from "react"
import ReactDom from 'react-dom/client'
// 類(lèi)組件  有狀態(tài)  如果有狀態(tài)，狀態(tài)需要切換，更新視圖 用類(lèi)組件
class App extends React.Component {
  // state節(jié)點(diǎn)中提供狀態(tài)    通過(guò) this.state.xxx 來(lái)獲取狀態(tài)
  state = {
    name: 'Tt',
    age: 17
  }
  // 提供一些方法
  handleClick() {
    console.log('點(diǎn)擊');
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>按鈕</button>
      </div>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

到此這篇關(guān)于React組件與事件的創(chuàng)建使用教程的文章就介紹到這了,更多相關(guān)React組件與事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: