初识React Hooks,函数式编程

最新推荐文章于 2024-05-29 11:02:41 发布
最新推荐文章于 2024-05-29 11:02:41 发布
阅读量753 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiaoYige_97/article/details/122162502
版权

React Hook 技术胖

用了一年多的React.js 但是在公司一直用的是Class 组件，但是被问到React 提高性能有什么手段的时候，我却哑口无言，不能说出一个 一二三来，连React官方推荐的Hook也是没有用过。学了之后hook 之后，感觉和Class 组件对比来说，在很多场景用hook,函数组件是比较方便的，一些简单的页面如果用Class 组件，显得有些 “臃肿”。
优化可以用useCallback ，useMemo和memo

Class 组件和函数组件式

两者是编程思想的改变：Class组件是面向对象，封装的编程实现而 函数组件开发，是一种链式编程。并且Hook使函数组件有了状态（state）

useState
import React, { useState } from 'react'

function UseStateExam() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked : {count}</p>
      <Button onClick={() => setCount(count + 1)}>count ++</Button>
    </div>
  )
}

useState 不能放在条件判断和循环中（在子函数中调用呢？）

useEffect

useEffect 是异步的，不会阻断视图的更新，所有不能实时的计算页面的大小。

useEffect 接受两个参数

第一个参数是执行的函数，可以返回一个函数。

第二个参数是一个数组，可以不传。

  1. 当第二个参数没有传的时候，页面第一次渲染和useState 变化时，都会触发函数执行，相当于componentDidMount和 componentDidUpdate组合起来的功能。即当useEffect没有第二个参数时,组件的初始化和更新都会执行。

    function UseEffectExam() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`useEffect 执行 ${count}`)
  })

  return (
    <div>
      <p>You clicked : {count}</p>
      <Button onClick={() => setCount(count + 1)}>count ++</Button>
    </div>
  )
}

  2. 当第二个参数是一个空数组时，页面第一次渲染时函数执行，相当于componentDidMount

    function UseEffectExam() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`useEffect 执行 ${count}`)
  }, [])

  return (
    <div>
      <p>You clicked : {count}</p>
      <Button onClick={() => setCount(count + 1)}>count ++</Button>
    </div>
  )
}

  3. 当第二个参数是一个包含 UseState 的数据，当数组的里的state 发生变化时，函数执行

    function UseEffectExam() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`useEffect 执行 ${count}`)
  }, [count])

  return (
    <div>
      <p>You clicked : {count}</p>
      <Button onClick={() => setCount(count + 1)}>count ++</Button>
    </div>
  )
}

  4. 实现 componentDidMount 和 componentWillUnmount，数组为空时，且第一个参数返回个函数，那么页面挂载和卸载的时候触发这个函数

    function UseEffectExam() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log(`useEffect 执行 ${count}`)

    return () => {
      console.log("页面卸载");
    }
  }, [count])

  return (
    <div>
      <p>You clicked : {count}</p>
      <Button onClick={() => setCount(count + 1)}>count ++</Button>
    </div>
  )
}

    初始化的时候不执行 return 的方法，count变化事执行（如果是空数据不执行），页面卸载是时候执行

useContext和createContext

使用createContext实例化一个useContext对象： CountContext。

CountContext.Provider 包裹着的子组件，都可以用 let count = useContext(CountContext)得到父组件的count值

import React, {,useState,useContext,createContext} from 'react'
const CountContext = createContext()
function UseContextExam() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h2>父组件</h2>
      <p>You clicked : {count}</p>
      <Button onClick={() => setCount(count + 1)}>count ++</Button>
      <CountContext.Provider value={count}>
        <Childer1 />
      </CountContext.Provider>
    </div>
  )
}

function Childer1() {
  // CountContext 这个实例是要和父组件的是同一个实例才可以?
  let count = useContext(CountContext)
  return (
    <div>
      <h2>子组件1</h2>
      <p>子组件接受到:{count}</p>
    </div>
  )
}
UseReducer

useReducer接受一个函数和默认值

function UseReducerExam() {
  const [count, dispatch] = useReducer((state, action) => {
    switch (action) {
      case "add":
        return state + 1
      case "sub":
        return state - 1
      default:
        return state
    }
  }, 0)

  return (
    <div>
      <p>You clicked : {count}</p>
      <Button onClick={() => dispatch('add')}>count ++</Button>
      <Button onClick={() => dispatch('sub')}>count --</Button>
    </div>
  )
}
UseReducer 和 useContext 结合案例
Color.js
import React, { createContext, useReducer } from 'react'
const ColorContext = createContext({})
const UpColor = 'UpColor'
const reducer = (state, action) => {
  switch (action.type) {
    case UpColor:
      return action.color
    default:
      return state
  }
}

