React Hooks

已于 2023-08-13 23:27:58 修改
阅读量932 收藏 2
点赞数 1
分类专栏： 我的笔记 文章标签： 前端 hooks react
于 2023-08-06 23:17:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59962790/article/details/132073007
版权

JSX语法：

JSX将HTML语法直接加入到JS代码中，在通过翻译器转换到纯js后由浏览器执行，实际开发中，JSX在产品打包阶段已经编译为js，无副作用，让代码易于维护更加直观，编译过程由Babel的JSX编译器实现。

类组件开发

import React from 'react'
import Child from './components/Child'
 
export default class Demo extends React.Component{
    state={
        info:{} //传递给子组件
    }
 
    saveList(list){
        //子组件传来的数据
        console.log(list)
    }
    render(){
        <div>
            <Child info={this.state.info} saveList={this.saveList}/>
        </div>
    }
}

函数式组件开发

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

hooks（react 16.8版本以后才支持）

高阶组件为了复用，导致代码层级复杂，生命周期复杂，写成function组件，无状态组件，写成class类组件，成本过高，我们可以使用react hooks

useState（保存组件状态）

const [state,setState] = useState(inintialState)

示例： 

import { useState } from 'react';

function App() {
  const [name, setName] = useState('张三')
  const [text, setText] = useState('')
  const [list, setList] = useState([])
  const [age, setAge] = useState(88)

  function addList() {
    setList([...list, text])
    setText('')
  }
  function handleChange(e) {
    setText(e.target.value)
  }
  function handleDelete(index) {
    console.log(index);
    let arr = [...list]
    arr.splice(index, 1)
    console.log(arr);
    setList(arr)
  }
  return (
    <div className="App">
      app-{name}
      app-{age}
      <button onClick={() => { setName('李四'); setAge(100) }}>改名</button>
      <div>
        <input onChange={e => handleChange(e)} value={text} />
        <button onClick={() => { addList() }}>添加</button>
      </div>
      <ul>{
        list.map((el, index) => {
          return <li key={index}>{el}<button onClick={() => handleDelete(index)}>删除</button></li>
        })
      }</ul>
      {!list.length && <div>暂无事项</div>}
    </div>
  );
}

export default App;

useEffect（处理副作用）和useLayoutEffect（同步执行副作用）

第二个参数为空数组时，此函数只执行一次，相当于 componentDidMount 生命周期函数

import { useState,useEffect } from 'react';

function App() {
  const [list, setList] = useState([])
  useEffect(()=>{
    setList([11])
  },[])
  return (
    <div className="App">
      <ul>{
        list.map((el, index) => {
          return <li key={index}>{el}</li>
        })
      }</ul>
    </div>
  );
}

export default App;

第二个参数传入参数时，此函数会监听该参数的变化，且再次执行该函数，相当于 componentDidUpdate 生命周期函数

import { useState,useEffect } from 'react';

function App(props) {
  const [name, setName] = useState("apple")
  useEffect(()=>{
    setName(name.toUpperCase())
  },[name])
  return (
    <div className="App">
      app-{name}
      <button onClick={()=>{
        setName('orange')
      }}>修改</button>
    </div>
  );
}

export default App;

在useEffect函数内部返回一个函数，在这个函数内里写的逻辑就等同于写在生命周期componentWillUnMount

import { useState,useEffect } from 'react';

function App(props) {
  const [name, setName] = useState("apple")
  useEffect(()=>{
    setName(name.toUpperCase())
    return ()=>{
      console.log('componentWillUnMount')
    }
  },[name])
  return (
    <div className="App">
      app-{name}
      <button onClick={()=>{
        setName('orange')
      }}>修改</button>
    </div>
  );
}

export default App;

useEffect和useLayoutEffect用法基本一致，唯一不同点就是调用时机不同，useLayoutEffect和原来 componentDidMount componentDidUpdate一致，react完成dom后马上同步调用的代码，会阻塞页面渲染，useEffect会再页面渲染完成后才调用。

useCallback（记忆函数）

防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数发生变化了，才重新声明一次。（因为每次调用useState中的set函数就会触发组件渲染）

在函数内用到的所有变量，需要写在第二个参数数组中，可以监听到变化渲染师重新生成新的函数，如果不写，那么永远都是不会重新生成新的函数，并且使用到的变量值都是旧的，不会更新。

import { useState, useEffect, useCallback } from 'react';

function App() {
  let [name, setname] = useState(0)
  const handleChange = useCallback(() => {
    setname(name + 1);
  }, [name])
  return (
    <div className="App">
      app-{name}
      <button onClick={() => {
        handleChange()
      }}>add</button>
    </div>
  );
}

export default App;

useMemo记忆组件

useCallback的功能完全可以由useMemo所取代，如果你想通过使用useMemo返回一个记忆函数也是完全可以的。

