React
Posden
唯天下之至拙能胜天下之至巧。曾国藩表示,我没说过这句话
展开
-
仿疫情地图 React - Echarts 实时数据
看一下手机端疫情地图(按此仿写的)项目实现昨天某公开课上,老师是利用vue的,接口也是老师提供的。因为个人项目是React的,正好补充一下项目。直接上代码安装echart依赖npm install echarts-for-react echartsimport React, { Component } from 'react';import ReactEcharts from '...原创 2020-02-27 16:17:08 · 1014 阅读 · 5 评论 -
create-react-app webpack分离公共库 试试Dllplugin
前段时间,写了一篇关于vue-cli3 的 Dllplugin 链接,个人项目是react的,所以也想修改一下。代码大部分都是一样的。提倡不要改默认配置,就是不建议要npm run eject。可以类似vue.config.js一样新建文件配置最后覆盖。其实antd ui 按需加载就提供了一个思路 customize-cra。在上面也是可以写配置文件。我以配置dllplugin为例。到时候可以自...原创 2019-11-18 22:25:00 · 1656 阅读 · 2 评论 -
React 项目优化
Unsafe 生命周期强迫症,就没办法了componentWillMount → UNSAFE_componentWillMountcomponentWillReceiveProps → UNSAFE_componentWillReceivePropscomponentWillUpdate → UNSAFE_componentWillUpdatecd your_projectnpx ...原创 2019-11-06 18:00:00 · 687 阅读 · 0 评论 -
回顾 redux react-redux
最近在忙着写自己的react个人项目。现在用到redux这块,嗯,虽然之前写过,也回顾一下,但还是有点生疏,故在此写个简单的案例,回顾一下。有兴趣的朋友可以 于此链接 redux初识。人毕竟有遗忘曲线计数案例create-react-app redux-testcd redux-estnpm run start运行成功,开始改造新版本默认变成如下的了,不习惯可以改成class...原创 2019-09-22 09:59:00 · 151 阅读 · 0 评论 -
React 高阶组件 HOC
基本概念在javascript中,高阶函数是以函数为参数,并返回值也是函数的函数。类似,高阶函数接受React组件作为参数,并且返回一个新的React组件。高阶组件本质上也是一个函数。形式:const EnhancedComponent = heigherComponent(WrappedComponent)使用场景1. 操作props,添加,删除,修改在被包装组件接受props前...原创 2019-01-24 16:10:31 · 227 阅读 · 0 评论 -
React 性能优化
React 性能优化React组件性能优化单一组件中 // 推荐在constructor中bind,只执行一次 constructor(props) { super(props) this.state = { } this.handleClick=this.handleClick.bind(this) } ...原创 2019-01-25 17:39:25 · 183 阅读 · 0 评论 -
React 过渡 动画
有关css的就不多说了,具体自己看文档。只是稍微在这里提个醒。过渡// transition 过度属性transition:all 2s ease-in动画// forwards 保留动画最后一帧的效果.hide{ animation: item-hide 2s ease-in forwards;}@keyframes item-hide { 0%{ opacit...原创 2019-01-12 15:17:35 · 196 阅读 · 0 评论 -
React-redux入门
react-redux以一个输入框为例,读取store中的值并修改安装npm install react-redux -S入口index.js文件import React from 'react';import ReactDOM from 'react-dom';import Text from './Text';import * as serviceWorker from '....原创 2019-01-11 18:11:33 · 120 阅读 · 0 评论 -
Redux初识
Redux = Reducer+FluxReact 注重的是视图,对于数据传递,不好友好,繁琐,性能低下。所以需要有配套的技术。先有Flux后升级,才有Redux。Redux Flow原创 2019-01-10 17:11:19 · 159 阅读 · 0 评论 -
React create-react-app css-moudle webpack4
求助帖啊······create-react-app一键生成项目css样式冲突想webpack.config,js 配置css-moudle的 webpack版本4但不管怎么配,还是有问题求大佬解答地址:https://github.com/css-modules/css-modules...原创 2019-01-08 19:40:18 · 426 阅读 · 0 评论 -
React 组件通信
父子组通信父传子1.在调用子组件的时候,定义一个属性2.子组件里面this.props.属性<Test title="页面标题"></Test>//<p>{this.props.title}</p>原创 2019-01-08 16:55:11 · 145 阅读 · 0 评论 -
React 方法 事件
React 方法方法中不涉及this的,就按正常的写法;如果涉及,则改变this指向下面列举3种方式1 调用方法时bind(this) getMsg(){ alert(this.state.msg) } <button onClick={this.getMsg.bind(this)}>按钮</button>原创 2019-01-08 14:10:47 · 128 阅读 · 0 评论 -
React router 4.x
React router在gitHub上,学会找官方文档,看文档安装npm install react-router-dom --save导入模块import { BrowserRouter as Router, Route,Link } from "react-router-dom";导入文件,配置路由–基础import React, { Component } from ...原创 2019-01-07 22:26:34 · 1214 阅读 · 0 评论 -
React 组件创建 生命周期 PropTypes
组件import React from 'react';import ReactDOM from 'react-dom';// 第一种创建组件,props可以是其他,形参,但这样语义化// 首字母大写function HelloWorld(props){ console.log(props) // props.name="Li Mei" props只读,会报错原创 2019-01-07 12:49:26 · 201 阅读 · 0 评论 -
React 初识
先接触的React Native,因为公司新项目需求需要。但React底层什么的一概不知,虽然有一点Vue的入门经验。所以想年前突击一下。望与前端各位,共同进步,早日爬坑。工欲善其事必先利其浏览器,node环境学习一种语言,建议从官网入手,无味的话,也可以看看视频之类库与框架library(库) ...原创 2020-06-08 09:50:45 · 417 阅读 · 0 评论