一篇文章带你理解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
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/weixin_45654582/article/details/122447
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
解决vue props传Array/Object类型值,子组件报错的情况
这篇文章主要介绍了解决vue props传Array/Object类型值,子组件报错的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核、Zend引擎、以及扩展层;PHP内核用来处理请求、文件流、错误处理等相关操作;Zend引擎(ZE)用以将源文件转换成机器语言,然后在虚拟机上运行它;扩展层是一组...2015-11-24
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了浅谈vue-props的default写不写有什么区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-09
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了vue - props 声明数组和对象操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-30
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了java中Base64编码原理实例讲解,文章讲解的很清晰,有对于这方面不太懂的同学可以研究下...2021-02-10
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23