useCallback(fn,inputs)
useMemo(()=>fn,inputs)

唯一区别是：useCallback不会执行第一个参数函数，而是将它返回给你，而useMemo会执行第一个函数并且将函数执行结果返回给你。

所以useCallback常用于记忆事件函数，生成级以后得事件传给子组件使用；而useMemo更适合经过函数计算得到一个确定的值，比如记忆组件。类似于vue中的computed计算属性

import { useState, useEffect, useCallback, useMemo } from 'react';

function App() {
  let [name, setname] = useState(0)
  const name2 = useMemo(() => name+1000, [name])
  const handleChange = useCallback(() => {
    setname(name + 1);
  }, [name])
  return (
    <div className="App">
      app-{name}
      <p>{name2}</p>
      <button onClick={() => {
        handleChange()
      }}>add</button>
    </div>
  );
}

export default App;

useRef（保存引用值）

1.能够用来定位元素或者组件

2.能够存储变量

import { useRef, useState } from 'react';

function App() {
  let [count,setCount] = useState(0)
  const myName = useRef()
  const myCount = useRef(0)
  return (
    <div className="App">
      app
      <input ref={myName}/>
      <p>{myCount.current}</p>
      <button onClick={()=>{
        console.log(myName.current.value)
        myName.current.value = null
        setCount(count+1) //会触发重新渲染
        myCount.current++
      }}>清空</button>
    </div>
  );
}

export default App;

useContext（减少组件层级）

import React,{useContext, useState, createContext} from 'react';

const CountContext = createContext();//创建Context对象
const TestContext = () =>{
    const [count, setCount] = useState(0);
    console.log(CountContext);
    console.log(useContext(CountContext));
    return(
      <div>
          <p>父组件点击次数：{count}</p>
          <button type={"primary"} onClick={()=>setCount(count+1)}>点击+1</button>
          <CountContext.Provider value={count}>
            <Counter/>
          </CountContext.Provider>
      </div>
  )
};
 
const Counter = () => {
    const count = useContext(CountContext);
    console.log(CountContext);
    // console.log(count);
    // console.log(useContext(CountContext));
    return (
        <div>
            <p>子组件获得的点击数量：{count}</p>
        </div>
    );
};
 
export default TestContext;

useReducer

redux的钩子函数，状态数据管理，可以在APP.js中定义一次，在其他组件中传入state, dispatch，进行调用

import { useReducer } from 'react';
//处理函数
const reducer = (preState, action) => {
  let newState = {...preState}

  switch (action.type) {
    case 'add':
      newState.count++
      return newState
    case 'minus':
      newState.count--
      return newState
    default:
      return preState
  }
}

const initialState = {
  count: 0
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <div className="App">
      <button onClick={() => {
        dispatch({
          type: 'minus'
        })
      }
      }>-</button>
      {state.count}
      <button onClick={() => {
        dispatch({
          type: 'add'
        })
      }

      }>+</button>

    </div>
  );
}

export default App;

可搭配useContext使用

import { useReducer, createContext, useContext } from 'react';
//处理函数
const reducer = (preState, action) => {
  let newState = { ...preState }

  switch (action.type) {
    case 'add':
      newState.count++
      return newState
    case 'minus':
      newState.count--
      return newState
    default:
      return preState
  }
}

const initialState = {
  count: 0
}
const CountContext = createContext()

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <CountContext.Provider value={{state,dispatch}}>
      <div className="App">
        <Child1 />
        <Child2 />
      </div>
    </CountContext.Provider>
  );
}

function Child1() {
  const obj = useContext(CountContext)
  return <div>child1-{obj.state.count}
  <button onClick={()=>{
    obj.dispatch({
      type:'minus'
    })
  }}>-</button></div>
}
function Child2() {
  const obj = useContext(CountContext)

  return <div>
  child1-{obj.state.count}
  <button onClick={()=>{
    obj.dispatch({
      type:'add'
    })
  }}>+</button>
  </div>
}
export default App;

  useId

useId 是一个 React Hook，可以生成传递给无障碍属性的唯一 ID。

const id = useId()

 自定义hooks

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中

必须以 use 开头，如不遵循，由于无法判断某个函数是否包含对其内部hook的调用，React将无法自动检查你的hook是否违反了hook规则，与vue3中自定义组合式api用法相同。

import { useState,useEffect } from 'react';

function useList(){
  const [list, setList] = useState([])
  useEffect(()=>{
    setList([11])
  },[])
  return{
    list
  }
}
function App() {
  const {list} = useList()
  return (
    <div className="App">
      <ul>{
        list.map((el, index) => {
          return <li key={index}>{el}</li>
        })
      }</ul>
    </div>
  );
}

export default App;

参考文档：内置 React Hook – React 

