react 的高阶组件

最新推荐文章于 2024-03-18 16:08:32 发布
最新推荐文章于 2024-03-18 16:08:32 发布
阅读量265 收藏
点赞数
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43934644/article/details/107666422
版权

react 的高阶组件

emmm网上有很多例子，但是我想自己写，以后不用到处乱找了

useState

const [state, setState] = useState(initialState);

返回一个state和一个修改state的函数，在以往我们写类组件的时候会把数据存储在state中，访问数据直接访问this.state.<名字>就可以访问到。

import React , { useState } from 'react'

function UseState(props) {
    let [count , setcount] = useState({data:0})
    return (
        <>
            <div>count:{count.data}</div>
            <button onClick={()=>{
                setcount({
                    ...count,
                    data:count.data+1
                })
            }}>add count</button>
        </>
    )
}
//这样视图区域的data就会加1

注意：对象和数组都是地址的引用，所以如果让其监听到发生改变最好使用的是创建新的对象或者数组的方式，这样就不回出现data的改变然后dom并不改变的情况了。

useEffect

useEffect 类似于vue中的watch，它包含两个参数，第一个参数是一个回调函数，第二个参数属于一个数组，类似于监听的列表。当只存在第一个参数的时候，props改变或者任何一个useState中的值发生改变都会触发useEffect这个hooks。

import React , { useState , useEffect } from 'react'

function UseState(props) {
    let [count , setcount] = useState({data:0})
    useEffect(() => {
        console.log(222)
        // 使用浏览器的 API 更新页面标题
        document.title = `You clicked ${count.data} times`;
    },[count.data]);
    return (
        <>
            <div>count:{count.data}</div>
            <button onClick={()=>{
                setcount({
                    ...count,
                    data:count.data+1
                })
            }}>add count</button>
        </>
    )
}

当props更新and所监听的数据更新后会触发useEffect的打印

useContext

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。

//
import React , { useContext} from 'react'

const ColorContext = React.createContext('green')
//创建Context实例
function UseContext(props) {
    return (
        <ColorContext.Provider value={"red"}>
            <Child></Child>
        </ColorContext.Provider>
    )
}
//子组件
function Child(props) {
    return <Grand></Grand>
}
//孙子组件
function Grand(props) {
    let color = useContext(ColorContext)
    //解析对应的context实例
    console.log(color)
    return <div>color:{color}</div>
}

这种方式更方便的进行嵌套循环生成。

useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

import React ,{ useReducer } from "react";

let initState = {
    count : 0
}
//创建reducer方法
function reducer(state,action){
    switch (action.type) {
        case "add":
            return { count:state.count + action.count };
        case "reduce":
            return { count:state.count - action.count }
        default:
            break;
    }
    
}

function Reducer(props) {
    const [state, dispatch] = useReducer(reducer, initState);
    return (
      <>
        Count: {state.count}<br />
        <button onClick={() => dispatch({type: 'add',count:2})}>+</button>
        <button onClick={() => dispatch({type: 'reduce',count:2})}>-</button>
      </>
    );
}

对但是我害怕到时候和redux弄混，所以还是用useState

useCallback

我们经常在写函数式组件或者类组件的时候可能会把属性或者方法写在标签里面，这就造成了如果父组件的props或者state改变的时候会进行重新渲染子组建的效果。比如：

import React from 'react';
function Back(props) { 
    return (
        <button style={{fontSize:"20px"}} onClick={()=>console.log(111)}>useCallback</button>
    )
}

export default Back
//这样当Back的父组件的props发生改变或者是state发生改变可能就会把Back全部渲染一遍，如果是大的组件就很耗时，并不优雅

你可以通过 useCallback 获得一个记忆后的函数。第一个参数传入目标函数 ,第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback 就会重新返回一个新的记忆函数提供给后面进行渲染。

import React, { useState ,useCallback ,useMemo } from 'react';
const style = {
    fontSize:"20px"
}
function Back(props) {
    let [count,setcount] = useState(0)
    let conso  = useCallback(()=>console.log(count),[count])
    
    return (
        <>
            <button style={style} onClick={conso}>useCallback:{count}</button>
            <button style={style} onClick={()=>setcount(count+1)}>ADD</button>
        </>
    )
}

export default Back

注意，如果useCallback的第二个参数数组为空的话，他会count永远保存的一开始的状态，所以这里相关的参数一定要在数组里面

useMemo

useCallback 的功能完全可以由 useMemo 所取代 如下：

