React Props的原理是什么
React Props的原理是什么
本篇文章为大家展示了ReactProps的原理是什么，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
props理解
props 是 React 组件通信最重要的手段
props：对于在 React 应用中写的子组件，父组件绑定在它们标签里的属性和方法，最终会变成 props 传递给它们。
1）props 可以是：
① props 作为一个子组件渲染数据源。
② props 作为一个通知父组件的回调函数。
③ props 作为一个单纯的组件传递。
④ props 作为渲染函数。
⑤ render props ， 和④的区别是放在了 children 属性上。
⑥ render component 插槽组件。
/*children组件*/functionChidrenComponent(){return<div>Inthischapter,let'slearnaboutreactprops!</div>}/*props接受处理*/classPropsComponentextendsReact.Component{componentDidMount(){console.log(this,'_this')}render(){const{children,mes,renderName,say,Component}=this.propsconstrenderFunction=children[0]constrenderComponent=children[1]/*对于子组件，不同的props是怎么被处理*/return<div>{renderFunction()}{mes}{renderName()}{renderComponent}<Component/><buttononClick={()=>say()}>changecontent</button></div>}}/*props定义绑定*/classIndexextendsReact.Component{state={mes:"hello,React"}node=nullsay=()=>this.setState({mes:'letuslearnReact!'})render(){return<div><PropsComponentmes={this.state.mes}//①props作为一个渲染数据源say={this.say}//②props作为一个回调函数callbackComponent={ChidrenComponent}//③props作为一个组件renderName={()=><div>mynameisalien</div>}//④props作为渲染函数>{()=><div>hello,world</div>}{/*⑤renderprops*/}<ChidrenComponent/>{/*⑥rendercomponent*/}</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组件：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<div>hello,world</div>}functionFather(props){constfatherProps={mes:'letuslearnReact!'}return<Son{...props}{...fatherProps}/>}functionIndex(){constindexProps={name:'alien',age:'28',}return<Father{...indexProps}/>}
2）抽离 props
从父组件 props 中抽离某个属性，再传递给子组件
functionSon(props){console.log(props)return<div>hello,world</div>}functionFather(props){const{age,...fatherProps}=propsreturn<Son{...fatherProps}/>}functionIndex(){constindexProps={age:'28',mes:'letuslearnReact!'}return<Father{...indexProps}/>}
2、注入 props
1）显式注入 props
能够直观看见标签中绑定的 props
functionSon(props){console.log(props)return<div>hello,world</div>}functionFather(props){constfatherProps={mes:'letuslearnReact!'}return<Son{...props}{...fatherProps}/>}functionIndex(){constindexProps={name:'alien',age:'28',}return<Father{...indexProps}/>}
2）隐式注入 props
一般通过 React.cloneElement 对 props.chidren 克隆再混入新的 props
functionSon(props){console.log(props)//{name:"alien",age:"28",mes:"letuslearnReact!"}return<div>hello,world</div>}functionFather(prop){returnReact.cloneElement(prop.children,{mes:'letuslearnReact!'})}functionIndex(){return<Father><Sonname="alien"age="28"/></Father>}
上述内容就是ReactProps的原理是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注恰卡编程网行业资讯频道。