const Color = props => {
  const [color, dispatch] = useReducer(reducer, 'green')
  return (
    <ColorContext.Provider value={{ color, dispatch }}>
      {props.children}
    </ColorContext.Provider>
  )
}
export {
  Color,
  ColorContext,
  UpColor,
}
ButtonView.js
import { Button, } from "antd";
import { useContext } from 'react'
import { ColorContext, UpColor, } from './Color'

function Buttons() {
  const { dispatch } = useContext(ColorContext)
  return (
    <div>
      <Button onClick={() => dispatch({ type: UpColor, color: "red" })}>红色</Button>
      <Button onClick={() => dispatch({ type: UpColor, color: "yellow" })}>黄色</Button>
    </div>
  )
}

export default Buttons
ShouArea
import React, { useContext } from 'react'
import { ColorContext, } from './Color'

function ShowArea() {
  const { color } = useContext(ColorContext)
  return (
    <div style={{ color }}>
      字体颜色为red
    </div>
  )
}

export default ShowArea
index.js
import Buttons from "./ButtonView";
import ShowArea from "./useReducerDome";
import { Color } from './Color'

function UseReducerTest() {
  return (
    <div>
      <Color>
        <Buttons />
        <ShowArea />
      </Color>
    </div>
  )
}

export default UseReducerTest
useMemo

为什么我的usememo 子组件在父组件更改商品名称的时候，也会重复渲染呢


function UseMomeExam() {
  const [itemName, setItemName] = useState("商品" + 1)
  const [itemPrice, setItemPrice] = useState(0)
  const [itemCount, setItemCount] = useState(0)

  const MemeChildren = useMemo(() => UseMomeChildren, [itemPrice,setItemCount])
  return (
    <div>
      <span>商品名称:{itemName}</span>
      <span>商品单价:{itemPrice}</span>
      <span>商品数量:{itemCount}</span>
      <br />
      <Button onClick={() => setItemPrice(itemPrice + 1)}>单价++</Button>
      <Button onClick={() => setItemCount(itemCount + 1)}>数量++</Button>
      <Button onClick={() => setItemName(itemName + 1)}>更换商品</Button>
      <MemeChildren itemPrice={itemPrice} itemCount={itemCount} />
    </div>
  )
}

function UseMomeChildren(props) {
  const { itemCount, itemPrice } = props
  console.log("子组件渲染", props);
  return (
    <div>
      <h3>商品总价:{itemCount * itemPrice}</h3>
    </div>
  )
}
useRef

useRef 有两个作用

  1. 获取DOM 元素
  2. 保存变量
function UseRefExam() {
  const inputEl = useRef(null)

  // 获取DOM input
  const onButtonClick = () => {
    // inputEl.current.value = "Hello World"
    console.log("inputEl", inputEl);
  }

  const [text, setText] = useState('Jspang')
  const textRef = useRef()

  // setText触发，就将输入框的内容保存
  useEffect(() => {
    textRef.current = text
    console.log('textRef.current', textRef.current);
  })

  return (
    <div>
      <Input ref={inputEl} type="text" />
      <Button onClick={onButtonClick}>在input上的文字</Button>
      <br />
      <br />
      <Input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  )
}
useCallback

useCallback缓存方法，第一参数是一个函数，第二个是一个数据，空数组表示只执行一次

监听页面大写

自定义Hook

自定义一个useWinSize的hook,其实就是封装一个方法/组件，

import React, { useState,useEffect,useCallback,} from 'react'
import { Button, Input } from 'antd'
function useWinSize() {
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.height
  })

  const onResize = useCallback(
    () => {
      setSize({
        width: document.documentElement.clientWidth,
        height: document.documentElement.height
      })
    },
    [],
  )

  useEffect(() => {
    window.addEventListener('resize', onResize)
    return () => {
      window.removeEventListener('resize', onResize)
    }
  })

  return size
}

export default useWinSize

使用自定义hook

import useWinSize from './useWinSize'

function HookTesh() {
  const size = useWinSize()
  return (
    <div>页面的Siz:{size.width} * {size.height}</div>
  )
}

学习地址bilibili 技术胖:https://www.bilibili.com/video/BV1y4411Q7yH?p=11

