高阶函数与高阶组件

高阶函数基本概念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.jsimport 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.jsimport React, {Component} from ‘react’import D from ‘./D’class E extends Component {render(){return ( <div> 我的div </div>);}}export default D(E)// F.jsimport 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