一篇文章帶你理解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 Router 中實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由的示例
React Router 是一個(gè)非常強(qiáng)大和靈活的路由庫，它為 React 應(yīng)用程序提供了豐富的導(dǎo)航和 URL 管理功能，能夠幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用和多頁應(yīng)用，這篇文章主要介紹了React Router 中如何實(shí)現(xiàn)嵌套路由和動(dòng)態(tài)路由,需要的朋友可以參考下2023-05-05
react-native組件中NavigatorIOS和ListView結(jié)合使用的方法
這篇文章主要給大家介紹了關(guān)于react-native組件中NavigatorIOS和ListView結(jié)合使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-09-09
react16.8.0以上MobX在hook中的使用方法詳解
這篇文章主要為大家介紹了react16.8.0以上MobX在hook中的使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了React中mobx和redux的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
本文主要介紹了React翻頁器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Hooks?發(fā)布之后，函數(shù)組件能擁有自己的?state，React提供了很多內(nèi)置的Hooks，這篇文章就來和大家介紹一下useState?和?useEffect的使用，需要的可以參考一下2023-06-06
中間件就是一個(gè)函數(shù)，對(duì)store.dispatch方法進(jìn)行了改造，在發(fā)出 Action 和執(zhí)行 Reducer 這兩步之間，添加了其他功能，要理解中間件，關(guān)鍵點(diǎn)是要知道，這個(gè)中間件是連接哪些部分的軟件，它在中間做了什么事，提供了什么服務(wù)2023-01-01
通過示例講解Remix?設(shè)計(jì)哲學(xué)理念
這篇文章主要為大家通過示例講解了Remix?設(shè)計(jì)哲學(xué)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
在React函數(shù)式組件中，我們可以通過useState()來創(chuàng)建state，這種state創(chuàng)建方式會(huì)給我們返回兩個(gè)東西state和setState()。2023-04-04
react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題
這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08