" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一篇文章帶你理解React Props的 原理

 更新時(shí)間:2022年01月15日 17:09:13   作者:YuLong~W  
這篇文章主要為大家介紹了ReactProps的原理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

props理解

props 是 React 組件通信最重要的手段

props:對(duì)于在 React 應(yīng)用中寫的子組件,父組件綁定在它們標(biāo)簽里的 屬性和方法,最終會(huì)變成 props 傳遞給它們。

1)props 可以是:

  • ① props 作為一個(gè)子組件渲染數(shù)據(jù)源。
  • ② props 作為一個(gè)通知父組件的回調(diào)函數(shù)。
  • ③ props 作為一個(gè)單純的組件傳遞。
  • ④ props 作為渲染函數(shù)。
  • ⑤ render props , 和④的區(qū)別是放在了 children 屬性上。
  • ⑥ render component 插槽組件。
/* children 組件 */
function ChidrenComponent(){
    return <div> In this chapter, let's learn about react props ! </div>
}
/* props 接受處理 */
class PropsComponent extends React.Component{
    componentDidMount(){
        console.log(this,'_this')
    }
    render(){
        const {  children , mes , renderName , say ,Component } = this.props
        const renderFunction = children[0]
        const renderComponent = children[1]
        /* 對(duì)于子組件,不同的props是怎么被處理 */
        return <div>
            { renderFunction() }
            { mes }
            { renderName() }
            { renderComponent }
            <Component />
            <button onClick={ () => say() } > change content </button>
        </div>
    }
}
/* props 定義綁定 */
class Index extends React.Component{
    state={  
        mes: "hello,React"
    }
    node = null
    say= () =>  this.setState({ mes:'let us learn React!' })
    render(){
        return <div>
            <PropsComponent  
               mes={this.state.mes}  // ① props 作為一個(gè)渲染數(shù)據(jù)源
               say={ this.say  }     // ② props 作為一個(gè)回調(diào)函數(shù) callback
               Component={ ChidrenComponent } // ③ props 作為一個(gè)組件
               renderName={ ()=><div> my name is alien </div> } // ④ props 作為渲染函數(shù)
            >
                { ()=> <div>hello,world</div>  } { /* ⑤render props */ }
                <ChidrenComponent />             { /* ⑥r(nóng)ender component */ }
            </PropsComponent>
        </div>
    }
}

2)props在React充當(dāng)角色(3個(gè)角度):

① 組件層級(jí)

  • 父傳子:props 和 子傳父:props 的 callback
  • 將視圖容器作為 props 進(jìn)行渲染

② 更新機(jī)制

? 在 fiber 調(diào)和階段中,diff 可以說是 React 更新的驅(qū)動(dòng)器,props 可以作為組件是否更新的重要準(zhǔn)則

? (PureComponent ,memo 等性能優(yōu)化方案)

③ 插槽層面

? 組件的閉合標(biāo)簽里的插槽,轉(zhuǎn)化成 chidren 屬性

3)監(jiān)聽props改變:

類組件: componentWillReceiveProps(廢棄) componentWillReceiveProps(新)函數(shù)組件: useEffect (初始化會(huì)默認(rèn)執(zhí)行一次) props chidren模式

① props 插槽組件

<Container>
    <Children>
</Container>

在 Container 組件中,通過 props.children 屬性訪問到 Chidren 組件,為 React element 對(duì)象。

作用:

  • 可以根據(jù)需要控制 Chidren 是否渲染。
  • Container 可以用 React.cloneElement 強(qiáng)化 props (混入新的 props ),或者修改 Chidren 的子元素。

② render props模式

<Container>
   { (ContainerProps)=> <Children {...ContainerProps}  /> }
</Container>
————————————————————————————————————————————————————————————————————————————————
Container組件:
function  Container(props) {
    const  ContainerProps = {
        name: 'alien',
        mes:'let us learn react'
    }
     return  props.children(ContainerProps)
}

根據(jù)需要控制 Chidren 渲染與否??梢詫⑿枰獋鹘o Children 的 props 直接通過函數(shù)參數(shù)的方式傳遞給執(zhí)行函數(shù) children 。

操作 props

1、抽象 props

用于跨層級(jí)傳遞 props ,一般不需要具體指出 props 中某個(gè)屬性,而是將 props 直接傳入或者是抽離到子組件中。

