/* 高阶函数的简单定义与使用
一： 先定义一个普通组件
二： 用function higherOrder(WrappendComponent) {
return
} 将组件包裹起来，并用export default higherOrder将这个高阶函数抛出去
三： 使用时先导入这个高阶函数，直接将组件以参数的方式传递进来即可
*/
import React,{Component} from 'react'; /**
* 定义高阶函数
*/
function higherOrder(WrappendComponent) {
return class A extends Component {
render() {
return (
// 这个 WrappendComponent 将被传递进来的组件代替
<WrappendComponent />
);
}
}
}
export default higherOrder;
// ===================================== 分界符 ==============================================
/**
* 使用高阶函数
* 一： 先将高阶函数引入
* 二： 将组件以参数的方式传递进去
*/
import higherOrder from './';
class B extends Component {
render() {
return (
<div>
子组件
</div>
);
}
}
// 调用高阶函数：
export default higherOrder(B)
高阶组件应用：
import React,{ Component } from 'react';
import './App.css';
import B from './b';
class App extends Component {
render() {
return (
<div>
<B name={'张三'} age={12}/>
</div>
);
}
}
export default App; import React,{Component} from 'react';
import A from './a';
/*
* 普通显示组件
*/
class B extends Component {
render() {
return (
<div>
我的名字叫：{this.props.name}
<br />
我的年龄是：{this.props.age}
<br />
我的性别是：{this.props.sex}
<br />
</div>
);
}
}
// 调用高阶函数A：
export default A('提示')(B) import React,{Component} from 'react';
/**
* 定义高阶函数 A
*/
export default (title) => WrappendComponent => class A extends Component {
render() {
// 通过取出 props 来控制要传入子组件的 props
const {age, ...otherProps} = this.props
return (
<div>
<div>{title} X</div>
{/* // 这个 WrappendComponent 将被传递进来的组件代替 */}
<div>
// 在App.js中，我们并没有将sex这个属性传递给B,而是通过A高阶函数来传递
<WrappendComponent sex={'男'} {...otherProps}/>
</div>
</div>
);
}
}
// 上述三个页面执行流程：App.js渲染B.js定义的页面内容。而B.js调用了高阶函数A.js,所以实际留存为：App.js传递的值先到A.js高阶函数，A.js高阶函数对值进行处理然后再传递给B.js显示