import React, { useState ,useCallback ,useMemo } from 'react';
const style = {
    fontSize:"20px"
}
function Back(props) {
    let [count,setcount] = useState(0)
    let conso  = useMemo(()=>()=>console.log(count),[count])
    
    return (
        <>
            <button style={style} onClick={conso}>useCallback:{count}</button>
            <button style={style} onClick={()=>setcount(count+1)}>ADD</button>
        </>
    )
}

export default Back

唯一的区别是：useCallback 不会执行第一个参数函数，而是将它返回给你，而 useMemo 会执行第一个函数并且将函数执行结果返回给你。所以 useCallback 常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而 useMemo 更适合经过函数计算返回记忆组件。

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

当 a/b 改变时，child1/child2 才会重新渲染

useRef

useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用

import React, { Component , createRef } from 'react';

class Refs extends Component {
    constructor(props) {
        super(props);
        this.myRef = createRef()
    }
    onButtonClick=()=>{
        console.log(this.myRef.current.value)
    }
    render() {
        return (
            <>
                <input ref={this.myRef} type="text" />
                <button onClick={this.onButtonClick}>get input value</button>
            </>
        );
    }
}

export default Refs;

这是类组件的操作：记录一下 因为平时经常忘记

import React , { useRef } from "react";

function UseRef() {
    const inputEl = useRef();
    const onButtonClick = () => {
      // `current` 指向已挂载到 DOM 上的文本输入元素
      console.log(inputEl.current.value);
    };
    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>get input value</button>
      </>
    );
}
export default UseRef

函数式组件只用 useRef 之后

useImperativeHandle

通过 useImperativeHandle 用于让父组件获取子组件内的索引 , useImperativeHandle 应当与 forwardRef 一起使用。

import React , { useRef , useImperativeHandle , forwardRef} from "react";

function Child(props,ref){
    const temRef = useRef()
    useImperativeHandle(ref, () => temRef.current);
    return (
        <>
            <input ref={temRef}></input>
        </>
    )
}

const ChildInput = forwardRef(Child)

function Parent(){
    let inputRef = useRef()
    const getValue = ()=>{
        console.log(inputRef.current.value)
    }
    return (
        <>
            <ChildInput ref={inputRef} />
            <button onClick={getValue}>get value</button>
        </>
    )

}

export default Parent

useLayoutEffect

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。尽可能使用标准的 useEffect 以避免阻塞视觉更新

