摘要：高阶函数基本概念函数可以作为参数被传递函数可以作为返回值输出平时遇到的应用场景中获取成功数组中和高阶组件高阶组件就是接受一个组件作为参数并返回一个新组件的函数高阶组件是一个函数，并不一个组件例子组件里面包含组件这里必须出去这是组件高阶组件的
高阶函数基本概念
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(
这是A组件
高阶组件的应用
传参数
import React, { Component } from "react";
import "./App.css";
import B from "./components/B"
class App extends Component {
render() {
return (
这是我的APP
);
}
}
export default App;
//A组件
import React , { Component }from "react"
export default (title)=> WrappedComponent => {
return class A extends Component{
render() {
return(
这是A组件{title}
使用第二种方式的步骤
继承方式高阶组件的实现
//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
);
}
}
export default D(E)
// F.js
import React, {Component} from "react"
import d from "./D"
class F extends Component {
render(){
return (
我的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 (
这是我的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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103680.html
摘要：创建一个普通函数因为的存在所以变成构造函数创建一个方法在方法中，创建一个中间实例对中间实例经过逻辑处理之后返回使用方法创建实例而恰好，高阶组件的创建逻辑与使用，与这里的方法完全一致。因为方法其实就是构造函数的高阶组件。 很多人写文章喜欢把问题复杂化，因此当我学习高阶组件的时候，查阅到的很多文章都给人一种高阶组件高深莫测的感觉。但是事实上却未必。 有一个词叫做封装。相信写代码这么久了，大...
摘要：博客地址背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。 博客地址：http://www.luckyjing.com/post... 背景知识 在开始讲述高阶组件前，我们先来回顾高阶函数的定义：接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出...
摘要：之所以称之为高阶，是因为在中，这种嵌套关系会反映到组件树上，层层嵌套就好像高阶函数的一样，如图从图上也可以看出，组件树虽然嵌套了多层，但是实际渲染的结构并没有改变。你可能已经注意到，目前我写的所有高阶函数，都是形如表示为。 什么是高阶组件 Higher-Order Components (HOCs) are JavaScript functions which add function...
摘要：为了代码进一步解耦，可以考虑使用高阶组件这种模式。开源的高阶组件使用提供了一系列使用的高阶组件，可以增强组件的行为，可以利用此库学习高阶组件的写法。通过使用此库提供的高阶组件，可以方便地让列表元素可拖动。 1. Decorator基本知识 在很多框架和库中看到它的身影，尤其是React和Redux，还有mobx中，那什么是装饰器呢。 修饰器（Decorator）是一个函数，用来修改类的...
阅读 3864·2023-04-26 00:36
阅读 2672·2021-11-16 11:44
阅读 1094·2021-11-15 17:58
阅读 1668·2021-09-30 09:47
阅读 1212·2019-08-30 13:05
阅读 1544·2019-08-30 12:55
阅读 2412·2019-08-30 11:02
阅读 2726·2019-08-29 17:01