Goat恶霸詹姆斯
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
浅析React Hooks原理
weixin_50964668的博客
08-22 2504
React Hooks 简介 React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。 践行代数效应 React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React
React Hooks 实战案例
程序边界
10-29 5634
在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。useState：在函数组件中添加状态，相当于在类组件中使用 this.state。
react hooks
weixin_41269811的博客
10-10 471
一、react hooks的作用 react hooks 是react 16.8的功能，对函数型组件进行增强，让函数组件可以存储状态，可以拥有处理副作用的能力。让开发者在不使用类组件的情况下，实现相同的功能。 二、react hook要解决的问题 react hooks的产生是为了解决react 类组件的不足，react 类组件的不足主要表现在以下方面： 缺少逻辑复用机制：react 类组件中，为了实现逻辑复用机制，通常使用的是高阶组件和渲染属性，为了实现逻辑复用，增加了无实际渲染效果的组件，增加了
React Hooks详解
YuLong的博客
11-02 2万+
文章目录React HooksHooks简介Hook函数（9种）自定义Hooks React Hooks Hooks简介 介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。 但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没
【一天时间|React Hooks】在 React 项目中全量使用 Hooks
热门推荐
江拥羡橙的博客
10-10 8万+
此篇文章整理了在 React 项目开发中常用的一些 Hooks使用Hooks能为开发提升不少效率，但并不代表就要抛弃，依旧还有很多场景我们还得用到它，比如需要封装一个公共的可继承的组件，当然通过自定义 hooks 也能将一些共用的逻辑进行封装，以便再多个组件内共用。下期更新在React 中自定义 Hooks 的应用场景，主要讲一些 Hooks 的高阶应用。
React hooks
amuist_ting的博客
04-29 644
hoos规则： hooks通常放在组件顶部 hooks不能写在if语句里面 1.useState(initState) 用于为函数组件引入状态state 可接受状态的初始值作为参数 返回一个数组，数组的第一个成员是一个变量，指向状态的当前值；数组的第二个成员是一个函数，用来更新状态； 注意点： setState() 不一定是同步的，为了提升性能，React会批量执行state更新和DOM渲染 setState() 并不会立即改变state，而是创建一个即将处理的state 不要依赖s
React Hooks的使用
Han_Zhou_Z的博客
03-28 926
一、React Hooks的使用 1、React的组件 React的组件创建方式，一种是类组件，一种是纯函数组件 （1）类组件：class 类名 extends React.Component{} （2）函数组件：function 函数名([参数]){} 2、函数组件和类组件的区别 （1）函数组件没有状态(state)，类组件有 （2）函数组件没有生命周期,类组件有(挂载、更新、销毁) （3）函数组件没有this，类组件有 注意：函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件
React Hooks 分享
Alice_czy的博客
04-26 938
一文搞懂什么是 React Hooks
react hooks 事件监听
weixin_39999684的博客
06-24 8644
react hooks 事件监听说明useEffectuseEffect执行一次useEffect绑定和解绑事件问题：变量和state值不变且是初始值监听事件解决方法1解决方法2 说明 dom监听事件的绑定和解绑只执行一次。在react hooks中实现，需要使用useEffect。 useEffect 简单了解下useEffect是做什么的？React 组件在渲染后执行某些操作（ DOM 更新之后调用useEffect的第一个参数函数），还有默认情况下，它在第一次渲染之后和每次更新之后都会执行。 useE
React Hooks 使用一次调用的函数侦听鼠标按下或抬起并单击事件
06-08
使用-mouse-action React Hooks 使用一次调用的函数来侦听鼠标按下或抬起以及单击事件。 示例 此钩子可用于创建快速可用的下拉按钮。 安装 npm install use-mouse-action Usage import useMouseAction from 'use-...
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react...react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
react hooks ppt
10-08
react hooks
React Hooks with Immer 中的简单不变性。
06-08
React Immer Hooks 在带有 Immer 的 React Hooks 中轻松实现不变性。注意：React Hooks 目前是一个 RFC 提案，可能会发生变化。您至少需要 [email protected] 才能使用此功能。安装 yarn add react-immer-hooks 用法...
react-hooks-mobx:React Hooks + MobX指南
05-14
React Hooks + Mobx指南 链接到示例： : 链接到详细指南： : 建立统计 File sizes after gzip: 54.13 KB build\static\js\2.f209cf74.chunk.js 1.46 KB build\static\js\main.2336ad02.chunk.js 779 B build\...
golang websocket 发送消息莫名其妙断开的问题记录
qq_38189542的博客
05-20 166
公司需要做个B/S架构的前端展示项目，当前以为是小case，但是在实现后端功能的时候，还是被坑了。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 932
Nodejs util file getpost web express child_process mogodb
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 233
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
js知识点汇总之let const 和 var的区别
最新发布
fyw1789的博客
05-23 1066
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Goat恶霸詹姆斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值