React三大屬性之props怎么用

這篇文章主要介紹React三大屬性之props怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

props功能在于組件間通信（父子組件），首先說(shuō)說(shuō)在各種組件中的用法：

類組件

//父組件傳值
class Father extends React.PureComponent{
    render(){
        return (
            <Son value={"son"} />
        )
    }
}

class Son extends React.PureComponent{
    render(){
        return (
            <div>this data is {this.props.value}</div>
        )
    }
}

函數(shù)組件

function Fa(){
    return (
        <Son value={"son"} />
    )
}

function Son(props){
    return (
        <div>this data is {props.value}</div>
    )
}

在函數(shù)組件中，props只需要傳一個(gè)值就好了，非常方便 在React文檔中，對(duì)props的解釋是

當(dāng) React 元素為用戶自定義組件時(shí)，它會(huì)將 JSX 所接收的屬性（attributes）以及子組件（children）轉(zhuǎn)換為單個(gè)對(duì)象傳遞給組件，這個(gè)對(duì)象被稱之為 “props”

所以，我們通過(guò)props能得到父類組件上傳的值，也能通過(guò)props.children直接得到j(luò)sx寫(xiě)成的子組件

props是只讀的

React在文檔中強(qiáng)調(diào)

所有 React 組件都必須像純函數(shù)一樣保護(hù)它們的 props 不被更改。

純函數(shù)的概念我們已經(jīng)在redux中解釋過(guò)了，總而言之，我們不能改變props的值。

組件間通信

現(xiàn)在來(lái)總結(jié)一下組件間通信:

• props 首先上一個(gè)類組件的寫(xiě)法：

//父組件給子組件傳值以及說(shuō)過(guò)了，現(xiàn)在總結(jié)子組件給父組件傳值,此時(shí)往往需要父組件給子組件先傳一個(gè)props函數(shù)，子組件通過(guò)調(diào)用傳入的函數(shù)傳值改變父組件的值
export default class Fa extends Component {
    state = {faValue:'Fa1'}

    changeFa = (value)=>{
        this.setState(()=>{
            return {faValue:value}
        })
    }
    render() {
        return (
            <>
                <h2>Fa's value is {this.state.faValue}</h2>
                <Son changeFa={this.changeFa}/>
            </>
        )
    }
}

export default class Son extends React.PureComponent{

    changeValue = ()=>{
        this.props.changeFa(this.inputRef.value)
    }
    render() {
        return (
            <>
                <input type="text" placeholder={"請(qǐng)輸入您的值"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>change</button>
            </>
        )
    }
}

然后寫(xiě)一個(gè)函數(shù)組件的寫(xiě)法：

function Fa(){
    const [faValue,setFaValue] = useState("Fa1")

    const changeFa = (value)=>{
        setFaValue(value)
    }
    return (
        <div>
            <h2>Fa's value is {faValue}</h2>
            <Son changeFa={changeFa} />
        </div>
    )
}

function Son(props){
    const inputValue = useRef("")
        //定義改變fa組件的值的函數(shù)
        const changeFaValue = ()=>{
            props.changeFa(inputValue.current.value)
        }
        return (
            <>
                <input type="text" placeholder={"請(qǐng)輸入您要改變的值"} ref={inputValue}/>
                <button onClick={changeFaValue}>change value</button>
            </>
        )
}

• eventbus(訂閱-發(fā)布機(jī)制)
  

這個(gè)可以理解為弱化的redux。這邊我們用庫(kù)pubsub-js來(lái)寫(xiě)。寫(xiě)法如下：

//比如針對(duì)之前的輸入案例，我需要給兄弟組件傳一個(gè)值value，如果不用props,我們?cè)撛趺磳?xiě)
Bro:
export default class Bro extends Component {

    componentDidMount() {
        this.sonData =  PubSub.subscribe("brother",(msg,data)=>{
            console.log("Bro Component have recived the msg",data);
        })
    }

    componentWillUnmount() {
        PubSub.unsubscribe(this.sonData)
    }

    render() {
        return (
            <>
                <div>brother</div>
            </>
        )
    }
}
Son:
export default class Son extends React.PureComponent{

    changeValue = ()=>{
        PubSub.publish("brother",this.inputRef.value)
    }

    render() {
        return (
            <>
                <input type="text" placeholder={"請(qǐng)輸入您的值"} ref={(el)=>{this.inputRef = el}}/>
                <button onClick={this.changeValue}>change</button>
            </>
        )
    }
}

這個(gè)方法常用的就是三個(gè)api，第一個(gè)subscribe,發(fā)布的相應(yīng)的事件，并且定義事件要做什么事。第二個(gè)是publish，訂閱發(fā)布的事情，并且傳入相應(yīng)要改變的值。第三個(gè)是unsubscribe用來(lái)取消發(fā)布的事情，做內(nèi)存的優(yōu)化

以上是“React三大屬性之props怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！