React
文章平均质量分 73
React相关个人总结
无响应乱码元素
这个作者很懒,什么都没留下…
展开
-
React自定义hook之useAsync处理异步请求并实现自动执行回调函数
代码实现import { useCallback, useState } from "react";import { useMountedRef } from "./index";interface State<D> { error: Error | null; data: D | null; stat: "idle" | "loading" | "error" | "success";}const defaultInitialState: State<null&原创 2022-05-18 17:40:42 · 1763 阅读 · 0 评论 -
React自定义hook之useMountedRef返回组件的挂载状态
前置知识useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。代码实现// 返回组件的挂载状态,如果还没挂载或者已经卸载,返回false;反之,返回trueexport const useMountedRef = () => { const mountedRef = useRef(fa原创 2022-05-18 16:55:47 · 723 阅读 · 0 评论 -
React中利用Error Boundaries实现错误捕捉
部分 UI 的 JavaScript 错误不应该导致整个应用崩溃,为了解决这个问题,React 16 引入了一个新的概念 —— 错误边界。Error Boundaries介绍错误边界是一种 React 组件,这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误错误边界无法捕获以下场景中产生的错误:事件处理异步代码(例如 se.原创 2022-05-18 09:01:20 · 339 阅读 · 0 评论 -
聊聊React类组件中的setState()的同步异步(附面试题)
一.setState()更新状态的两种写法setState(updater, [callback]),updater为返回stateChange对象的函数: (state, props) => stateChange接收的state和props被保证为最新的setState(stateChange, [callback])stateChange为对象,callback是可选的回调函数, 在状态更新且界面更新后才执行总结:对象方式是函数方式的简写方式如果新状态不依赖于原状态 ===&原创 2022-02-08 20:24:21 · 468 阅读 · 0 评论 -
React实现的github搜索小案例
效果代码index.js//引入react核心库import React from "react";//引入ReactDOMimport ReactDOM from "react-dom";//引入Appimport App from "./App";ReactDOM.render(<App />, document.getElementById("root"));App.jsximport React, { Component } ...原创 2021-12-18 23:41:50 · 518 阅读 · 0 评论 -
详解React组件生命周期
前言最近一直在学vue和nodejs,想着React这块儿也不能太久不用忘记了,写篇博客来解决一下我当时初学React时的痛点,生命周期。对于生命周期的理解组件从创建到死亡它会经历一些特定的阶段。 React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。生命周期的三个状态Mounting(挂载):已插入真实 DOM Updating(更新):正在被重新渲染 Unmounting(卸载):已移出真实原创 2021-12-18 18:03:29 · 437 阅读 · 0 评论 -
DvaJS入门解析
最近找了个RN+TS仿喜马拉雅的项目,看到dva那几节蚌埠住了,然后就去找了个网课看看,写篇博客总结一下一.什么是Dvadva = React-Router + Redux + Redux-saga二.安装1.安装 dva-clinpm install dva-cli -g2.扎到安装项目的目录cd ylz_project/my_reactdemo3.创建项目:Dva-test项目名dva new Dva-test4.进入项目cd Dva-test5.启动项目npm ..原创 2021-12-05 23:58:40 · 2418 阅读 · 2 评论 -
react-redux入门教程
最近这段时间在重新回顾上个暑假学的内容,很多内容因为用的比较少就给忘掉了,想着就谢谢博客帮助自己复习一下。React-Redux的起源React实际上只是UI框架,通过JSX生成动态 dom 渲染 UI,没有架构、没有模板、没有设计模式、没有路由、也没有数据管理。如果要做大型应用就要搭配视图层框架redux一起使用。因为搞React用Redux的人很多,为了方便使用,Redux 的作者封装了一个 React 专用的库React-ReduxUI组件React-Redux 将所有组件分成两...原创 2021-12-01 08:57:52 · 259 阅读 · 0 评论 -
Redux初学者入门解析
什么是ReduxRedux是一个流行的JavaScript框架,为应用程序提供一个可预测的状态容器。Redux基于简化版本的Flux框架,Flux是Facebook开发的一个框架。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。其工作流程如下图在Redux中,所有的数据(比如state)被保存在一个被称为store的容器中 (在一个应用程序中只能有一个)。store本质上是一个状态树,保存了所有对象的状态。任何UI组件都可以直接从sto原创 2021-11-29 16:06:17 · 203 阅读 · 0 评论 -
React的三大属性之refs的一些简单理解
什么是refs?Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Ref转发是一项将ref自动通过组件传递到子组件的技巧。 通常用来获取DOM节点或者React元素实例的工具。在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React元素。refs的使用场景在某些情况下,我们需要在典型数据流之外强制修改子组件,被修改的子组件可能是一个 React 组件的实例,也可能是一个 DOM 元素,例如.原创 2021-09-15 00:45:21 · 1152 阅读 · 0 评论 -
React 三大属性之一 props的一些简单理解
什么是props?官网上是这么解释的:When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.意思为:当React看到表示用户定义组件的元素时,它会将JSX属性作为单个对象传递给此组件。我们称这个对象为“props。顾名思义,pr原创 2021-09-14 14:58:38 · 1017 阅读 · 0 评论 -
React三大属性之一 state的一些简单的理解
什么是stateReact 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。组件的任何UI改变,都可以从State的变化中反映出来;State中的所有状态都用于反映UI的变化,不应有多余状态。state来自内部状态,是组件对象最重要的属性,其值是对象,可以包含多个数据 可以通过更新组件的state来更新对应的页面显示(重新进行组件渲染),不必操作DOM 当页面发生变化时,用state来记录页面变化什么样的变量..原创 2021-09-13 21:01:43 · 852 阅读 · 0 评论 -
React官网入门项目井字棋游戏
React官网里有很详细的教程 ,也有在线沙盒,但是写的东一榔头西一棒槌的,不适合新手入门,所以我还是建议大家可以先去看看阮一峰大神的React博客或者某硅谷的网课,这个网课讲的很详细,甚至详细到有些啰嗦,我大概是用20天把网课看完,然后再看的官方文档,把这个小游戏做一下,我这里是采用在本地完成这个项目。游戏预览:准备工作:确保你安装了较新版本的Node.js。 按照Create React App 安装指南创建一个新的项目npx create-re...原创 2021-09-13 16:49:22 · 611 阅读 · 0 评论 -
react笔记
一. React入门1.1 React简介1.1.1 官网1.英文官网: https://reactjs.org/2.中文官网: https://react.docschina.org/1.1.2 介绍描述1.用于动态构建用户界面的 JavaScript 库(只关注于视图)2.由Facebook开源1.1.3 React的特点1.声明式编码2.组件化编码3.React Native 编写原生应用4.高效(优秀的Diffing算法)1.1.4 React高效的原因1.使用虚拟(vi原创 2021-09-12 20:26:39 · 449 阅读 · 0 评论