导航：首页 > 开发技术 >

React Props的原理是什么

发表于：2024-10-16 作者：千家信息网编辑

千家信息网最后更新 2024年10月16日，本篇文章为大家展示了React Props的原理是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。props理解props 是 React 组件通信最重要的

千家信息网最后更新 2024年10月16日React Props的原理是什么

本篇文章为大家展示了React Props的原理是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

props理解

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

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

1）props 可以是：

① props 作为一个子组件渲染数据源。
② props 作为一个通知父组件的回调函数。
③ props 作为一个单纯的组件传递。
④ props 作为渲染函数。
⑤ render props ，和④的区别是放在了 children 属性上。
⑥ render component 插槽组件。

/* children 组件 */function ChidrenComponent(){    return  In this chapter, let's learn about react props ! 
}/* 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             { renderFunction() }            { mes }            { renderName() }            { renderComponent }                                
    }}/* props 定义绑定 */class Index extends React.Component{    state={          mes: "hello,React"    }    node = null    say= () =>  this.setState({ mes:'let us learn React!' })    render(){        return              my name is alien 
 } // ④ props 作为渲染函数            >                { ()=> hello,world
  } { /* ⑤render props */ }                             { /* ⑥render component */ }                    
    }}

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

① 组件层级：

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

② 更新机制

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

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

③ 插槽层面

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

3）监听props改变：

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

① props 插槽组件

在 Container 组件中，通过 props.children 属性访问到 Chidren 组件，为 React element 对象。

作用：

可以根据需要控制 Chidren 是否渲染。
Container 可以用 React.cloneElement 强化 props (混入新的 props )，或者修改 Chidren 的子元素。

② render props模式

   { (ContainerProps)=>  }--------------------------------------------------------------------------------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  hello,world 
}function Father(props){    const fatherProps={        mes:'let us learn React !'    }    return }function Index(){    const indexProps = {        name:'alien',        age:'28',    }    return }

2）抽离 props

从父组件 props 中抽离某个属性，再传递给子组件

function Son(props){    console.log(props)    return  hello,world 
}function Father(props){    const { age,...fatherProps  } = props    return }function Index(){    const indexProps = {        age:'28',        mes:'let us learn React !'    }    return }

2、注入 props

1）显式注入 props

能够直观看见标签中绑定的 props

function Son(props){    console.log(props)    return  hello,world 
}function Father(props){    const fatherProps={        mes:'let us learn React !'    }    return }function Index(){    const indexProps = {        name:'alien',        age:'28',    }    return }

2）隐式注入 props

一般通过 React.cloneElement 对 props.chidren 克隆再混入新的 props

function Son(props){     console.log(props) // {name: "alien", age: "28", mes: "let us learn React !"}     return  hello,world 
}function Father(prop){    return React.cloneElement(prop.children,{  mes:'let us learn React !' })}function Index(){    return             }

上述内容就是React Props的原理是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。

很赞哦！