秋来九月八

react vue js原生事件，默认都是以冒泡的形式触发。事件流总是以 先捕获 从根节点 —> 祖父节点 —> 节点本身后冒泡 节点本身 —> 祖父节点 —> 根节点所有的事件都是默认冒泡触发，在捕获阶段不会触发。如果将该事件设置为捕获，那么该事件则不会在冒泡阶段触发。vue代码<div @click = "divClick"> <a href="www.baidu.com" @click="linkClick"

前言react的组件分为两种，函数式组件和类式组件，函数式组件现在可以有自己的状态，通过useState hook的方式，但没有state，类式组件才有state。如果你想学习函数式组件如何管理自己的状态， 请前往 https://blog.youkuaiyun.com/glorydx/article/details/105676697class组件state状态初始化初始化state指的是组件挂载时，在没有用户交互的情况下，state保存的值。两种初始化state的方式开发中实际使用的一种方式impor

props的基本使用import React from 'react';/** 子组件 */class Person extends React.Component { render() { {/** 在this.props中接收来自父组件的参数 */} const { name, age, sex } = this.props return ( <ul> <li>姓

Dva” 是一个基于 Redux 和 Redux-saga 的状态管理框架，通常用于 React 应用程序。它帮助你更轻松地管理应用程序的状态、副作用和数据流。

这是一篇搭建react前端项目的详细教学，提供less、antd、ts等技术栈的环境搭建

在上述代码中，我们导入了 PDFViewer 和 PDFPage 组件，然后在组件中定义了一个 PDF 视图，使用 file 属性指定要加载的 PDF 文件。你可以调整 scale、pageNumber、width 和 height 等属性来自定义 PDF 图像的呈现方式。在你的 React 组件中，你可以导入 react-pdf 包，并使用 PDFViewer 和 PDFPage 组件来加载 PDF 文件并将其渲染为图片。

react使用art-template，我本来通过yarn安装到项目依赖中，结果发现webpack报错。所以直接引入js文件的方式引入art-template.jsimport React, { useEffect, useState } from 'react';import * as APIS from '../service';const Template = require('../template.js');const template = `<p>{{test}}&l

react框架下的一种颜色选择器组件，使用相对广泛。点击前往react-color 的github react-color使用方式1安装npm install react-color --save // 或cnpm install react-color --save // 或yarn add react-color --save2typescript声明如果你是使用typescript语言来编写代码，需要对react-color进行额外的声明。在根目录下的src中，创建一个types的

useEffect时reactHook中最重要，最常用的hook之一。useEffect相当于react中的什么生命周期呢？这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？

useCallback是react中比较重要的一个hook，用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。useCallback 还可以用于优化函数的性能。它的主要作用是缓存一个回调函数，以确保在组件重新渲染时不会创建新的回调函数，从而减少不必要的性能开销。useCallback 通常与 React.memo 或 shouldComponentUpdate 一起使用，以避免不必要的组件重新渲染。

大概分享一下两种常见情况下，使用useref。第一种，同一组件内部，通过useref来获取某一个dom标签以及dom标签的方法。在以前使用ref的时候，我们经常用ref来保存某个需要的dom标签，这样需要用到的时候，就可以不用去寻找这个dom标签了，在js中，通过方法，parentNode，lastchild，nextElementsibling 这种关系结构来找dom是一件比较麻烦的事情。如果不是动态类名或者id的话，通过document.getElementsByClassName 之类的方法，虽然

react项目通过react-umeditor使用富文本编辑器，官网github：https://github.com/liuhong1happy/react-umeditor安装npm install react-umeditor --saveyarn add react-umeditor使用import React from 'react';// 引入react-umeditorimport Editor from 'react-umeditor';//引入的自定义图片下载设置，在

react-cropperreact-crepper的github：https://github.com/react-cropper/react-cropper不想看官方文档的，就直接看如何使用吧。安装npm install --save react-cropper //或者yarn add react-cropper** 组件内使用**import React, { useRef } from 'react';/** 引入react-cropper */import Cropper

usestate的常规用法在react框架中，不适用类组件，使用函数式组件又想自定义数据维护业务开发的时候，就需要使用react提供的hook来完成。usestate就是最常见的一种hook。const [name,setName] = useState('dx');setName（'dx1'）中括号实际是一个解构运算，第一个name是设置的值，第二个setName是只能用来改变name...

react中想要使用多个className时，就会用到classnames这个库安装install i classnames --saveyarn add classnames --savevs code styles提示工具 可以安装 css modules clinyong.vscode-css-modules引用import classnames from 'classna...

defaultvalue 默认数据值。 value绑定在组件的数据值什么时候使用value？如果某些页面，只是用来作数据展示，用户不需要通过页面来操作改变value值时，可以使用value，而不使用defaultvalue，避免再使用disabled禁止用户操作数据录入组件。<Rate value={row.evaluate} allowHalf />什么时候用default...

第一步安装echarts和echarts-for-react使用yarn或者install安装都可以npm install --save echarts-for-react或者yarn add echarts-for-react --saveecharts-for-react依赖于echarts，可以自己选择安装一个版本的echartsnpm install --save echa...

第一种传参方式，动态路由传参通过设置link的path属性，进行路由的传参，当点击link标签的时候，会在上方的url地址中显示传递的整个url<Link to='/home?name=dx'>首页</Link>如果想真正获取到传递过来的参数，需要在对应的子组件中this.props.location.search 获取字符串，再手动解析因为传参能够被用户看见...

统一状态管理安装npm i react-redux --save文件的设置在react框架的src目录下，创建actions和reducers两个文件夹，以及store.js文件配置actions文件夹，创建actionTypes.js文件export const CHANGE_COUNT = 'CHANGE_COUNT';export const CHANGE_MSGLIST...

注意 ：react hook 是react新版本更新之后出现的内容，老版本不支持哪种情况需要使用hook呢？创建组件有两种方式，如果你不是class创建的组件而是function创建组件，你可能用得上function创建组件，结果组件需要有自定义数据，类似于class中的state，如果将function的组件改为class，就会显得很麻烦，这个时候，你就能用得上hook了hook具体怎么...

在vue中，我们常常在标签上使用v-html来，将现成的html代码嵌入到被绑定的标签中，react如何操作呢？类似于vue，react也有特殊的标签属性，用来代替v-htmldangerouslySetInnerHTML属性，该属性被赋值，只接受对象。import React from 'react';export default class dangderouslySet exten...

父组件通过在组件上绑定属性，向子组件传递参数，所有的类型基本上都可以传，函数，对象，数组，基本参数类型等只不过传递非字符串参数必须通过js所以得加{}标签里面的内容，可以在子组件中通过调用this.props.children得到绑定在标签上的参数，可以通过在子组件中调用this.props得到function App() { return ( <div> ...

通过直接给行内的标签绑定style属性，react规定style只能被赋值为一个对象function App() { return ( <div style={{color:'red',background:'yellow'}}>这是直接写在行内样式的文字</div> );}//看起来像是双{{}}语法，其实外面的{}表示开始写js语句，里面的{}表示...

如果需要路由嵌套，只需要在本身是路由的子组件中继续完成上面的步骤就可以了，举个例子，在about组件中海油许多子组件路由。安装react-router react-router-dom react-router-native。后面两个对第一有依赖，所以只用安装后面两个即可，会自动安装第一个依赖。每一个需要使用路由的组件，都应该根据需求进行导入。那就在about组件中完成以下代码。

当页面被打开，路由被激活，将会触发挂载挂载阶段constructor 创建一个组件的解构，在里面执行super(),创建组件私有数据this.state={}render 阶段，创建一个虚拟的dmo，在里面创建html代码，通过return返回创建的虚拟demo结构componentWillMount 组件即将挂载，这个基本没什么用，即将被废弃，不推荐使用componentDidMou...

大家都知道vue中有一个双向数据绑定，通过v-model来实现，通常用于input标签，但在react中，是没有这样一个机制的。开发者可以根据情况，自己手动进行双向数据绑定在react中模拟input的双向数据绑定import React from 'react'class Dx extends React.Component { constructor () { super() ...

在react项目中，关于class定义的组件，可以使用私有数据私有数据的定义方式如下import React from 'react'class Dx extends React.Component { constructor () { super() this.state = { work: '前端开发工程师' }//在this.state对象里面，保存组件的私有数据...

给标签绑定事件的第一种方式<button onClick={ function(){console.log('点击事件触发了了')}}> 触发点击 </button>添加类似onClick的属性，onMouseEnter,onMouseOver等等这些属性名必须按照小驼峰的方式命名，给标签绑定事件的第二种方式在组件里面定义一个函数，当触发点击事件的时候...

第一种：行内样式的写法1-----------------------------------------------------------------------------------在标签上绑定style属性，style={ } ，向{}里面存放一个对象，对象的内容就是样式的表达式<div style={{color: 'red',fontSize: '20px'}}>d...

一、在npm run eject前配置antd和less项目安装好后1. 首先安装antdnpm i antd --save2. 安装react-app-rewired 和 customize-cranpm i react-app-rewired customize-cra --save-dev3. 修改package.json配置文件/* package.json 原文件*/...

创建一个组件可以通过两种方式**第一种： ‘通过构造函数创建一个组件’**第一步：‘创建组件的文件必须引用react’,并且必须写成下面这行代码import React from 'react';第二步：‘导入组件的css样式’//引入组件的cssimport './App.css';第三步：创建一个构造函数，函数必须有返回值，通常情况下，这里面只能是html文件的内容，并且...

在react项目中，index.js文件是项目的主要js，这里是集成各个组件，全局css或者全局js的地方。在index.js中渲染一个元素节点第一种渲染少量的虚拟demo一丶引入react模块import React from 'react';import ReactDOM from 'react-dom';二丶创建一个虚拟domeconst mydiv = <div cl...