1)混入 props

給父組件 props 中混入某個(gè)屬性,再傳遞給子組件

function Son(props){
    console.log(props)
    return <div> hello,world </div>
}
function Father(props){
    const fatherProps={
        mes:'let us learn React !'
    }
    return <Son {...props} { ...fatherProps }  />
}
function Index(){
    const indexProps = {
        name:'alien',
        age:'28',
    }
    return <Father { ...indexProps }  />
}

2)抽離 props

從父組件 props 中抽離某個(gè)屬性,再傳遞給子組件

function Son(props){
    console.log(props)
    return <div> hello,world </div>
}
function Father(props){
    const { age,...fatherProps  } = props
    return <Son  { ...fatherProps }  />
}
function Index(){
    const indexProps = {
        age:'28',
        mes:'let us learn React !'
    }
    return <Father { ...indexProps }  />
}

2、注入 props

1)顯式注入 props

能夠直觀看見標(biāo)簽中綁定的 props

function Son(props){
    console.log(props)
    return <div> hello,world </div>
}
function Father(props){
    const fatherProps={
        mes:'let us learn React !'
    }
    return <Son {...props} { ...fatherProps }  />
}
function Index(){
    const indexProps = {
        name:'alien',
        age:'28',
    }
    return <Father { ...indexProps }  />
}

2)隱式注入 props

一般通過 React.cloneElement 對(duì) props.chidren 克隆再混入新的 props

function Son(props){
     console.log(props) // {name: "alien", age: "28", mes: "let us learn React !"}
     return <div> hello,world </div>
}
function Father(prop){
    return React.cloneElement(prop.children,{  mes:'let us learn React !' })
}
function Index(){
    return <Father>
        <Son  name="alien"  age="28"  />
    </Father>
}

總結(jié)

1、pros作用、角色

2、props的children(插槽)

3、操作props

本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • React觸發(fā)render的實(shí)現(xiàn)方法

    React觸發(fā)render的實(shí)現(xiàn)方法

    這篇文章主要介紹了React觸發(fā)render的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞

    React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞

    這篇文章給大家介紹了React使用context進(jìn)行跨級(jí)組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧
    2024-01-01
  • React實(shí)現(xiàn)核心Diff算法的示例代碼

    React實(shí)現(xiàn)核心Diff算法的示例代碼

    這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)Diff算法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-04-04
  • React Navigation 使用中遇到的問題小結(jié)

    React Navigation 使用中遇到的問題小結(jié)

    本篇文章主要介紹了React Navigation 使用中遇到的問題小結(jié),主要是安卓和iOS中相對(duì)不協(xié)調(diào)的地方,特此記錄,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-05-05
  • react實(shí)現(xiàn)動(dòng)態(tài)表單

    react實(shí)現(xiàn)動(dòng)態(tài)表單

    這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)表單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • React中props使用教程

    React中props使用教程

    props是組件(包括函數(shù)組件和class組件)間的內(nèi)置屬性,用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn),props用來傳遞參數(shù)。組件實(shí)例化過程中,你可以向其中傳遞一個(gè)參數(shù),這個(gè)參數(shù)會(huì)在實(shí)例化過程中被引用
    2022-09-09
  • React實(shí)現(xiàn)pc端的彈出框效果

    React實(shí)現(xiàn)pc端的彈出框效果

    這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)pc端的彈出框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • JavaScript中的useRef 和 useState介紹

    JavaScript中的useRef 和 useState介紹

    這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹,下列文章,我們將學(xué)習(xí) useRef 和 useState hook是什么,它們的區(qū)別以及何時(shí)使用哪個(gè)。 這篇文章中的代碼示例將僅涉及功能組件,但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下
    2021-11-11
  • React實(shí)現(xiàn)一個(gè)通用骨架屏組件示例

    React實(shí)現(xiàn)一個(gè)通用骨架屏組件示例

    骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu),直到請(qǐng)求數(shù)據(jù)返回后再渲染頁面,補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容,本文就介紹了React實(shí)現(xiàn)一個(gè)通用骨架屏組件示例,分享給大家,感興趣的可以了解一下
    2021-12-12
  • 詳解React 元素渲染

    詳解React 元素渲染

    這篇文章主要介紹了React 元素渲染的相關(guān)資料,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07

最新評(píng)論