React Props 原理理解

Posted YuLong~W

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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) // name: "alien", age: "28"
     return <div> hello,world </div>

function Father(prop)
    return prop.children

function Index()
    return <Father>
        <Son  name="alien"  age="28"  />
    </Father>

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

以上是关于React Props 原理理解的主要内容,如果未能解决你的问题,请参考以下文章

React Props 原理理解

深度理解React底层实现原理

React Context 原理理解

React Context 原理理解

react-native App的原理介绍

React入门---属性(props)-8