react
文章平均质量分 51
Ciao_Traveler
这个作者很懒,什么都没留下…
展开
-
react使用echarts-gl实现3D环形图
效果图需要下载echarts、echarts-gl、版本实现代码import * as echarts from "echarts";import React from "react";import "echarts-gl";import "./index.less";const optionData = [{ name: "明漏水量", value: 15623,}, { name: "水箱水池的渗漏和溢流水量", value: 12356,}, { name:原创 2022-03-11 08:51:52 · 2834 阅读 · 0 评论 -
antd实现动态表头,以及表格的合并
antd实现动态表头,以及表格的合并拿到的数据结构const data=[ { "Month": "202101", "WMeterType": "--", "Cycle": "1", "UserCount": 44342, "subsets": [ {原创 2021-05-10 20:42:10 · 2537 阅读 · 0 评论 -
使用antd3.x版本实现选择年份,并设置默认年份
在使用antd3.x的时候,需要用到只选择年份的选择器,会遇到的很多问题,点击可以查看这个文档,可能会对你有所帮助。下面的代码的实现部分import React, { Component } from 'react';import { DatePicker } from 'antd';export default class extends Component { state = { isopen: false, time: null } // 弹出日历和关闭日历的回原创 2020-09-10 10:41:34 · 2614 阅读 · 0 评论 -
React的新特性之memo
实现指定组件进行渲染使用shouldComponentUpdate实现指定组件渲染import React, { Component} from 'react';class Foo extends Component{ // 判断该组件是否重新渲染 // 通过生命周期函数可以去判断,也可以通过PureComponent实现 shouldComponentUpdate(nextProps,nextState){ if(nextProps.name===this.props.na原创 2020-07-19 21:55:49 · 826 阅读 · 0 评论 -
React新特性之layz和Suspense实现延迟加载
layz和Suspense实现延迟加载import React, { Component, lazy ,Suspense} from 'react';import './App.css';// lazy的返回值就是一个react组件const About= lazy(()=>import("./about.jsx"));// ErrorBoundary错误拼接,是一个捕获渲染后台错误的组件class App extends Component { state={ hasErro原创 2020-07-19 21:52:09 · 345 阅读 · 0 评论 -
react中父子间的简单通信
react中父子间的的通信由于不是在项目中写的,所以需要引入一些核心库react.development.jsreact-dom.development.jsbabel.min.js>父组件中改变子组件的状态。方法一:在父组件中通过this.ref.xxx拿到子组件对象,直接在父组件中改变子组件的状态,对子组件来说并不是很好<body> <div id="app"></div> <script type="text/babel"原创 2020-06-30 19:55:40 · 321 阅读 · 0 评论 -
react中项目中设置antd4.0的按需加载(修改主题)
react中项目中设置ant的按需加载(1)创建一个项目npm create-react-app(2)安装antd并引入安装npm i antd在src/App.js中引入antd@import '~antd/dist/antd.css'测试是否可用:修改 src/App.js,引入 antd 的按钮组件。import React,{Component} from 'react' import { Button } from 'antd'; class App extends Compone原创 2020-06-30 13:50:18 · 1621 阅读 · 0 评论 -
学习react的简单总结3(用不同的方式完成简单计数,写一个简单的todo)
通过脚手架使用Redux,完成简单计数1)创建一个项目 create-react-app myreudex2)安装redux npm i redux -S3)在src文件下创建一个redux文件夹,在redux文件夹中创建下面的.jsx文件。anction_creator.jsx import {INCREMENT,DECREMENT} from "./action_types" //创建action_creator,可以转换成箭头函数 /* function createIncreme原创 2020-06-23 19:45:46 · 155 阅读 · 0 评论 -
学习react的简单总结2(关于react中的路由,redux的简单学习)
React 中的路由路由分类:后端路由:/students ----> json数据 api接口前端路由:浏览器中的路由 /goods ----> 组件对于react-router,有三个包:react-router:核心组件react-router-dom:应用于浏览器端的路由库(单独使用包含了react-router的核心部分)react-router-native 应用于native端的路由其中:react-router-dom,react原创 2020-06-19 16:55:42 · 129 阅读 · 0 评论 -
学习React的简单总结1(虚拟DOM,jsx,组件定义,ref的简单使用)
初识ReactReact的特点:声明式、组件化、一次学习,随处编写、单项数据流、高效和Vue一样,使用虚拟dom。React是一种思想:react.js和Vue.js一样是用来写webappreactNative 是写原生app声明式和命令式:声明式:虚拟DOM arr.forEach((item,index)=>{})命令式:操作DOM for(let i=0; i<10; i++){…}引入相关的库:react.js 是react的核心库react-dom原创 2020-06-16 21:59:37 · 482 阅读 · 0 评论 -
React中的新特性之Context
React中的新特性之Context定义:Context提供了一种方式,能够让数据在组件树中传递而不必一级一级动手传递结构:Provider提供数据,Consumer去使用数据简单使用Context<!-- 通过createContext创建Context实例对象 --> import React, { Component, createContext } from 'react'; // createContext(defaultValue)创建一个Co原创 2020-07-19 19:12:57 · 212 阅读 · 0 评论