一起养成写作习惯！这是我参与「日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。 一、概述 本文将采用React Hooks的方式来实现一个滚动加载的组件。 支持功能如下 1. 支持传入子
原创
2022-04-12 10:01:45
1726阅读
import { useState } from "react" /** * 使用表单 * @param props */ export default function useForm(initialState: any) { const [state, setState] = useState( ...
转载
2021-10-19 14:51:00
287阅读
2评论
一起养成写作习惯！这是我参与「日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。 一、概述 本文将采用React Hooks的方式来实现一个验证码的组件。 项目文档地址：rc-codebo
原创
2022-04-12 10:01:37
333阅读
React Hook讲解Hook的介绍为什么要用Hook？基础Hook API`useState` ：定义 state 变量和更新变量函数`useEffect` ：页面渲染后，会触发内部函数的副作用`useContext` ：获取上级的 context 对象的值额外的Hook API`useReducer` ： useState 的代替方案`useCallback` ： 回调函数记忆化`useM
转载
2023-11-25 12:59:40
107阅读
首先要知道react组件在什么情况下会刷新，比如：state、props、context更新。。。。然后就有各种方式可以强行刷新组件了，比如： const [refresh, setRefresh] = useState(false); useEffect(() => { refresh && se ...
转载
2021-09-08 16:34:00
6954阅读
2评论
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。React 提供了两种方法来访问input字段的值:使用受控或非受控组件。我更喜欢受控组件，因为我们可以通过组件的状态读取和设置input的值。在这篇文章中，我们来看看如何使用React Hook 实现受控组件。1.受控组件假设我们有一个简单的文本字段，并且想访问其值：import {
转载
2021-03-23 17:45:21
1009阅读
2评论
需求描述由于我所在的业务是资讯内容类业务，因而在业务中会经常碰到如下场景：有一个内容列表，列表中需要按照一定的规则插入广告。除了获取广告数据，广告展现和点击后需要有打点上报逻辑。正常来说我们会这么写：import React from 'react';export default class extends React.Component { state = {newsData: [], adD
原创
2021-05-18 17:44:26
1417阅读
React Hook的基本使用Hook 是什么？ 在中文官网中是这么介绍的：Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。什么时候我会用 Hook？如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hoo
转载
2024-02-27 20:16:35
78阅读
React Hooks 自定义封装是 React 开发中的重要技巧，它可以帮助我们抽离复用逻辑，让组件代码更加简洁。下面我将介绍自定义 Hooks 的基本概念和几个实用的示例。自定义 Hooks 的特点命名必须以 use 开头，这是 React 的约定可以调用其他 Hooks（内置或自定义）用于封装可复用的状态逻辑每次调用自定义 Hook 都会创建独立的状态实用自定义 Hook
Hooks一.Hook简介Hook是React 16.8新增的特性.它可以让你在不编写class的情况下使用state以及生命周期等特性 之前了解到组件有class(类)组件,和函数(无状态)组件,class组件中有自己的生命周期和自己的状态,而函数组件是一个无状态组件,Hook的出现正式为了解决这个问题,Hooks可以让函数式组件可以拥有state,生命周期等特性二.为什么要使用HookHook
转载
2024-02-21 13:55:41
33阅读
1.获取元素的3种方式方式1：ref = { x => refName = x} 函数组件中没有this，直接给了一个变量。(可以用但是不推荐)方式2 React.createRef()方式3 useRef(null)2.函数组件用useRef，类组件用React.createRefimport React, { useState, useEffect, useRef } from "rea
原创
2023-07-02 11:53:39
236阅读
1.hooks组件本质是函数组件2.useState①基础用法import React, { useState } from "react";
import { Button } from 'antd';
/*
useState：React Hook函数之一，目的是在函数组件中使用状态，并且后期基于状态的修改，可以让组件更新
let [num,setNum] = useState(init
原创
精选
2023-06-29 19:55:14
279阅读
1.useEffectimport React, { useState, useEffect } from "react";
import { Button } from 'antd';
import './Demo.less';
/*
useEffect：在函数组件中，使用生命周期函数
useEffect(callback)：没设置依赖
+ 第一次渲染完毕后，执行callba
原创
精选
2023-06-30 20:11:38
328阅读
编者按：本文作者奇舞团前端开发工程师李喆明。
转载
2022-11-29 10:30:34
92阅读
目录前言导语父子组件调用父组件第一步第二步子组件 数据演示功能要点 1 演示效果 功能要点2 演示效果 功能要点3 演示结果总结父子组件调用首先我们看一下父子组件的一个调用父组件第一步import ButtonGroup from './Common/ButtonGroup/index.js';第二步<ButtonGroup bu
转载
2023-11-30 15:48:57
0阅读
1、react组件封装封装组件分三类：封装普通展示类组件 通过函数组件实现，不带生命周期，不带state封装纯逻辑类组件 通过组件的生命周期来做判断，给传入的组件加上一些附加属性或逻辑操作或props封装通用业务组件 上述两种组合，组件本身可完成独立的通用业务。可组合、可维护、可重用 一个设计良好的组件应该有什么特性？ 高内聚低耦合 在封装一组组件时候应该思考什么？ 组件应该是做什么的 组件至少应
转载
2023-11-07 06:40:30
119阅读
React笔记(五)1.组件化React应用采用基于组件的架构方式，也就是说可以将一个复杂的页面分解成一个个较简单的组件来实现。但组件在开发时，常常会遇到一些问题，比如为单一组件赋予了过多的指责。这在项目上是可行的，但如果需要修改现有功能，或者创建新功能，就大大增加了工作量。export default class Demoe extends Component {
state={
c
转载
2023-11-27 15:10:29
71阅读
RN 与native 的交互0>>> React 的渲染機制1>>> react-native 渲染原理 2>>> react-native 如何与原生通信3>>> 如何封装一个原生视图组件4>>> react-native 的线程管理 RN的本质是利用 js 调用 native 端的组件
原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。此篇文章对编写可重用和可维护的React组件非常有帮助。但因为篇幅实在太长，我对文章进行了分割，本篇文章重点阐述 封装。因本人水平有限，文中部分翻译可能不够准确，如果您有更好的想法，欢迎在评论区指出。———————————————我是一条分割线————————————————封装一个封装组件提供 props 控制其行为而不是暴露其内部结
转载
2024-03-12 16:23:28
51阅读
1、ImgViewer/index.tsx import React from 'react' import Viewer from 'react-viewer' interface ImgViewerProps { visible: boolean // 是否显示viewer images: Ar
原创
2022-03-11 15:39:15
648阅读
