React
月半叫做胖
好好学习 冲鸭
展开
-
日常随笔: React useEffect中使用异步更新数据方法遇到的问题
开发随笔:react hooks 异步更新的问题1. 问题叙述在使用antd/G2图表更新的时候发现:在useEffect中通过异步函数对图表渲染的data进行更新, 但是由于第一次更新后,数据是延迟更新的,所以好像数据并没有实时进行更新.2. 代码分析定义了一个heatmapData const [heatMapData, setHeatMapData] = useState...原创 2019-11-12 21:27:32 · 9430 阅读 · 0 评论 -
日常随笔:React+G2 使用changeData实时更新数据
React+G2踩坑:使用changeData 实时更新数据用类组件在componentDidMount中初始化图表,然后将chart实例进行保存即可在componentWillUpdate的时候完成对于图标的更新代码例子import React from 'react';import G2 from '@antv/g2';interface Props { data: a...原创 2019-11-03 15:08:37 · 5178 阅读 · 0 评论 -
日常随笔: Typescript + axios的实践
Typescript关于获取Promise的实践项目目录├── src│ ├── api.ts│ ├── App.css│ ├── App.test.tsx│ ├── App.tsx│ ├── index.css│ ├── index.tsx│ ├── interface.ts│ └── react-app-env.d.ts#### 代码分析...原创 2019-10-28 11:55:11 · 880 阅读 · 0 评论 -
React学习笔记之十四: React hooks初探
React Hooks本文参考主要博文:阮一峰老师的 React-hooks 教程How to fetch data with React Hooks?useEffect 完整指南React-hooks 的官方文档demoReact hooks 的主要功能是让函数式组件能够模拟出自身的状态 state 和生命钩子函数常用的 React Hooks 函数包括useStateus...原创 2019-09-09 11:46:56 · 375 阅读 · 0 评论 -
React学习笔记之十一:高阶组件(HOC)
11.高阶组件(HOC)什么是HOC怎么封装一个HOCHOC的小栗子HOC的用法深入博文推荐1. 什么是HOC高阶组件(HOC)不是React的API是一种基于组件的编程方法,是为了组件更好的复用而存在的。高阶组件!!!就是一个函数 不要慌!比如获取博客信息列表组件和获取评论列表,虽然可能评论列表在博客信息列表之间有一些差距,比如博客可能有转发等功能,而评论列表可能要有自动...原创 2019-07-28 12:06:37 · 480 阅读 · 0 评论 -
React学习笔记之十三:React-Router之基础语法和嵌套路由
1.React-Router的基本用法react-router的几个重要工具Router (BrowserRouter)RouteLinkRouter路由器Router: 主要用于包裹整个路由信息和路由跳转信息的容器Route路由规则: 用于识别特定的URL后,将页面导向特定的组件(URL -> Component)Link路由链路:类似于a标签,将页面跳转到特定的U...原创 2019-08-04 20:56:38 · 336 阅读 · 1 评论 -
React学习笔记之十二:通过TodoList学Mobx
Mobx学习笔记1. mobx的作用官网描述React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。MobX提供机制来存储和更新应用状态供 React 使用简单点: React -> 把数据映射到页面上进行渲染Mobx -> 提供存储和更新状态的方法(状态管理)2. mobx-react 装饰器环境搭建创建一个react应用并添加mobx-reac...原创 2019-08-04 17:26:29 · 285 阅读 · 0 评论 -
React学习笔记之十: Context的使用方法
10. React的上下文Context1. Context的作用组件间的参数传递是单向数据流(父->子),那么如果当子组件嵌套的很深层的时候,就会存在每一层嵌套的过程中都需要通过props进行传参,十分麻烦,要是在整个组件树中能有一个公共的“全局变量”那就好了, 每次我们需要相应的参数只要通过访问这个全局变量就可以达到我们想要的目的了,因此我们使用了上下文Context2. Cont...原创 2019-07-21 22:43:08 · 300 阅读 · 0 评论 -
React学习笔记之九:生命周期
9. React的生命周期具体的代码可以参考我的github现在我们已经可以使用React实现一些东西了:这里提供两个例子:todoList评论功能来谈谈JSX和React的生命周期JSXReact生命周期1. 一个简单的React组件的JSX原理// 简单的Headerclass Header extends Component { render() { ...原创 2019-07-21 19:32:43 · 313 阅读 · 0 评论 -
react+mobx+装饰器环境搭建
问题描述:今天在学习mobx的时候发现,使用mobx的装饰器,运行yarn start 报错!!!解决办法:安装@babel/plugin-proposal-decorators@7.4.4yarn add @babel/plugin-proposal-decorators@7.4.4yarn install配置node_modules下的create.js文件将overr...原创 2019-07-17 23:51:54 · 278 阅读 · 0 评论 -
yarn安装包出现的Unexpected end of JSON input问题解决方法
问题:在使用create-react react-app时出现:error An unexpected error occurred: “C:\Users\Administrator\AppData\Local\Yarn\Cache\v4\npm-send-0.16.2-6ecca1e0f8c156d141597559848df64730a6bbc1\node_modules\send\.yarn...原创 2019-07-17 23:45:50 · 3478 阅读 · 0 评论 -
React学习笔记之八:表单数据的双向绑定
7.表单的双向数据绑定具体代码可以参考我的github中的my-app参考博文:React表单事件和取值通常需要获取用户在表单内填写的信息,实现对于用户数据的获取并上传,因此表单数据的绑定十分重要,这次我们将对单选,下拉,输入分别进行数据的绑定class Form extends Component { constructor(props) { super(props);...原创 2019-07-05 11:03:23 · 912 阅读 · 0 评论 -
React学习笔记之七:列表数据的渲染方法
7. 列表数据渲染列表数据非常常见,例如新闻列表,信息列表等,我们在vue中使用v-for对数据列表进行渲染,而react中渲染列表的方式没有语法糖,更为直接,上例子!class ListRender extends Component { constructor(props) { super(props); this.state = { userInfo:...原创 2019-07-03 15:44:25 · 372 阅读 · 0 评论 -
React学习笔记之六:组件间的参数传递
6. 组件间传参父组件向子组件传参子组件向父组件传参0. 上一波目前为止的App.js文件中我们的组件代码!我们来回顾下之前我们做了啥,目前为止完整的代码:import React, { Component } from 'react';import './App.css';class Header extends Component { render() { re...原创 2019-07-03 15:42:14 · 190 阅读 · 0 评论 -
React学习笔记之五:事件绑定监听
5.事件的监听上面我们是通过setTimeout实现对于state中content的变化,我现在通过点击事件来控制其中的参数class Content extends Component { constructor(props) { super(props); this.state = { content: '123', count: 0 ...原创 2019-07-03 15:39:00 · 506 阅读 · 0 评论 -
React学习笔记之四:动态参数绑定
4. 动态参数的设置state查询setState改变参数1.state进行查询// App.jsclass Content extends Component { constructor(props) { super(props); this.state = { content: '123' }; } render() { ...原创 2019-07-03 15:37:35 · 827 阅读 · 0 评论 -
React学习笔记之三:自定义一个React组件
3.自定义一个App.js组件在上一次我们创建的first-react中,我们打开App组件我们对App组件进行一个重写,写一个自己的Header组件!// App.jsimport React, { Component } from 'react';import './App.css';class Header extends Component { render() { ...原创 2019-07-03 15:34:37 · 275 阅读 · 0 评论 -
React学习笔记之二:认识index.js
2.index.js先创建一个react工程create-react-app first-reactcd first-reactnpm start我们打开目录下的index.js文件,从入口文件开始认识react// index.jsimport React from 'react';// ReactDom用于页面渲染import ReactDOM from 'react-do...原创 2019-07-03 15:32:30 · 6826 阅读 · 1 评论 -
React学习笔记之一:安装和环境配置
1.React 安装脚手架的搭建npm install -g create-react-appcreate-react-app hello-react项目启动cd hello-reactnpm start插件配置Reactjs code snippetsReact代码补全神器,推荐快捷键使用详见:官方文档ES7 React/Redux/GraphQL/Rea...原创 2019-07-03 15:27:10 · 266 阅读 · 0 评论