一篇文章带你理解ReactProps的原理.docx

第

一篇文章带你理解ReactProps的原理

目录props理解1）props可以是：2）props在React充当角色(3个角度)：3）监听props改变：操作props1、抽象props1）混入props2）抽离props2、注入props1）显式注入props2）隐式注入props总结

props理解

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

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

1）props可以是：

①props作为一个子组件渲染数据源。②props作为一个通知父组件的回调函数。③props作为一个单纯的组件传递。④props作为渲染函数。⑤renderprops，和④的区别是放在了children属性上。⑥rendercomponent插槽组件。

/*children组件*/

functionChidrenComponent(){

returndivInthischapter,letslearnaboutreactprops!/div

/*props接受处理*/

classPropsComponentextendsReact.Component{

componentDidMount(){

console.log(this,_this)

render(){

const{children,mes,renderName,say,Component}=ps

constrenderFunction=children[0]

constrenderComponent=children[1]

/*对于子组件，不同的props是怎么被处理*/

returndiv

{renderFunction()}

{mes}

{renderName()}

{renderComponent}

Component/

button()=say()}changecontent/button

/div

/*props定义绑定*/

classIndexextendsReact.Component{

state={

mes:hello,React

node=null

say=()=this.setState({mes:letuslearnReact!})

render(){

returndiv

PropsComponent

mes={this.state.mes}//①props作为一个渲染数据源

say={this.say}//②props作为一个回调函数callback

Component={ChidrenComponent}//③props作为一个组件

renderName={()=divmynameisalien/div}//④props作为渲染函数

{()=divhello,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（初始化会默认执行一次）propschidren模式

①props插槽组件

Container

Children

/Container

在Containe