文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React Props的原理是什么

2023-06-26 06:16

关注

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

props理解

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

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

1)props 可以是:

function ChidrenComponent(){    return <div> In this chapter, let's learn about react props ! </div>}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]                return <div>            { renderFunction() }            { mes }            { renderName() }            { renderComponent }            <Component />            <button onClick={ () => say() } > change content </button>        </div>    }}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>  } {  }                <ChidrenComponent />             {  }            </PropsComponent>        </div>    }}

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

① 组件层级

② 更新机制

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

(PureComponentmemo 等性能优化方案)

③ 插槽层面

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

3)监听props改变:

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

① props 插槽组件

<Container>    <Children></Container>

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

作用:

② 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的原理是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