1.render props模式
书写规范:在需要复用的组件render()里返回return this.props.render(this.state)或者return this.props.children(this.state);
在使用组件时传入()的值
注:render和children传入的位置不一样
class Mouse extends React.Component {
state = {
x: 0,
y: 0,
};
mouseMoveHandler(e) {
this.setState({
x: e.clientX,
y: e.clientY,
});
}
componentDidMount() {
window.addEventListener("mousemove", this.mouseMoveHandler.bind(this));
}
render() {
// return this.props.children(this.state);
return this.props.render(this.state);
}
}
class App extends React.Component {
render() {
return (
<div>
<div>render props</div>
{/* props.render */}
<Mouse
render= {mouse =>{
return(
<p>{mouse.x}{mouse.y}</p>
)
}}
/>
{/* props.chidren */}
{/* <Mouse>
{mouse =>{
return(
<p>{mouse.x}{mouse.y}</p>
)
}}
</Mouse> */}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
2.高阶组件
学习高阶组件前我们需要复习一下高阶函数的概念,高阶函数是不是返回的是一个函数,高阶组件一个意思,返回的是一个组件,而且我们可以理解成高阶组件就是一台机甲,机甲本身是已经修好了的,而可以进去的驾驶员是可以随时替换的。
书写规范
1.约定函数名以with开头
2.因为我们传入的是一个组件,所以参数应该以大写开头
function withMouse(WrappedComponent) {
class Mouse extends React.Component {
state = {
x: 0,
y: 0,
};
moveHandler(e) {
this.setState({
x: e.clientX,
y: e.clientY,
});
}
componentDidMount() {
window.addEventListener("mousemove", this.moveHandler.bind(this));
}
render() {
return <WrappedComponent {...this.state}{...this.props} />;
}
}
// 防止组件多次复用造成组件重名
Mouse.displayName = WrappedComponent.name;
return Mouse;
}
function postion(props) {
return (
<div>
{props.x}
{props.y}
</div>
);
}
let Mousemove = withMouse(postion);
class App extends React.Component {
render() {
return <Mousemove></Mousemove>;
}
}
ReactDOM.render(<App />, document.getElementById("root"));