React
关注
分享
扫一扫
文章平均质量分 63
淘淘是只狗
努力码代码，给我的淘淘挣狗粮
展开
-
React Hooks 详解（2022的第一篇文章，献给 React Hooks）
什么是 React Hooks，React 一直提倡使用函数组件，但是有一些功能只有类组件具备，比如函数组件没有实例，没有生命周期函数，而 React 16.8 提出的 Hooks 概念可以在不编写 Class 的情况下，使用 React 特性。凡是 use 开头的 React API 都是 Hooks。Hooks 解决的问题：类组件的状态逻辑难复用，层级冗余，复杂难以维护。比如在 componenDidMount中注册的事件或者其他逻辑，需要在componentWillUnmount 中卸载，编..原创 2022-01-02 10:09:19 · 3672 阅读 · 0 评论 -
React 动效 Framer motion，给你的页面添加一点动感
Framer motion的核心API是motion的组件。每个HTML和SVG标签都有对应的motion组件。他们渲染的结果与对应的原生组件完全一致，并在其之上增加了一些动画和手势相关的props。比如：<motion.div /><motion.span /><motion.h1 /><motion.svg />使用与平常的插件相差无几。npm install framer-motion当然，这里还是有一点不一样的，如果直接在页面中.原创 2021-11-27 14:54:35 · 3626 阅读 · 0 评论 -
Vue 和 React 的对比
React 和 Vue 有许多相似之处：使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。运行时性能React在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时.原创 2021-11-08 08:03:39 · 934 阅读 · 0 评论 -
React 中 setState 的异步操作
在使用state的时候， 如果我们企图直接修改state中的某一个值之后直接打印（使用）他，就会发现，他其实并没有改变。就像下面的例子，企图通过点击事件之后就使用修改之后的state的值，但是会发state中的并没有被立即修改，还是原先的值，我们都知道那是因为 setState就相当于是一个异步操作，不能立即被修改。import React, { Component } from 'react';export default class App extends Component { con.原创 2021-10-07 15:29:39 · 2142 阅读 · 0 评论 -
useEffect 中 return 函数的作用和执行时机
官网的代码import React, { useState, useEffect } from 'react';function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } Chat原创 2021-10-06 22:15:09 · 21481 阅读 · 0 评论 -
React 热区组件
基本的热区实现<html><body> <img src="https://cdn.pixabay.com/photo/2021/07/16/18/28/czech-republic-6471576__480.jpg" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="rect" coords="0,0,原创 2021-08-06 19:16:01 · 1558 阅读 · 0 评论 -
你或许没有不知道的那些 React 事件的知识点
首先我们来看一段很简单的 react 代码import React from 'react'class EventDemo extends React.Component { render() { return <a href="https://baidu.com/" onClick={this.clickHandler}> click me </a> } // 获取 event clickHandler = (event) =&g原创 2021-08-04 23:44:34 · 195 阅读 · 1 评论 -
15行代码实现 React-router-dom 中的 Link 组件
import React from 'react'import { useHistory } from "react-router-dom"interface LinkProps { to: string;}export const AsLink: React.FC<LinkProps> = ({ children, to }) => { const history = useHistory() return ( <a href={to} onClic原创 2021-07-19 07:32:53 · 280 阅读 · 0 评论 -
React + Redux：论如何将 JS 项目改为 TS 项目
以计数器为例使用命令搭好项目之后，安装 redux，react-redux 即可。index.js 页面中创建 storeimport React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import { Provider } from 'react-redux'import { createStore } from 'redux'import {原创 2021-07-10 15:39:33 · 1694 阅读 · 0 评论 -
原生 JavaScript + Vue + React 三种方案实现放大镜效果
电商类的网站为了让顾客更加清晰的看见商品图片，一般会提供放大镜效果。今天我们就使用三种方法来实现一下这个效果说是三种，其实就一种，框架就是在原生的基础上适配一下语法我主要是为了方便使用框架的同学啥？为啥没有 angular，因为我不会不皮了，正文开始????????????????获取页面元素let smallImg = document.getElementById("smallImg");let smallDiv = document.getElementById("sma原创 2021-07-06 10:01:15 · 769 阅读 · 1 评论 -
React 组件的懒加载
1. 借助三方库 react-loadableLoadable 是一个高阶组件高阶组件（简单来说，就是把组件作为输入的组件。高阶函数就是把函数作为输入的函数。在 React 里，函数和组件有时是一回事import React from 'react';import Loadable from 'react-loadable';function Loading() { return <div>Loading.....</div>}const LoadableCom原创 2021-06-17 11:31:32 · 1484 阅读 · 0 评论 -
使用 Antd-UI 实现对表格的增删操作
Antd 是一个很优秀的组件库这篇文章使用 Antd 的 Model 组件和 Table 组件，实现对表格的增删操作。首先来看一个基本的 Table 组件import React from 'react'import { Table } from 'antd'// 数据源 ===> 一般都是从后端提供的接口中获取数据const dataSource = [ { key: '1', name: '胡彦斌', age: 32, address: '西湖区湖原创 2021-06-16 10:53:24 · 1553 阅读 · 0 评论 -
React 封装星星评分组件
实现的需求为传入对商品的评分数据，页面显示对应的星星个数。1. 准备三张对应不同评分的星星图片2. 期望实现的效果这样的调用<StarScore score={data.wm_poi_score}/>3. 对传入的数据进行处理我们需要得到评分的整数和小数部分let wm_poi_score = this.props.score || '';let score = wm_poi_score.toString();let scoreArray = score.split(原创 2021-06-13 16:03:13 · 769 阅读 · 2 评论 -
React 知识点小结
文章目录React1. React的优缺点优点缺点2. 虚拟 DOM2.1 什么是虚拟 DOM2.2 为什么要有虚拟 DOM3. DOM Diff 算法解析3.1 什么是 DOM Diff 算法3.2 不同节点类型的比较3.2.1 节点类型不同React的DOM Diff算法实际上只会对树进行逐层比较3.2.2 节点类型相同，但是属性不同列表节点的比较3. React 理念4. React 重新 render 之后5. 哪些方法会触发 React 重新渲染6. state 和 props 触发更新的生命周期原创 2021-03-20 21:30:01 · 354 阅读 · 0 评论 -
socket.io前后端联通，建立聊天室
node.js 提供了高效的服务端运行环境，但是由于浏览器端对HTML5的支持不一，为了兼容所有浏览器，提供卓越的实时的用户体验，并且为程序员提供客户端与服务端一致的编程体验，于是socket.io诞生。Socket.io将Websocket和轮询 （Polling）机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时机制的相应代码。Socket.IO 实现了实时双向的基于事件的通讯机制。旨在让各种浏览器与移动设备上实现实时app功能，模糊化各种传输机制。Socket.IO 是跨.原创 2021-02-20 13:22:10 · 661 阅读 · 0 评论 -
在 React17 中使用富文本编辑器 react-draft-wysiwyg
安装yarn add react-draft-wysiwygyarn add draftjs-to-html使用import React from 'react'import { Button, Card, Modal } from 'antd'import { Editor } from 'react-draft-wysiwyg'// 样式文件import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'// 转化为 html（根原创 2021-02-07 08:32:46 · 838 阅读 · 1 评论 -
React17 + 百度地图API 渲染地图组件
注册百度地图开发者账号，获取 AKReact 目录中 public 文件夹下的 index.html 文件<!DOCTYPE html><html lang="en"> <head> // ... <title>React App</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写自己原创 2021-02-06 19:53:27 · 327 阅读 · 0 评论 -
React 实现骨架屏组件
思路其实就是：当数据未返回的时候，渲染骨架屏组件，数据返回之后，渲染真正的组件| - skeletons | - OrderSkeletons | - index.js | - index.less | - index.jsindex.jsexport { default as OrderSkeletons } from './OrderSkeletons';index.jsimport React, { useState, useEffect } from原创 2021-01-29 11:16:56 · 1310 阅读 · 1 评论 -
初识Umi.JS
什么是Umi.js?Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。为什么使用Umi.js?我们做react开发的时候会不会遇到以下问题？：1.项目做大的时候，开发调试的启动和热更新时间会变得很长。2.大应用下，网站打开很慢，有没有办法基于路由做到按需加载。3.dva的model每次都要手写载入，.原创 2021-01-26 14:08:00 · 3345 阅读 · 1 评论 -
react17解决项目支持装饰器
先使用 npm run eject 暴露配置我尝试过很多方法，所以也不知道是那种方法起作用了，项目中解决这个问题的依赖如下这几个我并不知道是哪个起作用了。不过下面这两个一定要安装修改 babel 配置根目录下新建 config-overrides.jsconst { override, addDecoratorsLegacy, disableEsLint, addBundleVisualizer, addWebpackAlias, adjustWorkbox} =原创 2021-01-20 14:42:20 · 338 阅读 · 0 评论 -
react组件获取不到路由信息
添加如下的代码import { withRouter } from "react-router-dom"// .....export default withRouter(AuthRoute)之前是使用 @withRouter 这样的装饰器，但是项目一直报错Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled网上百度了很久，没办法解决。后来就采用这个方法，效果是一样的import a原创 2021-01-20 10:00:09 · 1084 阅读 · 0 评论 -
HTML5 新特性drag API 实现图片拖拽功能（原生JS，Vue， React）
拖拽事件在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。 默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为true，这是HTML5规定的新属性，用于设置元素是否能被拖动。因此，图像、链接、文本的 draggable 属性默认为 true，.原创 2020-12-25 13:23:25 · 2868 阅读 · 0 评论 -
React入门学习小案例之番茄计时器与温度控制 App
首先搭建工程npx create-react-app demoname在 src 目录下新建 components ，新建一个 Timer.js，Timer.cssTimer.jsimport React, { Component } from "react";import './Timer.css';class Timer extends Component { constructor() { super(); // 初始化数据 this.state = {原创 2020-09-25 14:13:42 · 284 阅读 · 0 评论 -
react 基于antd 组件库实现图片墙
安装啥的就不说了。大家都会，直接上代码（图片存放路径：public 下新建一个 gallery 文件夹，名字以 1.png’, ‘2.png’, ‘3.png’, ‘4.png’，命名）import React from 'react'import { Card, Row, Col, Modal } from 'antd'export default class Gallery extends React.Component { state = { visible: false原创 2020-09-07 08:44:22 · 931 阅读 · 0 评论 -
react 项目配置 less 及 less 报错解决方案
构建命令npx create-react-app my-app暴露项目配置 npm run eject安装 less npm install less less-roader进入 config / webpack.config.js { test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({原创 2020-09-05 15:29:49 · 685 阅读 · 0 评论 -
入门 Redux
Redux is a predictable state container for JavaScript apps.Redux 是 JavaScript 状态容器，提供可预测化的状态管理。这是 redux 官网的原话我最早接触的框架是 Vue，这个图我自己觉得和 vuex 好像有一些相似的地方。我们今天就写一个TODOList 的小 demo ，来入门学习一下 redux(为了效果好看，使用 antd-ui 组件库)1. 初始化项目安装官方脚手架之后mkdir ReduxDemocd原创 2020-08-22 14:15:30 · 203 阅读 · 0 评论 -
小白入门学习 react 新特性 react-hooks
2018年底 FaceBook 的 React 小组推出 Hooks。React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。原来把组件分为有状态组件和无状态组件，有状态组件用类的形式声明，无状态组件用函数的形式声明。现在所有的组件都可以用函数来声明了。创建一个项目进行学习演示mkdir ReactHooksDemocd ReactHooksDemocreate-react-app demonpm start原创 2020-08-21 10:53:13 · 254 阅读 · 0 评论 -
chrome 安装 react-tools和redux-devtools
1. 访问这个 react-tools 的 github https://github.com/facebook/react-devtools/tree/v32. 下载安装包 （如果要 git bash 下载也可以），只要可以下载就行，解压之后，npm install ，安装依赖成功之后，运行，node build.js，build目录下的unpacked目录就是chrome中所需react-devtools的工具扩展程序包即可使用参考文章：https://www.cnblogs.com/Ewar原创 2020-08-12 14:56:47 · 293 阅读 · 0 评论 -
react + electron 使用 react-simplemde-editor 报错 Uncaught TypeError: string.split is not a function
Uncaught TypeError: string.split is not a function at splitLinesAuto (codemirror.js:681) at Doc.splitLines (codemirror.js:6461) at Doc.<anonymous> (codemirror.js:6115) at Doc.setValue (codemirror.js:3942) at EasyMDE.push../node_mo原创 2020-07-18 13:52:33 · 1165 阅读 · 0 评论 -
react 结合 electron创建桌面应用
node 12.15.0npx create-react-app cloud-docnpm install electron --save-devnpm install electron-is-dev --save-dev根目录下新建一个 main.js 文件const { app, BrowserWindow } = require('electron')const isDev = require('electron-is-dev')let mainWindow;app.on('read原创 2020-07-17 10:57:55 · 223 阅读 · 0 评论 -
react 基础开发遇到的 bug
1.使用 styled-components报错信息Failed to compile./src/style.jsAttempted import error: 'injectGlobal' is not exported from 'styled-components'.报错代码import { injectGlobal } from 'styled-components';injectGlobal` html, body, div, span, applet, object, ifr原创 2020-07-13 09:01:08 · 557 阅读 · 3 评论 -
使用 react 和 react-hooks 编写 TODOList
运行npx create-react-app todolist等待安装npm start开启3000端口修改目录index.js入口文件import React from 'react';import ReactDOM from 'react-dom';import TodoList from './TodoList.js';// import App from './App.js';ReactDOM.render( <React.StrictMode> .原创 2020-07-05 16:59:25 · 445 阅读 · 0 评论