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

學無先后，達者為師

網站首頁 編程語言 正文

React組件與事件的創建使用教程_React

作者：Morningo ? 更新時間： 2023-04-24 編程語言

創建組件

函數組件

函數組件：使用JS的函數或者箭頭函數創建的組件

  • 使用 JS 的函數(或箭頭函數)創建的組件，叫做函數組件
  • 約定1：函數名稱必須以大寫字母開頭，React 據此區分組件和普通的 HTML
  • 約定2：函數組件必須有返回值，表示該組件的 UI 結構
// 1. 導包
import React from 'react'
import ReactDom from 'react-dom/client'
// 2. 創建 函數式組件
// 普通函數或者箭頭函數創建組件，首字母大寫
// 組件必須要有返回值
function Music() {
  return (
    <div>
      <h1>haha</h1>
    </div>
  )
}
const VNode = (
  <div>
    <Music></Music>
  </div>
)
// 3. 掛載
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

類組件

類組件：使用 ES6 的 class 創建的組件，叫做類（class）組件

  • 約定1：類名稱也必須以大寫字母開頭
  • 約定2：類組件應該繼承?React.Component?父類，從而使用父類中提供的方法或屬性
  • 約定3：類組件必須提供?render?方法
  • 約定4：render 方法必須有返回值，表示該組件的 UI 結構
// 1. 導包
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)

組件提取到單獨的文件中

在components文件夾下，創建函數組件hello.js，類組件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中導入

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

有狀態組件與無狀態組件

狀態即數據

  • 函數組件又叫做無狀態組件 函數組件是不能自己提供數據 【前提：基于hooks之前說的 16.8之前】
  • 類組件又叫做有狀態組件類組件可以自己提供數據，數據如果發生了改變，內容會自動的更新
  • 組件的私有數據也稱為狀態 ，當組件的狀態發生了改變，頁面結構也就發生了改變。【數據驅動視圖】
  • 函數組件是沒有狀態的，只負責頁面的展示（靜態，不會發生變化）性能比較高
  • 類組件有自己的狀態，負責更新UI，只要類組件的數據發生了改變，UI就會發生更新（動態）。
  • 在復雜的項目中，一般都是由函數組件和類組件共同配合來完成的。
// 1. 導包
import React from "react"
import ReactDom from 'react-dom/client'
// 函數組件  沒有狀態  僅僅做一些數據展示的工作，可以使用函數組件
// function App() {
//   return (
//     <div>我是組件</div>
//   )
// }
// 類組件  有狀態  如果有狀態，狀態需要切換，更新視圖 用類組件
class App extends React.Component {
  render() {
    return (
      <h1>我是類組件</h1>
    )
  }
}
const VNode = (
  <div>
    <App></App>
  </div>
)
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

類組件的狀態

  • 狀態state即數據，是組件內部的私有數據,只有在組件內部可以使用
  • state的值是一個對象,表示一個組件中可以有多個數據
  • 通過 this.state.xxx 來獲取狀態
// 1. 導包
import React from "react"
import ReactDom from 'react-dom/client'
// 類組件  有狀態  如果有狀態，狀態需要切換，更新視圖 用類組件
class App extends React.Component {
  // state節點中提供狀態
  // 通過 this.state.xxx 來獲取狀態
  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)

事件處理

注冊事件

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

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

原文鏈接：https://blog.csdn.net/qq_41675812/article/details/128961155

欄目分類
最近更新