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

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

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

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

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

創(chuàng)建組件

函數(shù)組件

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

  • 使用 JS 的函數(shù)(或箭頭函數(shù))創(chuàng)建的組件，叫做函數(shù)組件
  • 約定1：函數(shù)名稱必須以大寫字母開頭，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)建組件，首字母大寫
// 組件必須要有返回值
function Music() {
  return (
    <div>
      <h1>haha</h1>
    </div>
  )
}
const VNode = (
  <div>
    <Music></Music>
  </div>
)
// 3. 掛載
ReactDom.createRoot(document.querySelector('#root')).render(VNode)

類組件

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

  • 約定1：類名稱也必須以大寫字母開頭
  • 約定2：類組件應(yīng)該繼承?React.Component?父類，從而使用父類中提供的方法或?qū)傩?/li>
  • 約定3：類組件必須提供?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，類組件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)組件與無狀態(tài)組件

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

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

類組件的狀態(tài)

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

事件處理

注冊事件

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

// 1. 導(dǎo)包
import React from "react"
import ReactDom from 'react-dom/client'
// 類組件  有狀態(tài)  如果有狀態(tài)，狀態(tài)需要切換，更新視圖 用類組件
class App extends React.Component {
  // state節(jié)點(diǎn)中提供狀態(tài)    通過 this.state.xxx 來獲取狀態(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)

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

欄目分類
最近更新