组件通信
- 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>
)
}