React Props

props 可以是什么？

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

在标签内部的属性和方法会直接绑定在 props 对象的属性上，对于组件的插槽会被绑定在 props 的 Children 属性中。

React如何定义的props？

• 组件层面：props 可以把数据层传递给子组件去渲染消费。另一方面子组件可以通过 props 中的 callback ，来向父组件传递信息。还有一种可以将视图容器作为 props 进行渲染。
• 更新层面：在 fiber 调和阶段中props 可以作为组件是否更新的重要准则，变化即更新，于是有了 PureComponent ，memo 等性能优化方案。
• 插槽层面 props可以把组件的闭合标签里的插槽，转化成 Children 属性，一会将详细介绍这个模式。

常用渲染控制

很多组件的实现都依赖于一些方法去判断props从而渲染

const Children = (props)=> (<div>
    <div>hello, my name is {  props.name } </div>
    <div> { props.mes } </div>
</div>)

function  Container(props) {
    const ContainerProps = {
        name: 'alien',
        mes:'let us learn react'
    }
     return props.children.map(item=>{
        if(React.isValidElement(item)){ // 判断是 react elment  混入 props
            return React.cloneElement(item,{ ...ContainerProps },item.props.children)
        }else if(typeof item === 'function'){
            return item(ContainerProps)
        }else return null
     })
}

const Index = ()=>{
    return <Container>
        <Children />
        { (ContainerProps)=> <Children {...ContainerProps} name={'haha'}  />  }
    </Container>
}