一次render的过程：

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

来看一个demo：

/* 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.propsconst 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 = nullsay= () =>  this.setState({ mes:'let us learn React!' })render(){return <div><PropsComponent  mes={this.state.mes}  // ① props 作为一个渲染数据源say={ this.say  }     // ② props 作为一个回调函数 callbackComponent={ ChidrenComponent } // ③ props 作为一个组件renderName={ ()=><div> my name is alien </div> } // ④ props 作为渲染函数>{ ()=> <div>hello,world</div>  } { /* ⑤render props */ }<ChidrenComponent />             { /* ⑥render component */ }</PropsComponent></div>}
}

可以看到props 可以是什么？

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

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