import React, { useLayoutEffect, useState, useEffect,useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const [width, setWidth] = useState(0);
  const h1Ref = useRef()
  useLayoutEffect(() => {
    const title = h1Ref.current;
    const titleWidth = title.getBoundingClientRect().width;
    console.log("useLayoutEffect",titleWidth);
    if (width !== titleWidth) {
      setWidth(titleWidth);
    }
  });
  useEffect(() => {
    console.log("useEffect");
  });
  console.log("render");
  return (
    <div>
      <h1 ref={h1Ref}>hello</h1>
      <h2>{width}</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

详细原因请看这

useDebugValue

可用于在 React 开发者工具中显示自定义 hook 的标签。

本文参考简书DC_er+React—hook官网,github地址

是鑫❤呀！
关注
专栏目录
React 高阶组件
前端博客典中典
12-07 730
高阶组件：高阶组件就是一个接收一个组件并返回另外一个新组件的函数！ 高阶组件总共分为两大类 一、代理方式（1、操纵 prop 2、抽取状态 3、包装组件） 1、操纵 prop 增加prop import React from 'react' const HocAddProp = (WrappedComponent，uid) => class extends React.Component { render() {
函数式编程与React高阶组件
Saber00001的博客
12-26 235
相信不少看过一些框架或者是类库的人都有印象，一个函数叫什么creator或者是什么什么createToFuntion，总是接收一个函数，来返回另一个函数。这是一个高阶函数，它可以接收函数可以当参数，也可以当返回值，这就是函数式编程。像柯里化、装饰器模式、高阶组件，都是相通的，一个道理。 本文重点是React高阶组件，要理解高阶组件，不得不说函数式编程。 1. 函数式编程 函数式编程是一...
React中的高阶组件
WindrunnerMax
01-15 1943
React中的高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。 描述 高阶组件从名字上就透漏出高级的气息，实际上这个概念应该是源自于JavaScript的高阶函数，高阶函数就是接受函数作为输入或者输出的函数，可以想到柯里化就是一种高阶函数，同样在React文档上也给出了高阶组件的定义，高阶组件是接收组件并返回新组件的函数。 A higher-orde
React 高级组件
qq_38719039的博客
09-25 781
原文转载地址：http://www.karmagut.me/?p=549 本文将探讨如何构建更易于复用，更为灵活的React高级组件。 在实际的应用开发中，多个React组件之间可能需要共用一段完成某些特定功能的代码，那么如何在不同的组件间复用这段代码就成了一个值得思考的问题（或者说，如何创建具有类似功能的，不同的React组件）。 在JavaScript的世界中，函数是第一等的公民，既能够...
函数式组件和高阶组件
weixin_43390711的博客
03-22 316
一、h和render。
react基础学习
la5616214的博客
10-28 187
react特点 (1) 声明式UI const jsx = <div className="app"> <h1>Hello React! 动态数据变化:{count}</h1> </div> 对比原生: document.createElement('div') 命令式 虚拟dom: 通过 js 对象的方式, 模拟真实的dom, 这个结构, 就是虚拟dom (2) 组件化 组件是react中最重要的内容 组件用于表示页面中的部分内容 ..
深入理解React高阶组件
08-29
本篇文章主要介绍了深入理解React高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React 高阶组件（HOC）
01-20
高阶组件（HighOrderComponent）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体来说，高阶组件是一个函数，能够接受一个组件...
React高阶组件以获取诸如悬停，焦点，活动等活动-React开发
05-27
react-event-as-prop React高阶组件获取诸如悬停，焦点，活动等活动，安装$ npm install react-event-as-prop用法简单用法import {Hov react-event-as-prop React Higher-订购组件以获取诸如悬停，焦点，活动等活动...
react中表单的使用
Debug的博客
07-19 284
单个使用input（内有注释） import React, { Component } from "react"; //单个input方法，比较麻烦，扩展性极低 class Index extends Component { constructor(props) { super(props); this.state = { uname: "", pword: "", }; } setUname(e) { let value =
React的高阶组件详解
热门推荐
m0_71485750的博客
10-05 1万+
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先， 高阶组件本身不是一个组件，而是一个函数;
【react基础】13、redux的简单使用
白柴
08-21 158
一、
React 中的 HOOKS 和 一些高阶组件概念
weixin_72099243的博客
02-09 466
React 中 高阶组件和Hooks的一些概念摘要
将span隐藏的函数_React进阶之路----hook (函数钩子)与Antd(UI组件)
weixin_39669204的博客
12-08 251
HOOK1.什么是hook技术React16.8新增的特性：可以让你在不编写 class 的情况下使用 state，React没有破坏性的改动 ，100%向后兼容，解决了在组件中复用状态逻辑很难得问题。渐进策略：没有计划从React中移除class。hook和现有代码可以同时进行工作，你可以渐进式的 使用他们。2.useState(函数组件)可以在函数组件中使用state，节省的代码的书写useS...
以回调函数的形式给useState提供初始参数
wbskb的博客
11-05 305
如何使useState通过回调函数的形式给useState提供初始参数。
react--Hooks进阶
最新发布
Y200195的博客
03-18 447
参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。1.Context如果要传递数据 只需要在整个应用初始化的时候传递一次就可以 就选择在index.js文件里做数据提供。清理副作用：可以在副作用函数中的末尾return一个新的函数，在新的函数中编写清理副作用的逻辑。fetch：是 浏览器原生支持的一种获取数据的方法。2.回调函数中的逻辑只会在组件初始化时执行一次。
理解react中的高阶组件和高阶函数
IT_10的博客
08-29 2181
高阶组件 ES6中使用关键字class来使它的语法有和 类 相似的写法和功能，但是它的本质还是一个函数。 因此，高阶组件本质上是一个函数，只是这种组件（函数）接收一个组件，返回一个新的组件。 比如下面这个Login组件，在该组件中使用了Form组件，由于需要用到form对象的getFieldDecorator 方法，因此Login组件中通过this.props要能访问到form对象，使用Form....
react怎么让组件强制刷新--函数式高阶组件
qq_42750608的博客
03-18 8938
react怎么让组件强制刷新? (不仅有纯函数组件, 还增加了class组件写法)
高阶组件(Higher-Order Components)
Details Inside Spring
05-17 3736
高阶组件(Higher-Order Components) 高阶组件(HOC)是React中组件重用的一种高级技术。HOC本身并不是React API的一部分。它是从React可组合性质中冒出来的一种模式。 具体地讲，一个高阶组件是一个函数，它输入一个组件，然后返回一个新的组件。 const EnhancedComponent = higherOrderComponent(Wrapped...
react 高阶组件
10-10
React 高阶组件(HOC)是一种函数，它接受一个组件并返回一个新组件。高阶组件可以在不修改原始组件代码的情况下添加对其功能的增强。 举个例子，我们可以创建一个名为 withLoading 的高阶组件，该组件可以在数据加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值