一篇文章帶你理解React Props的 原理
更新時(shí)間：2022年01月15日 17:09:13 作者：YuLong~W
這篇文章主要為大家介紹了ReactProps的原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
props理解
props 是 React 組件通信最重要的手段
props：對于在 React 應(yīng)用中寫的子組件，父組件綁定在它們標(biāo)簽里的 屬性和方法，最終會變成 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ū)動器，props 可以作為組件是否更新的重要準(zhǔn)則
? (PureComponent ，memo 等性能優(yōu)化方案)
③ 插槽層面
? 組件的閉合標(biāo)簽里的插槽，轉(zhuǎn)化成 chidren 屬性
3）監(jiān)聽props改變：
類組件： componentWillReceiveProps(廢棄) componentWillReceiveProps(新)函數(shù)組件： useEffect （初始化會默認(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-10
React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞
這篇文章給大家介紹了React使用context進(jìn)行跨級組件數(shù)據(jù)傳遞的方法步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對大家學(xué)習(xí)React context組件數(shù)據(jù)傳遞有一定的幫助,感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2024-01-01
React實(shí)現(xiàn)核心Diff算法的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)Diff算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-04-04
React Navigation 使用中遇到的問題小結(jié)
本篇文章主要介紹了React Navigation 使用中遇到的問題小結(jié)，主要是安卓和iOS中相對不協(xié)調(diào)的地方，特此記錄，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)動態(tài)表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來傳遞參數(shù)。組件實(shí)例化過程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會在實(shí)例化過程中被引用2022-09-09
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)pc端的彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
JavaScript中的useRef 和 useState介紹
這篇文章主要給大家分享的是 JavaScript中的useRef 和 useState介紹，下列文章，我們將學(xué)習(xí) useRef 和 useState hook是什么，它們的區(qū)別以及何時(shí)使用哪個(gè)。 這篇文章中的代碼示例將僅涉及功能組件，但是大多數(shù)差異和用途涵蓋了類和功能組件,需要的朋友可以參考一下2021-11-11
React實(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
這篇文章主要介紹了React 元素渲染的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07