React.js高阶函数的定义与使用
1 /* 高阶函数的简单定义与使用 2 一： 先定义一个普通组件 3 二： 用function higherOrder(WrappendComponent) { 4 return 5 } 将组件包裹起来，并用export default higherOrder将这个高阶函数抛出去 6 三： 使用时先导入这个高阶函数，直接将组件以参数的方式传递进来即可 7 */ 8 import React,{Component} from 'react'; 9 10 /** 11 * 定义高阶函数 12 */ 13 function higherOrder(WrappendComponent) { 14 return class A extends Component { 15 render() { 16 return ( 17 // 这个 WrappendComponent 将被传递进来的组件代替 18 <WrappendComponent /> 19 ); 20 } 21 } 22 } 23 export default higherOrder; 24 // ===================================== 分界符 ============================================== 25 /** 26 * 使用高阶函数 27 * 一： 先将高阶函数引入 28 * 二： 将组件以参数的方式传递进去 29 */ 30 import higherOrder from './'; 31 class B extends Component { 32 render() { 33 return ( 34 <div> 35 子组件 36 </div> 37 ); 38 } 39 } 40 // 调用高阶函数： 41 export default higherOrder(B)
高阶组件应用：
1 import React,{ Component } from 'react'; 2 import './App.css'; 3 import B from './b'; 4 class App extends Component { 5 render() { 6 return ( 7 <div> 8 <B name={'张三'} age={12}/> 9 </div> 10 ); 11 } 12 } 13 14 export default App;
1 import React,{Component} from 'react'; 2 import A from './a'; 3 /* 4 * 普通显示组件 5 */ 6 class B extends Component { 7 render() { 8 return ( 9 <div> 10 我的名字叫：{this.props.name} 11 <br /> 12 我的年龄是：{this.props.age} 13 <br /> 14 我的性别是：{this.props.sex} 15 <br /> 16 </div> 17 ); 18 } 19 } 20 // 调用高阶函数A： 21 export default A('提示')(B)
1 import React,{Component} from 'react'; 2 3 /** 4 * 定义高阶函数 A 5 */ 6 export default (title) => WrappendComponent => class A extends Component { 7 8 render() { 9 // 通过取出 props 来控制要传入子组件的 props 10 const {age, ...otherProps} = this.props 11 return ( 12 <div> 13 <div>{title} X</div> 14 {/* // 这个 WrappendComponent 将被传递进来的组件代替 */} 15 <div> 16 // 在App.js中，我们并没有将sex这个属性传递给B,而是通过A高阶函数来传递 17 <WrappendComponent sex={'男'} {...otherProps}/> 18 </div> 19 20 </div> 21 ); 22 } 23 }
// 上述三个页面执行流程：App.js渲染B.js定义的页面内容。而B.js调用了高阶函数A.js,所以实际留存为：App.js传递的值先到A.js高阶函数，A.js高阶函数对值进行处理然后再传递给B.js显示
