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

Posted 2023-02-19 鲨鱼小猫

组件通信

• 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>
    )