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

props理解

props 是 react 组件通信最重要的手段

props：对于在 react 应用中写的子组件，父组件绑定在它们标签里的 属性和方法，最终会变成 props 传递给它们。

1）props 可以是：

① props 作为一个子组件渲染数据源。
② props 作为一个通知父组件的回调函数。
③ props 作为一个单纯的组件传递。
④ props 作为渲染函数。
⑤ render props ，和④的区别是放在了 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 作为一个渲染数据源
               say={ this.say  }     // ② props 作为一个回调函数 callback
               component={ chidrencomponent } // ③ props 作为一个组件
               rendername={ ()=><div> my name is alien </div> } // ④ props 作为渲染函数
            >
                { ()=> <div>hello,world</div>  } { /* ⑤render props */ }
                <chidrencomponent />             { /* ⑥render component */ }
            </propscomponent>
        </div>
    }
}

2）props在react充当角色(3个角度)：

① 组件层级：

父传子：props 和 子传父：props 的 callback
将视图容器作为 props 进行渲染

② 更新机制

在 fiber 调和阶段中，diff 可以说是 react 更新的驱动器，props 可以作为组件是否更新的重要准则

(purecomponent ，memo 等性能优化方案)

③ 插槽层面

组件的闭合标签里的插槽，转化成 chidren 属性

3）监听props改变：

类组件： componentwillreceiveprops(废弃) componentwillreceiveprops(新)函数组件： useeffect （初始化会默认执行一次） props chidren模式

① props 插槽组件

<container>
    <children>
</container>

在 container 组件中，通过 props.children 属性访问到 chidren 组件，为 react element 对象。

作用：

可以根据需要控制 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)
}

根据需要控制 chidren 渲染与否。可以将需要传给 children 的 props 直接通过函数参数的方式传递给执行函数 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>
}

总结

1、pros作用、角色

2、props的children（插槽）

3、操作props

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注www.887551.com的更多内容!

黄山市民网：https://www.huangshanshimin.com/

目录