一篇文章帶你理解React Props的 原理
props理解
props 是 React 組件通信最重要的手段
props:對于在 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] /* 對于子組件,不同的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è)角度):
① 組件層級:
- ? 父傳子: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 對象。
作用:
- 可以根據(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
用于跨層級傳遞 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 對 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)方法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2024-01-01React實(shí)現(xiàn)核心Diff算法的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)Diff算法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-04-04React Navigation 使用中遇到的問題小結(jié)
本篇文章主要介紹了React Navigation 使用中遇到的問題小結(jié),主要是安卓和iOS中相對不協(xié)調(diào)的地方,特此記錄,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05react實(shí)現(xiàn)動(dòng)態(tài)表單
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動(dòng)態(tài)表單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08JavaScript中的useRef 和 useState介紹
這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹,下列文章,我們將學(xué)習(xí) useRef 和 useState hook是什么,它們的區(qū)別以及何時(shí)使用哪個(gè)。 這篇文章中的代碼示例將僅涉及功能組件,但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下2021-11-11React實(shí)現(xiàn)一個(gè)通用骨架屏組件示例
骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大致結(jié)構(gòu),直到請求數(shù)據(jù)返回后再渲染頁面,補(bǔ)充進(jìn)需要顯示的數(shù)據(jù)內(nèi)容,本文就介紹了React實(shí)現(xiàn)一個(gè)通用骨架屏組件示例,分享給大家,感興趣的可以了解一下2021-12-12