一篇文章带你理解React Props的 原理
更新时间：2022年01月15日 17:09:13 作者：YuLong~W
这篇文章主要为大家介绍了ReactProps的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
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
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要介绍了React触发render的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章给大家介绍了React使用context进行跨级组件数据传递的方法步骤,文中通过代码示例给大家介绍的非常详细,对大家学习React context组件数据传递有一定的帮助,感兴趣的小伙伴跟着小编一起来学习吧2024-01-01
这篇文章主要为大家详细介绍了React如何实现Diff算法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-04-04
本篇文章主要介绍了React Navigation 使用中遇到的问题小结，主要是安卓和iOS中相对不协调的地方，特此记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要为大家详细介绍了react实现动态表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用2022-09-09
这篇文章主要为大家详细介绍了React实现pc端的弹出框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
JavaScript中的useRef 和 useState介绍
这篇文章主要给大家分享的是 JavaScript中的useRef 和 useState介绍，下列文章，我们将学习 useRef 和 useState hook是什么，它们的区别以及何时使用哪个。 这篇文章中的代码示例将仅涉及功能组件，但是大多数差异和用途涵盖了类和功能组件,需要的朋友可以参考一下2021-11-11
骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容，本文就介绍了React实现一个通用骨架屏组件示例，分享给大家，感兴趣的可以了解一下2021-12-12
这篇文章主要介绍了React 元素渲染的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
最新评论