高阶函数与高阶组件

共计 2519 个字符，预计需要花费 7 分钟才能阅读完成。

高阶函数基本概念
1 函数可以作为参数被传递
setTimeout(()=>{
console.log(“aaaa”)
},1000)

2 函数可以作为返回值输出
function foo(x){
return function(){
return x
}
}

// 平时遇到的应用场景
//ajax 中
$.get(“/api/getTime”,function(){
console.log(“ 获取成功 ”)
})
// 数组中
some(), every(),filter(), map() 和 forEach（）

高阶组件
1 高阶组件就是接受一个组件作为参数并返回一个新组件的函数
2 高阶组件是一个函数，并不一个组件
例子：A 组件里面包含 B 组件
import React , {Component}from ‘react’
function A(WrappedComponent){
return class A extends Component{// 这里必须 retrun 出去
render() {
return(
<div>
这是 A 组件
<WrappedComponent></WrappedComponent>
</div>
)
}
}
}

export default A

高阶组件的应用
传参数
import React, {Component} from ‘react’;
import ‘./App.css’;
import B from ‘./components/B’
class App extends Component {
render() {
return (
<div className=”App”>
这是我的 APP
<B age=”18″ name=”Tom”/>
</div>
);
}
}
export default App;

// A 组件
import React , {Component}from ‘react’
export default (title)=> WrappedComponent => {
return class A extends Component{
render() {
return(
<div>
这是 A 组件 {title}
<WrappedComponent sex=” 男 ” {…this.props}></WrappedComponent>
</div>
)
}
}
}

// B 组件
import React , {Component}from ‘react’
import A from ‘./A.js’
class B extends Component{
render() {
return(
<div>
性别：{this.props.sex}
年龄：{this.props.age}
姓名：{this.props.name}
</div>
)
}
}
export default A(‘ 提示 ’)(B)

// 有两种方式引用高阶函数，第一种入上
// 第二种

import React , {Component}from ‘react’
import a from ‘./A.js’
@a(‘ 提示 ’)
class B extends Component{
render() {
return(
<div>
性别：{this.props.sex}
年龄：{this.props.age}
姓名：{this.props.name}
</div>
)
}
}
export default B

使用第二种方式的步骤

继承方式高阶组件的实现
//D.js
import React from ‘react’
const modifyPropsHOC= (WrappedComponent) => class NewComponent extends WrappedComponent{
render() {
const element = super.render();
const newStyle = {
color: element.type == ‘div’?’red’:’green’
}
const newProps = {…this.props,style:newStyle}
return React.cloneElement(element,newProps,element.props.children)
}
}
export default modifyPropsHOC

// E.js

import React, {Component} from ‘react’
import D from ‘./D’
class E extends Component {
render(){
return (
<div>
我的 div
</div>
);
}
}

export default D(E)

// F.js
import React, {Component} from ‘react’
import d from ‘./D’
class F extends Component {
render(){
return (
<p>
我的 p
</p>
);
}
}

export default d(F)

import React, {Component} from ‘react’;
import ‘./App.css’;
import E from ‘./components/E’
import F from ‘./components/F’
class App extends Component {
render() {
return (
<div className=”App”>
这是我的 APP
<E></E>
<F></F>
</div>
);
}
}

export default App;

修改生命周期
import React from ‘react’
const modifyPropsHOC= (WrappedComponent) => class NewComponent extends WrappedComponent{
componentWillMount(){
alert(“ 我的修改后的生命周期 ”);
}
render() {
const element = super.render();
const newStyle = {
color: element.type == ‘div’?’red’:’green’
}
const newProps = {…this.props,style:newStyle}
return React.cloneElement(element,newProps,element.props.children)
}
}

export default modifyPropsHOC