忘喧
关注
专栏目录
React18入门到实战2023版
郭宝的博客
10-24 911
React 是由Meta公司研发，是一个用于构建Web和原生交互界面的库。jsx 是 Javascript和XML（HTML）的缩写，表示在JS代码中编写HTML模板结构，它是React中编写UI模板的方式。HTML的声明式模板写法JS的可编程能力概念：自定义Hook是以use打头的函数，通过自定义 Hook 函数可以用来实现逻辑的封装和复用。需求：实现点击toggle 显示/隐藏 this is div 这个组件/***/
React原理学习–Build your own React
klji234的博客
04-05 1684
基于Rodrigo Pombo的博客Build your own React 简要了解React运作原理的学习笔记，React16.8版本。模拟实现React.createElement，render()，fiber，函数式组件，useState。
react焕发第二春，函数式编程HOOKS
通俗易懂
05-08 737
文章目录HOOKSHook 使用规则useState()：状态钩子useEffect()：副作用钩子副效应是什么？useEffect() 的用法useEffect() 的用途useContext()：共享状态钩子useReducer()：action 钩子创建自己的 HooksHook API HOOKS Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 Hook 是一些可以让你在函数组件里“钩入” React state
程序或函数指定了太多的引数_函数式编程看React Hooks(一)简单React Hooks实现
weixin_39551611的博客
12-06 194
秋风：函数式编程看React Hooks(一)简单React Hooks实现​zhuanlan.zhihu.com秋风：函数式编程看React Hooks(二)事件绑定副作用深度剖析​zhuanlan.zhihu.com前言函数式编程介绍（摘自基维百科） 函数式编程（英语：functional programming）或称函数程序设计、泛函编程，是一种编程范式，它将计算机运算视为函数运算，并且避免...
从函数式编程理解 React Hooks
konsoue的博客
02-03 969
2019 年 2 月 6 日，React 官方 推出 React v16.8.0，稳定的 Hooks 功能出世。 React Hooks 和 函数式组件的配合，更能适应函数式编程的思维。 数学上定义的函数公式是：y = f(x) 如果将状态 state视为 输入 x，视图 UI视为 输出 y，编写的函数组件为 Fn，那么可以写出这样一个式子：UI = Fn(state) 将 React 的 Hooks，按自变量和因变量划分 自变量 为什么说这三个 hook 是自变量呢？ 因为他们如果值
React之5 编程式函数Hook
uncle_Huang的博客
03-04 462
Hook解决函数组件不能使用state的问题。函数式组件比class组件好用，这时候hook它来了，这样函数式组件也能使用state，岂不是爽歪歪。 5.1 新特性useState(组件状态管理钩⼦) 用法： const [state,setState]=useState(initState) state是要设置的状态 setState是更新state的⽅法，只是⼀个⽅法名，可以随意更改 in...
【React】react函数式编程常用hooks讲解
最新发布
工作的日常记录和平凡的生活分享
05-29 2462
React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。React 中常用的 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect等。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具。
React函数式组件、hooks及初识路由(三)
L_u_c_k_y_m_a_n的博客
07-29 677
一、前言         昨天由于有一些事情耽搁,没有学习新的 react 以及发布博客. 而今天呢,这篇内容会分享类组件、函数式组件、hooks的一些方法以及初识 react 路由.接下来我们学习吧! 二、children         组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容  &nbsp
react初识
06-10
它采用声明式编程方式，使得开发者可以描述应用在不同状态下的样子，而不是如何改变状态。React使用JSX语法，它是JavaScript与XML的混合语法，使得HTML结构的编写更加直观。 二、虚拟DOM React引入了虚拟DOM...
React Hooks: 更优雅的状态管理解决方案
# 1. 引言 ## 1.1 React Hooks的背景和意义 React Hooks是React 16.8版本引入的一项重要特性，旨在改变和简化组件的状态管理和副作用处理方式。在旧版React中，状态管理和...React Hooks的目标是使函数组件能够拥有类
React学习之 -- 函数式编程
YuqiRealm.com
04-24 4904
React把需要不断重复构建的UI抽象成了组件，它充分利用很多函数式的方法减少了冗余代码。可以说，函数式编程是React的精髓。那么，到底什么是函数式编程呢？维基百科给出的解释： （注意星号*之间的内容。）函数式编程（英语：functional programming）或称函数程序设计，又称泛函编程，是一种编程范型，它将电脑运算视为数学上的函数计算，并且**避免使用程序状态以及易变对象**。函数编
React中的函数式编程及函数式编程定义的深刻解读
有问题 ! 请留言 !
02-13 4444
React中的函数式编程及函数式编程定义的深刻解读 因为一直有了解函数式编程，也知道React是比较遵循函数式编程设计模式的框架，但是一直对函数是编程的定义和理解不是很清楚，到底函数式编程有上面优势，React如何遵循函数是编程，这些都是需要去仔细推敲的，可以让以后的代码写的更为优雅和合理 什么是函数式编程 函数是编程是一种设计思想，就像面向对象编程也是一种设计思想。函数式编程总的来说就是用...
React学习笔记：实用又好用的Hooks函数
老司机的后备箱
01-11 688
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
Hook函数（钩子函数）
qq_40409117的博客
05-06 1118
Hook 举例：onclicklistener就是一个hook函数 钩子函数其实就是事件，就是配置执行完成的回调函数 Android的执行流程中，把按钮按下去后执行的逻辑写在onclicklistener（它就是一个hook函数）中，并且暴露给用户，让用户可以重写onclicklistener（可理解为注册hook函数），这就是hook函数。 Hook是一种编程模式，并不是和语言有关的。 ...
浅谈React编程思想
筱葭的博客
04-24 3351
React是Facebook推出的面向视图层开发的一个框架，用于解决大型应用，包括如何很好地管理DOM结构，是构建大型，快速Web app的首选方式。 1、第一步：把UI拆分为一个组件的层级 一个独立的组件的标准： 单一功能原则——一个组件在理想情况下只做一件事情。如果它要做的事情不止一件，它就应该被分解为更小的组件。   2、第二步：用React创建一个静态版本 要构建渲
函数式编程：初识函数式编程
lee前端技术站
07-21 194
我们在经历了面向对象编程、面向过程编程之后，函数式编程又进入了我们的视线。其实，函数式编程并不是一个什么新鲜的东西。它早在上世纪50年代，随着 Lisp 语言的创建，就已经诞生。而近些年，随着react hooks的发布，函数式编程以其优雅，简单的特点再次出现在大众的视线中。函数式编程这种古老的编程范式并没有随着岁月而褪去其光彩，反而愈加生机勃勃。 什么是函数式编程？ 关于函数式编程，维基百科是这样说的：函数式编程是一种编程范畴。他将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。函数编
《React-Hooks 介绍》
MoveLikeRabbit的博客
11-06 717
文章目录什么是Hooks一眼看完Hooks`State Hook``Effect Hook` React v16.7-alpha 版本，推出了一个新的 API 叫做 React-Hooks，它的主要功能是让 function component 可以像 class component 那样，可以处理 state, life-cycle, effect, context 等特性。 相比 clas...
React Hooks源码浅析
大灰狼的小绵羊哥哥的博客
07-02 2081
前段时间研究了一波React的渲染流程，内部机制的源码，阅读到一半的时候React终于推出了16.8.x的版本，主要带来的更新就是Hooks的新功能。相信已经有很多的使用教程或者源码阅读文章。那么我也来一个属于自己的阅读有感的文章，做一个记录吧。 其实React文档中也有说明了Hooks的提出主要是为了解决什么问题的。 React团队认为组件之间复用状态逻辑很难。 就以前React为了将一个组...
React基础知识
m0_51207602的博客
01-28 1502
React 1.声明式编程和函数式编程 声明式编程是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。下面是一个例子，数组中的每个元素都乘以 2，我们使用声明式map函数，让编译器来完成其余的工作，而使用命令式，需要编写所有的流程步骤。而命令式编程描述了如何做 下面是一个例子，数组中的每个元素都乘以 2，我们使用声明式map函数，让编译器来完成其余的工作，而使用命令式，需要编写所有的流程步骤。 const numbers = [1,2,3,4,5]; // 声明式 const
react与函数式编程
06-09
React是一个用于构建用户界面的JavaScript库。它被设计成具有高度的可重用性和可组合性，并且适用于函数式编程。React的核心思想是将“组件”作为构建块，每个组件都有自己的状态和生命周期方法。React可以与函数式编程很好地结合，因为函数式编程强调将代码分解为可重用的函数，这正是React组件所做的。 使用函数式编程的另一个好处是可以更轻松地进行单元测试和调试。由于函数式编程的函数都是纯函数，它们的结果只取决于输入参数，因此可以很方便地编写测试用例来验证它们的行为是否正确。这也使得代码更容易调试，因为每个函数都具有确定性，当出现问题时很容易找到根本原因。 综上所述，React和函数式编程是相互兼容的，它们可以很好地结合使用，使得代码更具可重用性、可组合性、易于测试和调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值