![](https://img-blog.csdnimg.cn/9dce0b2c74e040c78c200e93bf8ebd7e.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
前端react框架
Cupid510
这个作者很懒,什么都没留下…
展开
-
使用<a-select>时,placeholder不起作用,提示语不显示
当绑定v-model的值之后,placeholder设置的值不起作用,此时需要把v-model绑定的值设置为undefined就可以了原创 2021-09-23 13:17:00 · 1626 阅读 · 1 评论 -
react事件处理-函数绑定
react事件处理React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同:React 事件的命名采用小驼峰式(camelCase),而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。传统的HTML<button onclick="activateLasers()"> Activate Lasers<...原创 2021-09-22 14:24:00 · 313 阅读 · 0 评论 -
react的性能优化建议
1. 组件卸载前进行清理操作在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能使用 useState 保存一个数值,然后开启定时器改变数值,卸载组件时清理定时器import React, { useState, useEffect } from "react";function UseState() { const [date, setDate] = useState(new Date()); useEffect(() =原创 2022-03-16 10:32:34 · 1378 阅读 · 0 评论 -
react-- 常见的组件优化
ShouldComponentUpdate渲染前会进行比较,如果返回的react元素和之前的想用就不需要render,可以看下面的例子正常情况下:import React, { Component } from "react";export default class ShouldComponentUpdate extends Component { constructor(props) { super(props); this.state = { comments原创 2022-02-24 15:39:55 · 124 阅读 · 0 评论 -
react 封装树形组件
TreePage.jsimport React, { Component } from "react";import TreeNode from "../components/TreeNode";const treeData = { key: 0, //标识唯一性 title: "全国", //节点名称显示 children: [ //子节点数组 { key: 6, title: "北方区域", children: [ .原创 2022-02-24 13:13:48 · 1339 阅读 · 0 评论 -
react --封装Dialog弹框
Dialog.jsimport React, { Component, Children } from "react";import { createPortal } from "react-dom";import "../static/css/Dialog.scss"export default class Dialog extends Component { constructor(props) { super(props); const doc = window.docu.原创 2022-02-24 10:26:55 · 878 阅读 · 0 评论 -
React 父子组件数据变化实时更新
父组件数据变化,子组件数据更新方法:利用componentWillReceiveProps方法componentWillReceiveProps(nextProps){ this.setState({ isLogin: nextProps.isLogin, userInfo: nextProps.userInfo, }); }子组件数据变化,通知父组件 // 父组件: <FromCom demo={this.demo} /> //子组件:利用se原创 2022-02-24 09:20:59 · 4219 阅读 · 0 评论 -
react插槽--默认插槽,具名插槽
不具名插槽Props.jsimport Layout from "./Layout";// 函数式组件传值export default function Props() { return ( <Layout title="函数式传值"> <div> <h3>函数式传值</h3> <p>不具名插槽</p> </div> </Layout>原创 2022-02-20 11:59:08 · 779 阅读 · 0 评论 -
ant design 按需加载
配置按需加载安装react-app-rewired取代react-scripts,可以扩展webpack的配置 ,类似vue.config.js在根目录下创建config-overrides.jsconst { override, fixBabelImports,} = require("customize-cra"); module.exports = override( fixBabelImports("import", { libraryName: "antd",原创 2022-02-17 10:34:08 · 462 阅读 · 0 评论 -
react中hooks--useContext用法
useContext⽤于在快速在函数组件中导⼊上下⽂。import React, { useContext } from "react";const Context = React.createContext();const Provider = Context.Provider;export default function HookContext() { const store = { userName: "xiaoming", }; return ( <div> <原创 2022-02-16 08:41:31 · 318 阅读 · 0 评论 -
react--Hooks--useState、useEffect、useReducer实例
HookHook是React16.8⼀个新增项,它可以让你在不编写 class 的情况下使⽤ state 以及其他的 React 特性。Hooks的特点:使你在⽆需修改组件结构的情况下复⽤状态逻辑可将组件中相互关联的部分拆分成更⼩的函数,复杂组件将变得更容易理解更简洁、更易理解的代码import React, { useState, useEffect } from "react";function FruitList({ fruits, setFruits }) {// 点击删除原创 2022-02-14 14:53:51 · 306 阅读 · 0 评论 -
react setState异步变同步
/* * @Author: shihaixia * @Date: 2022-02-11 15:25:43 * @Description: */import React, { Component } from 'react';export default class Home extends Component { constructor(props){ super(props); this.state={ count:0 }; } compo原创 2022-02-11 16:12:03 · 711 阅读 · 0 评论 -
react中的插槽
包含关系-children prop.FancyBorder { padding: 10px 10px; border: 10px solid;}.FancyBorder-blue { border-color: blue;}.Dialog-title { margin: 0; font-family: sans-serif;}.Dialog-message { font-size: larger;}function FancyBorder(props) {原创 2022-01-18 16:14:47 · 564 阅读 · 0 评论 -
react列表渲染-提取组件
函数式组件function ListItem(props) { let obj = props.obj; return Object.keys(obj).map((item) => { return ( <li> {item}:{obj[item]} </li> ); });}export default function Key() { const arr = [ { name: "小明"原创 2022-01-18 15:43:02 · 429 阅读 · 0 评论 -
react的事件处理
闲来无事,又重新看了一遍react的官网,趁机整理一些在 JavaScript 中,class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick,当你调用这个函数的时候 this 的值为 undefined。有以下几种可以解决这种情况import React, { Component } from "react";export default class Event extends Component { constructor() {原创 2022-01-18 14:01:50 · 472 阅读 · 0 评论 -
在react项目中使用过echarts
在react项目中使用过echartsimport React, { Component } from 'react'import echarts from 'echarts'// 指定图表的配置项和数据let option = { title: { text: '堆叠区域图' }, tooltip: { trigger...原创 2020-09-15 15:29:00 · 79 阅读 · 0 评论 -
react项目中,点击跳转到详情页中,url中的地址有变化,但是页面没有进行跳转...
react项目中,点击跳转到详情页中,url中的地址有变化,但是页面没有进行跳转解决方案:给路由加完全匹配原创 2020-09-15 15:05:00 · 1001 阅读 · 0 评论 -
react中Context的使用
Context的使用Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。props单向数据流动:https://image-static.segmentfault.com/134/351/1343511491-5c219fdde2a7b_articlex如果觉得Props传递数据很繁琐,可以采用context,进行跨组件传递数据h...原创 2020-09-10 21:40:00 · 450 阅读 · 0 评论 -
react中link参数传递以及url乱码解决
react中link参数传递以及url乱码解决1.可以通过动态路由的方式进行参数传递 传递:path="/acticle/:id"render() { return ( <div> <Link to="/acticle/1?"> 文章一</Link> ...原创 2020-09-09 17:29:00 · 1590 阅读 · 0 评论 -
redux的使用流程
reduxReact只是DOM的一个抽象层Web应用是一个状态机,视图与状态是一一对应的所有的状态,保存在一个对象里面(唯一数据源)需要使用redux的项目用户的使用方式复杂不同身份的用户有不同的使用方式(比如普通用户和管理员)多个用户之间可以协作与服务器大量交互,或者使用了WebSocketView要从多个来源获取数据从组件层面考虑,什么样子的需要redux...原创 2020-09-07 21:30:00 · 131 阅读 · 0 评论 -
react类型检查
react类型检查react使用prop-types库进行类型检查。PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的。当传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。出于性能方面的考虑,propTypes 仅在开发模式下进行检查。// 你可以将属性声明为 JS 原生类型,默认情况下 // 这些属性都是可选的。 ...原创 2020-09-07 11:22:00 · 496 阅读 · 0 评论 -
React-Router
React-Router最新的路由的版本是5.2的版本。里面的话提供了一些包所在在做web端开发的时候只需要安装react-router-dom就可以了,因为内部已经包含了最核心的内容了。react-router | react-router-native | react-router-config路由的简单使用 安装路由: yarn add react-router...原创 2020-12-22 10:16:00 · 63 阅读 · 0 评论 -
高阶组件-对于CRA的定制
对于CRA的定制 因为我们发现,调用高阶组件的时候采用withCopy(About)代码,但是不够简洁优雅。import React, { Component } from 'react'import withCopy from './withCopy' class About extends Component { render() { return ...原创 2020-12-21 16:49:00 · 145 阅读 · 0 评论 -
高阶组件HOC
高阶组件HOC高阶函数:一个函数内部返回一个新的函数,内部采用闭包的写法。var add = x => { return y => { return x+y }}//调用addadd(3)(1)高阶组件:(HOC) Higher-Order-Component高阶组件本质上就是一个函数,内部可以接收一个组件,然后返回新的组件;简单来说就是组件复用...原创 2020-12-21 16:21:00 · 171 阅读 · 0 评论 -
redux中间件---redux-thunk
redux中间件---redux-thunk通常情况下,action只是一个对象,不能包含异步操作,这导致了很多创建action的逻辑只能写在组件中,代码量较多也不便于复用,同时对该部分代码测试的时候也比较困难,组件的业务逻辑也不清晰,使用中间件了之后,可以通过actionCreator异步编写action,这样代码就会拆分到actionCreator中,可维护性大大提高,可以方便于测...原创 2020-12-21 14:11:00 · 82 阅读 · 0 评论 -
react-redux的使用
react-redux的使用,前面已经介绍了redux的使用(https://www.cnblogs.com/cupid10/p/13629368.html)redux:它是专门用来创建仓库,你可以叫它为store通过redux库里的createStore方法来创建仓库值得傲娇的是redux并不像vuex那样,必须依赖vue而使用,单独拿出来也可以使用那么,问题来了?...原创 2020-12-21 13:36:00 · 120 阅读 · 0 评论 -
react增删改查
react增删改查import React, { Component } from 'react'import axios from 'axios'export default class List extends Component { constructor() { super() this.state = { l...原创 2020-12-17 14:25:00 · 2729 阅读 · 1 评论 -
react各种表单的写法
react表单的写法import React, { Component } from 'react'export default class two extends Component { state = { value: "123", inputValue: "1234", checkData: [], ra...原创 2020-12-16 17:23:00 · 455 阅读 · 0 评论 -
React生命周期
React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,挂载、更新、卸载、错误处理挂载阶段当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:constructor()static getDerivedStateFromProps()render()componentDidMount()注意:下述...原创 2020-12-16 15:26:00 · 87 阅读 · 0 评论 -
react组件dom添加样式
react组件dom添加样式行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现:// 注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 <p style={{color:'red', fontSize:'14px'}}>Hello world</p>使用classReact推荐我们使用行内样式...原创 2020-12-16 14:54:00 · 461 阅读 · 0 评论 -
react遍历数组和对象
Map数组react中遍历数组采用数组的map迭代注意:在map中要加keykey 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识虚拟dom对比的时候,加key可以避免出错。 如果不加key,当一个元素添加的时候,后面的元素就会经历卸载与重新装载的过程。为了避免出错。所以我们在开发中应该尽量避免用index作为key值...原创 2020-12-16 14:44:00 · 1923 阅读 · 0 评论 -
react组件
组件如果代码多了之后,不可能一直在render方法里写,所以就需要把里面的代码提出来,定义一个变量,像这样:const app = <h1>欢迎进入React的世界</h1>ReactDOM.render( <div> { app } </div> document.getElementById('root'))...原创 2020-12-16 14:39:00 · 55 阅读 · 0 评论 -
react模拟后端接口及提交方式 json-server
前后端并行开发的痛点前端需要等待后端开发完接口以后 再根据接口来完成前端的业务逻辑解决方法在本地模拟后端接口用来测试前端效果 这种做法称之为构建前端Mockjson-server获取一个模拟的功能齐全的api接口 不需要敲代码 小于30s即可搞定json-server使用全局安装json-server命令行工具npm install -g json-ser...原创 2020-09-03 17:15:00 · 235 阅读 · 0 评论 -
解决react跨域的两种代理配置
react两种代理配置在项目文件夹中按以下路径找到devServer.js文件。进行代理配置node_modules>react-scripts>config>devServer.jsproxy:{ "/api":{ target:"http://47.96.0.221:9000", change...原创 2020-09-03 19:22:00 · 796 阅读 · 0 评论 -
react模拟后端接口及提交方式(json-server)
前后端并行开发的痛点前端需要等待后端开发完接口以后 再根据接口来完成前端的业务逻辑解决方法在本地模拟后端接口用来测试前端效果 这种做法称之为构建前端Mockjson-server获取一个模拟的功能齐全的api接口 不需要敲代码 小于30s即可搞定json-server使用全局安装json-server命令行工具npm install -g json-ser...原创 2020-09-03 17:15:00 · 1855 阅读 · 0 评论 -
react组件间的通信-父子通信,子父通信,兄弟通信
react组件间的通信父子通信父组件可以将自己的状态通过属性的方式传递给子组件,然后子组件通过props获取到传递来的属性。father.js父组件中render() { let {list} =this.state; return ( <div> <List list=...原创 2020-09-03 11:38:00 · 218 阅读 · 0 评论 -
react受控组件
react受控组件大的方面:react组件分为函数式组件和类组件表单元素而言:分为受控组件和非受控组件非受控组件: 只需要在dom元素上面通过ref进行绑定取值即可。受控组件: 受到数据的控制,使得react成为唯一的数据源.input value={this.state.value} onChange={()=>{this.setState({value:e.tar...原创 2020-09-01 20:10:00 · 96 阅读 · 0 评论 -
react中数据承载--props和state用法
react中数据承载react中数据承载的两种方式: props: 自己可以设置默认属性,也可以从外部传入属性,但是外部传入的属性,自己只能用,不能用来修改 state: 一般由自己控制,自己可以进行状态的更改。props函数组件函数式组件中:通过参数props.xxx获取外部传入的属性值<body> &...原创 2020-09-01 19:48:00 · 276 阅读 · 0 评论 -
React获取DOM元素-ref属性
React获取DOM元素-ref属性类组件通过ref给元素做标记(react不推荐使用)<div id="app"></div> <script type="text/babel"> class App extends React.Component{ componentDidMount(){ /...原创 2020-09-01 12:54:00 · 2502 阅读 · 0 评论 -
React框架
React框架React 起源于 Facebook 的内部项目,起初facebook在建设instagram(图片分享)的时候,因为牵扯到一个东西叫数据流,那为了处理数据流并且还要考虑好性能方面的问题。对市场上的各种前端MVC框架进行了研究。然后对市场上所有JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用...原创 2020-08-31 20:12:00 · 439 阅读 · 0 评论