React?Props的原理是什么

本篇文章為大家展示了React Props的原理是什么，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

props理解

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

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

1）props 可以是：

• ① props 作為一個子組件渲染數(shù)據(jù)源。

• ② props 作為一個通知父組件的回調(diào)函數(shù)。

• ③ props 作為一個單純的組件傳遞。

• ④ 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 作為一個渲染數(shù)據(jù)源
               say={ this.say  }     // ② props 作為一個回調(diào)函數(shù) callback
               Component={ ChidrenComponent } // ③ props 作為一個組件
               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充當角色(3個角度)：

① 組件層級：

•  父傳子：props 和 子傳父：props 的 callback

• 將視圖容器作為 props 進行渲染

② 更新機制

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

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

③ 插槽層面

組件的閉合標簽里的插槽，轉(zhuǎn)化成 chidren 屬性

3）監(jiān)聽props改變：

類組件： componentWillReceiveProps(廢棄) componentWillReceiveProps(新)函數(shù)組件： useEffect （初始化會默認執(zhí)行一次） props chidren模式

① props 插槽組件

<Container>
    <Children>
</Container>

在 Container 組件中，通過 props.children 屬性訪問到 Chidren 組件，為 React element 對象。

作用：

• 可以根據(jù)需要控制 Chidren 是否渲染。

• Container 可以用 React.cloneElement 強化 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 中某個屬性，而是將 props 直接傳入或者是抽離到子組件中。

1）混入 props

給父組件 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

從父組件 props 中抽離某個屬性，再傳遞給子組件

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

能夠直觀看見標簽中綁定的 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>
}

上述內(nèi)容就是React Props的原理是什么，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。