高阶函数基本概念
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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。