温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

React Props的原理是什么

发布时间:2022-01-17 14:45:41 来源:亿速云 阅读:174 作者:柒染 栏目:开发技术

本篇文章为大家展示了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 可以作为组件是否更新的重要准则

    (PureComponentmemo 等性能优化方案)

    ③ 插槽层面

    组件的闭合标签里的插槽,转化成 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>
    }

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

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI