React組件的創(chuàng)建與state同步異步詳解

更新時(shí)間：2023年03月14日 09:29:05 作者：旺仔好吃糖

這篇文章主要介紹了react組件實(shí)例屬性state,有狀態(tài)state的組件稱作復(fù)雜組件,沒(méi)有狀態(tài)的組件稱為簡(jiǎn)單組件，狀態(tài)里存儲(chǔ)數(shù)據(jù),數(shù)據(jù)的改變驅(qū)動(dòng)頁(yè)面的展示，本文結(jié)合實(shí)例代碼給大家詳細(xì)講解，需要的朋友可以參考下

組件的創(chuàng)建

類組件

類組件是指使用ES6中class定義的組件稱為類組件

導(dǎo)入類組件時(shí) 組件名首字母必須大寫(xiě)

類組件必須要繼承React.Component父類（相關(guān)方法和屬性均會(huì)被繼承）

render為固定函數(shù)（必須有），有返回值，返回類組件的結(jié)構(gòu)(jsx)

??定義類組件并暴露

import React from 'react'
//App為類名 可隨意起 繼承 React.Component(固定，不可丟掉)
class App extends React.Component{
render(){
  render(){
    //1.return若要回車(chē)必須加上（）
    //2.最外層只能有一個(gè)標(biāo)簽，不能有兄弟并列
    return (
        <section>
            hello react
            <ul>
                <li>1111</li>
                <li>222</li>
            </ul>
            <div>新的內(nèi)容111</div>
            <div>新的內(nèi)容2222</div>
        </section>
    )
}
}
}
export default App       //導(dǎo)出：方便被其他組件引用

??在src下的 index.js入口文件中導(dǎo)入需要的App類組件

React 17之前版本
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./01-base/01-class組件"  //引入時(shí)必須大寫(xiě)
ReactDOM.render(<App></App>,document.getElementById("root"))
......................................
React 18版本
import {createRoot} from 'react-dom/client'
import App from "./01-base/01-class組件"    //導(dǎo)入App組件
const container = document.getElementById('root')
const root = createRoot(container);        //App放入的位置
root.render(<App/>)         //單雙標(biāo)簽均可以

函數(shù)式組件

function App(){
    return (
        <div>
            hello functional component
            <div>111</div>
            <div>2222</div>
        </div>
    )
}
export default App

組件的嵌套

import React, { Component } from 'react'
class Child extends Component{
    render(){
        return <div>child</div>
    }
}
class Navbar extends Component{
    render(){
        return (
            <div>
                navbr
                <Child></Child>
            </div>
        )
    }
}
function Swiper(){
    return <div>swiper</div>
}
const Tabbar = ()=> <div>tabbar</div>
//以上3種子組件的形式 均可進(jìn)行嵌套
export default class App extends Component {
  render() {
    return (
      <div>
        <Navbar></Navbar>
        <Swiper></Swiper>
        <Tabbar></Tabbar>
      </div>
    )
  }
}
........................................
import App from "./01-base/03-組件的嵌套"
import {createRoot} from 'react-dom/client'
const container = document.getElementById('root')
const root = createRoot(container);
root.render(<App/>)

組件的樣式

推薦使用行內(nèi)樣式，因?yàn)镽eact覺(jué)得每個(gè)組件都是一個(gè)獨(dú)立的整體

行內(nèi)樣式

想給虛擬dom添加行內(nèi)樣式，需要使用表達(dá)式傳入樣式對(duì)象的方式來(lái)實(shí)現(xiàn)

  render() {
    var myname = 'xiaoming'
    var isChecked = false
    var obj = {
        backgroundColor:"yellow"，
        fontSize:""http://駝峰命名法
    }
    return (
      <div>
        {myname}-{10+20}-歲
        {10>20?"a":"b"}
        <div style={obj}>111</div>
		<div style={style={{textDecoration:isChecked?"line-through":''}}>
		//這里有兩個(gè)括號(hào)，第一個(gè)表示我們?cè)僖狫SX里插入了JS了，第二個(gè)是對(duì)象的括號(hào)
        <div style={{background:"red"}}>222</div>
      </div>
    )
  }

??1. {}里面為js表達(dá)式，不支持語(yǔ)句

??2. 行內(nèi)樣式需要寫(xiě)入一個(gè)樣式對(duì)象如上面的obj，這個(gè)樣式對(duì)象的位置可以放在很多地方，例如render函數(shù)里、組件原型上、外鏈js文件中

class樣式

css文件中寫(xiě)入樣式
導(dǎo)入css文件
為元素添加class類名（class需要寫(xiě)成className,在寫(xiě)類js代碼，會(huì)受到j(luò)s規(guī)則的存在，而class為關(guān)鍵字）

 <div className="active">333</div>
 <div id="myapp">444</div>

???? ?? class ==> className，for ===> htmlFor(label) ???? ??

<label htmlFor='username'>用戶名：</label>
<input type="text" id="username"></input>

事件處理

事件綁定

??render內(nèi)使用箭頭函數(shù)— 直接使用this

a = 100
render(){
    return(
        <button onClick={ ()=>{
            console.log("click1","如果處理邏輯過(guò)多不推薦",this.a);
		} }>add1</button>
    )
}

箭頭函數(shù)作用域?yàn)锳pp，所以this直接為App

??render內(nèi)調(diào)用函數(shù)，函數(shù)普通函數(shù) – 使用bind改變this指向

