React中组件细节点（通信、props类型校验、复用）

组件通信

• props的使用

//类组件
class App extends React .Component {
    constructor (props) {
        super (props)
    }
    render () {
        return <div>接收到的数据: {this.props.id}</div>
    }
}

//函数组件
function App (props) {
    return (
        <div>接收到数据: {props .name}</div>
    )
}   

• props的校验

import PropTypes from 'prop- types'
function App (props) {
    return (
        <h1>{props.name}</h1>
    )
}
App.propTypes = {
    colors: PropTypes .array
}

• props的默认值

function App (props) {
    return (
        <h1>{props.name}</h1>
    )
}
App.defaultProps = {
    name: "不写作文的李华"
}

• 多层级之间的通信

const {Provider, Consumer} = React.createContext();

//高层级
<provider value="不写作文的李华">
            <div className="App">
                <child/>
            </div>
</provier>



//低层级
<Consumer>
    {
        value => <p>我是{value}</p>
    }
</Consumer>

• 发布订阅模式

略

组件复用

• 使用高阶组件，高阶组件的思想就让若干ui组件得到统一的增强

function withSports(SomeComponent){
    class Sports extends React.Component{
        state=['足球']
        render(){
            return <SomeComponent{...this.state}{...this.props}>
        }
    }
    Sports.displayName =`withSports${getDisplayName(SomeComponent)}`
    return Sports
}
function getDisplayName (SomeComponent) {
    return SomeComponent.displayName || SomeComponent.name | | ' Component'
}
funtion SomeComponent(props){
    return(
        我喜欢<div>{props}</div>
    )
}