react props的原理是什么-mile米乐体育

react props的原理是什么

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

props理解

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

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

1）props 可以是：

• ① props 作为一个子组件渲染数据源。

• ② props 作为一个通知父组件的回调函数。

• ③ props 作为一个单纯的组件传递。

• ④ props 作为渲染函数。

• ⑤ render props ， 和④的区别是放在了 children 属性上。

• ⑥ render component 插槽组件。

/*children组件*/functionchidrencomponent(){return

2）props在react充当角色(3个角度)：

① 组件层级：

• 父传子：props和子传父：props 的 callback

• 将视图容器作为 props 进行渲染

② 更新机制

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

(purecomponent ，memo 等性能优化方案)

③ 插槽层面

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

3）监听props改变：

类组件：componentwillreceiveprops(废弃) componentwillreceiveprops(新)函数组件：useeffect （初始化会默认执行一次） props chidren模式

① props 插槽组件

在 container 组件中，通过props.children属性访问到 chidren 组件，为 react element 对象。

作用：

• 可以根据需要控制 chidren 是否渲染。

• container 可以用 react.cloneelement 强化 props (混入新的 props )，或者修改 chidren 的子元素。

② render props模式

{(containerprops)=>}————————————————————————————————————————————————————————————————————————————————container组件：functioncontainer(props){constcontainerprops={name:'alien',mes:'letuslearnreact'}returnprops.children(containerprops)}

根据需要控制 chidren 渲染与否。可以将需要传给 children 的 props 直接通过函数参数的方式传递给执行函数 children 。

操作 props

1、抽象 props

用于跨层级传递 props ，一般不需要具体指出 props 中某个属性，而是将 props 直接传入或者是抽离到子组件中。

1）混入 props

给父组件 props 中混入某个属性，再传递给子组件

functionson(props){console.log(props)return