React Hooks

最新推荐文章于 2023-06-25 09:34:16 发布
最新推荐文章于 2023-06-25 09:34:16 发布
阅读量60 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44718039/article/details/125287311
版权

类组件使用生命周期来完成业务逻辑，而函数式组件使用react hooks来完成业务逻辑。

常见的react hooks：

① const [state1,setState1]=useState (initVal)

状态管理，不能使用if语句

② useEffect（func，[ 依赖 ] ） 一般用于网络请求

[ ]里面是依赖，只有当依赖改变时，才会触发回调函数

当依赖是空数组时，表示一旦有更新，就触发执行回调函数

③ useReducer (reducer，initState )   

 可以代替useState，同时跟redux很类似（复杂状态管理使用redux，简单状态管理可以用useReducer）

④useContext跨级组件通信（祖孙组件通信）

如果使用props从父组件一级一级传给孙子组件，那么中间的组件虽然不需要这些数据，也得接收他们，这是不必要的！这时可以使用useContext实现跨组件传递

④自定义Hooks

必须以use开头

用来封装一个被好几个组件使用的一段逻辑

⑤useRef  组件引用 ，可以拿到dom节点的引用

跨组件使用dom，要用forwordRef封装

⑥两个性能优化的钩子函数useCallback和useMemo（不常用）

淡颜Amo~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
forwardRef 的详解及使用
在路上`的博客
07-01 1万+
React.forwardRef 的使用
React forwardRef相关总结
假想国
03-11 8487
React forwardRef相关总结 一句话概括：React 使用 forwardRef 完成 ref 的转发。 一、React forwardRef 简介 没有使用forwardRef时，父组件传入子组件ref属性，此时ref指向的是子组件本身。如下所示： class Child extends React.Component { render() { return ( <div> <button>点我</button>
【React】forwardRef 用法
最新发布
qq_45677671的博客
06-25 2207
react 中 forwardRef 使用方法及案例
React forwardRef的使用方法
weixin_44240581的博客
06-12 6937
作用与注意点 父组件创建一个ref对象，绑定给子组件中的Dom元素或class组件 forwardRef只能包裹函数组件，类组件不能用 函数组件是没有实例的 父组件获取子组件中Dom元素实例 import React, { useRef } from 'react'; import Content from './content'; const Home = () => { // 创建一个Ref对象 const connectRef = useRef(null); const h
React操作DOM之forwardRef详解
热门推荐
weixin_45389051的博客
07-02 1万+
React操作DOM有几种方式，传入字符串，传入一个对象(react推荐的方式)，传入一个函数，今天就讲一下使用react封装过的高阶组件forwardRef来操作DOM 首先导入 import React, { PureComponent,createRef,forwardRef } from 'react' 然后const一个函数组件，将它作为App的子组件 const Profile = forwardRef(function (props,ref){ return <h2 ref={re
React Hooks 使用一次调用的函数侦听鼠标按下或抬起并单击事件
06-08
使用-mouse-action React Hooks 使用一次调用的函数来侦听鼠标按下或抬起以及单击事件。 示例 此钩子可用于创建快速可用的下拉按钮。 安装 npm install use-mouse-action Usage import useMouseAction from 'use-...
react-hooks-axios:自定义React Hooks for Axios.js
04-28
react-hooks-axios 自定义React Hooks for Axios.js安装注意：确保已安装正确版本的react(>= v16.8.0)和react-dom(>= v16.8.0) 。npm npm install --save @use-hooks/axios纱yarn add @use-hooks/axios原料药参量/**...
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 用法...
forwardRef的使用
x1037490413的博客
03-09 9739
一 普通用法： import React, { Component } from 'react' export default class App extends Component { mytext=null render() { return ( <div> <button type="button" onClick={()=>{ console.log(this.mytext); this..
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3957
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
forwardRef解决封装组件无法传递ref的问题
zhangqling的博客
08-17 4773
前言：有时候我们封装一个组件，组件中需要使用父级传进来ref属性，来做一些事情，然而，简单通过props.ref是无法获取传递过来的ref属性的，怎么办呢？组件中又使用hoc进行了包裹，这时候传递ref作为属性传值能传递过来吗？ 场景重现： import { useRef, useState } from "react"; const MyInput = (props) => { console.log(props.ref, 'ref') // undefined return ( &
React之ref详细用法
weixin_33939380的博客
03-12 1105
在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是re...
React ref、forwardRef 和useRef的学习
未来可期
03-11 2944
关于ref 组件内使用ref，获取dom元素 class Test extends Component { constructor(props) { super(props); this.state = { myDiv:createRef() } } componentDidMount(){ console.log("this.myDi...
3.0 react ref 使用 读取子组数据 转发forword
weixin_45271385的博客
11-19 196
1 定义 实例 类中： this.r1 = React.createRef();//实例一个ref , 包含current属性 渲染完以后可以用 this.xx.current 来获取dom 回调 类=>render=>定义并放入子组件=》 <Child ref={dom=>this.xx=dom}></Child> 在 componentDidMo...
React16.3中的Refs和Forwarding Refs
liwusen的博客
04-19 1万+
简要介绍：React16.3中修改了Refs的使用方法，并且提供了Forwarding Refs用于在父组件中操作子组件中的dom节点，本文介绍一下新的Refs表示方法以及Forwarding Refs。 Ref的功能就不具体说了，就是在父组件中直接操作子组件的方法，Ref的方式，使其脱离了props传值，然后更新子组件的标准方法。 1 . React16.3中的Refs （1）创建 16...
React中 ref的使用和转发forwardRef
qq_43750501的博客
07-21 1739
ref reference: 引用 1、场景：希望直接使用dom元素中的某个方法，或者希望直接使用自定义组件中的某个方法 ref作用于内置的html组件，得到的将是真实的dom对象 import React , {Component} from"react"; export default class MyRef extends Component { getFac= (e)=> { this.refs.input.focus() } render(){
细说react16新增forwardRef
weixin_34248023的博客
03-06 5501
react中forwardRef使用 先说一下ref 1.组件内使用ref，获取dom元素 import React,{Component} from 'react'; import ReactDOM,{render} from 'react-dom'; class Child extends Component{ constructor(){ super(); ...
react hooks
05-19
React Hooks 是 React 16.8 新增的功能，它可以让你在不编写 class 组件的情况下，使用 state 和其他 React 特性。React Hooks 是一些特殊的函数，它们可以让你在函数组件中“钩入” React 的状态和生命周期等特性。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值