深入props --React进阶指南笔记

一次render的过程：

调用React.createElement形成新的element过程，新的element上就会有新的props属性（即重新渲染视图的关键）。

来看一个demo：

/* children 组件 */
function ChidrenComponent(){
    return 
 In this chapter, let's learn about react props ! 
}
/* 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 

            { renderFunction() }
            { mes }
            { renderName() }
            { renderComponent }
            
             say() } > change content 
        
    }
}
/* props 定义绑定 */
class Index extends React.Component{
    state={  
        mes: "hello,React"
    }
    node = null
    say= () =>  this.setState({ mes:'let us learn React!' })
    render(){
        return 

            
 my name is alien 
 } // ④ props 作为渲染函数
            >
                { ()=> 
hello,world
  } { /* ⑤render props */ }
                             { /* ⑥render component */ }
            
        
    }
}

可以看到props 可以是什么？

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

props在组件实例上的样子：
如果PropComponent是一个类组件，那么可以直接通过this.props访问到它：