React Props 原理理解
Posted YuLong~W
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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) // name: "alien", age: "28"
return <div> hello,world </div>
function Father(prop)
return prop.children
function Index()
return <Father>
<Son name="alien" age="28" />
</Father>
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 Props 原理理解的主要内容,如果未能解决你的问题,请参考以下文章