a = 100
render(){
    return(
         {/* call,apply改變this指向并自動(dòng)執(zhí)行函數(shù)；bind改變this指向不自動(dòng)執(zhí)行 */}
        <button onClick={ this.handleClick2.bind(this)}>add2-不推薦</button>
    )
}
handleClick2(){
    console.log("click2",this.a)
}

render內(nèi)剛開(kāi)始 this 為 undefined，通過(guò)使用 bind 將this指向改為App

??render內(nèi)調(diào)用函數(shù)，函數(shù)箭頭函數(shù) – 直接使用this

a = 100
render(){
    return(
          <button onClick={ this.handleClick3 }>add3-比較推薦</button>
    )
}
handleClick3 = ()=>{
    console.log("click3",this.a)
}

??render內(nèi)使用箭頭函數(shù)調(diào)用函數(shù) – 直接使用this

a = 100
render(){
    return(
        {/* 非常推薦 */}
        <button onClick={ ()=>{
            this.handleClick4()  
        } }>add4</button>
        {/* 執(zhí)行匿名函數(shù)后調(diào)用handleClick4 */}
    )
}
handleClick4 = ()=>{
    console.log("click4",this.a)
}

onClick里面的this為App，所以當(dāng)handleClick被調(diào)用時(shí)不論是箭頭函數(shù)還是普通函數(shù)this均和調(diào)用者相同都為App

事件的參數(shù)傳遞

??1. 在render里調(diào)用方法的地方外面包一層箭頭函數(shù)

??2. 在render里通過(guò)this.handleClick.bind(this,參數(shù))來(lái)傳遞

??3. 通過(guò)event傳遞

ref的應(yīng)用

??給標(biāo)簽設(shè)置ref=“mytext”

<input ref="mytext"></input>
<button onClick={ ()=>{
   console.log("click1",this.refs.mytext.value);
} }>add1</button>

通過(guò) this.refs.mytext，ref可以獲取到應(yīng)用的真實(shí)dom

?? 給組件設(shè)置ref="username

通過(guò)這個(gè)獲取 this.refs.username ，ref可以獲取到組件對(duì)象

??新的寫(xiě)法（嚴(yán)格模式下）

myref = React.createRef()
<input ref={this.myref}></input>
<button onClick={ ()=>{
   console.log("click",this.myref.current.value);
} }>add1</button>

訪問(wèn) this.myref.current

狀態(tài)(state)

狀態(tài)就是組件描述某種顯示情況的數(shù)據(jù)，由組件自己設(shè)置和更改，也就是說(shuō)組件自己維護(hù)，使用狀態(tài)的目的就是為了在不同的狀態(tài)下是組建的顯示不同（自己管理）

定義state

state={
    mytext:"收藏",
    myShow:true
}
render(){
    return(
        <div>
        <h1>welcome</h1>
        <button onClick={()=>{
        	 //this.state.mytext = "取消收藏" 不用直接修改state
        }}>{this.state.mytext}</button>
      </div>
    )
}

this.state是純js對(duì)象，在vue中，data屬性利用Object.defineProperty處理過(guò)的，更改data的數(shù)據(jù)的時(shí)候回出發(fā)數(shù)據(jù)的getter和setter,但是React中沒(méi)有這樣的處理，如果直接更改，react無(wú)法得知，所以需要使用setState間接修改

setState

myShow存放在實(shí)例的state對(duì)象當(dāng)中，組件的render函數(shù)內(nèi)，會(huì)根據(jù)組件的state的中的myShow不同顯示“取消”或“收藏”

可以一次更新多個(gè)狀態(tài)

import React, { Component } from 'react'
export default class App extends Component {
  // state={
  //   mytext:"收藏",
  //   myShow:true
  // }
  constructor(){
    super()//必須寫(xiě)
    this.state={
      mytext:"收藏",
      myShow:true,
      myName:"xiaoming"
    }
  }
  //  ?。。。∫陨蟽煞Nstate寫(xiě)法均可以!!!
  render() {
    return (
      <div>
        <h1>welcome--我的名字是{this.state.myName}</h1>

        <button onClick={()=>{
            //this.state.mytext = "取消收藏" 不用直接修改state
            this.setState({
                //mytext:"取消收藏"
                myName:'zhangsan',
                myShow:!this.state.myShow
            })//間接修改state
            if(this.state.myShow){
                console.log("收藏邏輯");
            }else{
                console.log("取消邏輯");
            }
        }}>{this.state.myShow?'收藏':'取消收藏'}</button>
      </div>
    )
  }
}

setState同步異步

setState處在同步的邏輯中，異步更新?tīng)顟B(tài)，更新真實(shí)dom
setState處在異步的邏輯中，同步更新?tīng)顟B(tài)，同步更新真實(shí)dom
setState接受第二個(gè)參數(shù)，第二個(gè)參數(shù)回調(diào)函數(shù)，狀態(tài)和dom更新后就會(huì)被觸發(fā)

補(bǔ)充-React面試題

react事件綁定和普通事件綁定的區(qū)別

React并不會(huì)真正的綁定事件到每一個(gè)具體的《》元素上，而是采用事件代理的模式，綁定在根節(jié)點(diǎn)身上

Event對(duì)象

和普通瀏覽器一樣，事件handler會(huì)被自動(dòng)傳入一個(gè)event對(duì)象，這個(gè)對(duì)象和普通的瀏覽器event對(duì)象所包含的方法和屬性基本一致。不同的是React中的event對(duì)象并不是瀏覽器提供的，而是自己內(nèi)部構(gòu)建的。他同樣具有event.stopPropagation、event.preventDefalut這種常用方法

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

您可能感興趣的文章: