快捷導(dǎo)航

React組件的數(shù)據(jù)掛載實(shí)現(xiàn)方式

更新時(shí)間：2025年07月29日 09:02:56 作者：來自萬古的憂傷

React中state為組件內(nèi)部可變數(shù)據(jù),通過setState更新；props為外部傳入的不可變參數(shù),兩者均可觸發(fā)渲染,但state由組件維護(hù),props由父組件控制,列表需用key優(yōu)化性能,dangerouslySetInnerHTML用于內(nèi)聯(lián)HTML

1、狀態(tài)(state)

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

(1) 定義state

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    state = {name: 'React', isLiked: false}

    render() {
        return (
            <div><h1>歡迎來到{this.state.name}的世界</h1>
                <button> {this.state.isLiked ? '?取消' : '??收藏'}
                </button>
            </div>)
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {name: 'React', isLiked: false}
    }

    render() {
        return (<div><h1>歡迎來到{this.state.name}的世界</h1>
            <button> {this.state.isLiked ? '?取消' : '??收藏'}
            </button>
        </div>)
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))

this.state 是純js對象,在vue中，data屬性是利用 Object.defineProperty 處理過的，更改data的數(shù)據(jù)的時(shí)候會觸發(fā)數(shù)據(jù)的 getter 和 setter ，但是React中沒有做這樣的處理，如果直接更改的話，react是無法得知的，所以，需要使用特殊的更改狀態(tài)的方法 setState 。

(2) setState

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

下面給 button 加上了點(diǎn)擊的事件監(jiān)聽。

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            name: 'React',
            isLiked: false
        }
    }

    handleBtnClick = () => {
        this.setState({
            isLiked: !this.state.isLiked
        })
    }

    render() {
        return (
            <div>
                <h1>歡迎來到{this.state.name}的世界</h1>
                <button onClick={this.handleBtnClick}>
                    {
                        this.state.isLiked ? '?取消' : '??收藏'
                    }
                </button>
            </div>
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)

setState 有兩個(gè)參數(shù)

第一個(gè)參數(shù)可以是對象，也可以是方法return一個(gè)對象，我們把這個(gè)參數(shù)叫做 updater

參數(shù)是對

this.setState({
  isLiked: !this.state.isLiked
})

參數(shù)是方法

this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
})

注意的是這個(gè)方法接收兩個(gè)參數(shù)，第一個(gè)是上一次的state, 第二個(gè)是props setState 是異步的，所以想要獲取到最新的state，沒有辦法獲取，就有了第二個(gè)參數(shù)，這是一個(gè)可選的回調(diào)函

this.setState((prevState, props) => {
  return {
    isLiked: !prevState.isLiked
  }
}, () => {
  console.log('回調(diào)里的',this.state.isLiked)
})
console.log('setState外部的',this.state.isLiked)

2、屬性(props)

props 是正常是外部傳入的，組件內(nèi)部也可以通過一些方式來初始化的設(shè)置，屬性不能被組件自己更改，但是你可以通過父組件主動重新渲染的方式來傳入新的 props 屬性是描述性質(zhì)、特點(diǎn)的，組件自己不能隨意更改。

之前的組件代碼里面有 props 的簡單使用，總的來說，在使用一個(gè)組件的時(shí)候，可以把參數(shù)放在標(biāo)簽的屬性當(dāng)中，所有的屬性都會作為組件 props 對象的鍵值。通過箭頭函數(shù)創(chuàng)建的組件，需要通過函數(shù)的參數(shù)來接收

props :

(1) 在組件上通過key=value 寫屬性,通過this.props獲取屬性,這樣組件的可復(fù)用性提高了。

(2) 注意在傳參數(shù)時(shí)候，如果寫成isShow=“true” 那么這是一個(gè)字符串如果寫成isShow={true} 這個(gè)是布爾值

(3) {…對象} 展開賦值

(4) 默認(rèn)屬性值

*.defaultProps = {
}
static defaultProps = {
  myname:"默認(rèn)的myname",
  myshow:true
}

(5) prop-types 屬性驗(yàn)證

import propTypes from "prop-types";

*.propTypes = {
    name: propTypes.string,
    age: propTypes.number
}
static propTypes = {
    myname: propTypes.string,
    myshow: propTypes.bool
}

3、屬性vs狀態(tài)

相似點(diǎn)：都是純js對象，都會觸發(fā)render更新，都具有確定性（狀態(tài)/屬性相同，結(jié)果相同）

不同點(diǎn)：

屬性能從父組件獲取，狀態(tài)不能
屬性可以由父組件修改，狀態(tài)不能
屬性能在內(nèi)部設(shè)置默認(rèn)值，狀態(tài)也可以，設(shè)置方式不一樣
屬性不在組件內(nèi)部修改，狀態(tài)要在組件內(nèi)部修改
屬性能設(shè)置子組件初始值，狀態(tài)不可以
屬性可以修改子組件的值，狀態(tài)不可以

state 的主要作用是用于組件保存、控制、修改自己的可變狀態(tài)。 state 在組件內(nèi)部初始化，可以被組件自身修改，而外部不能訪問也不能修改。你可以認(rèn)為 state 是一個(gè)局部的、只能被組件自身控制的數(shù)據(jù)源。

state 中狀態(tài)可以通過 this.setState 方法進(jìn)行更新， setState 會導(dǎo)致組件的重新渲染。

props 的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來配置該組件。它是外部傳進(jìn)來的配置參數(shù)，組件內(nèi)部無法控制也無法修改。除非外部組件主動傳入新的 props ，否則組件的 props 永遠(yuǎn)保持不變。

沒有 state 的組件叫無狀態(tài)組件（stateless component），設(shè)置了 state 的叫做有狀態(tài)組件（stateful component）。因?yàn)闋顟B(tài)會帶來管理的復(fù)雜性，我們盡量多地寫無狀態(tài)組件，盡量少地寫有狀態(tài)的組件。這樣會降低代碼維護(hù)的難度，也會在一定程度上增強(qiáng)組

4、渲染數(shù)據(jù)

條件渲染

{
condition ? '渲染列表的代碼' : '空空如也'
}

列表渲染

// 數(shù)據(jù)
const people = [{
    id: 1,
    name: 'Leo',
    age: 35
}, {
    id: 2,
    name: 'XiaoMing',
    age: 16
}]
// 渲染列表
{
    people.map(person => {
        return (
            <dl key={person.id}>
                <dt>{person.name}</dt>
                <dd>age: {person.age}</dd>
            </dl>
        )
    })
}

React的高效依賴于所謂的 Virtual-DOM，盡量不碰 DOM。

對于列表元素來說會有一個(gè)問題：元素可能會在一個(gè)列表中改變位置。要實(shí)現(xiàn)這個(gè)操作，只需要交換一下 DOM 位置就行了，但是React并不知道其實(shí)我們只是改變了元素的位置，所以它會重新渲染后面兩個(gè)元素（再執(zhí)行 Virtual-DOM ），這樣會大大增加 DOM 操作。

但如果給每個(gè)元素加上唯一的標(biāo)識，React 就可以知道這兩個(gè)元素只是交換了位置，這個(gè)標(biāo)識就是 key ，這個(gè) key 必須是每個(gè)元素唯一的標(biāo)識dangerouslySetInnerHTML

對于富文本創(chuàng)建的內(nèi)容，后臺拿到的數(shù)據(jù)是

content = "<p>React.js是一個(gè)構(gòu)建UI的庫</p>"

處于安全的原因，React當(dāng)中所有表達(dá)式的內(nèi)容會被轉(zhuǎn)義，如果直接輸入，標(biāo)簽會被當(dāng)成文本。

這時(shí)候就需要使用 dangerouslySetHTML 屬性，它允許我們動態(tài)設(shè)置 innerHTML

import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
    constructor() {
        super()
        this.state = {
            content: "<p>React.js是一個(gè)構(gòu)建UI的庫</p>"
        }
    }

    render() {
        return (
            <div
                // 注意這里是兩個(gè)下下劃線 __html
                dangerouslySetInnerHTML={{__html: this.state.content}}
            />
        )
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
)