react
javafanwk
专注微服务架构,熟悉react、大数据、云计算,喜欢看java编程思想,设计模式,算法等书,希望通过我的努力减少代码量,提高java的标准化,提高程序的稳定度,认真搞技术,一直在路上,希望大家共同前行,进步。。。
展开
-
webpack的常用配置
webpack 中文文档webpack.dev/* 1.该文件是webpack的配置文件,所有webpack的任务、用到的loader、plugins都要配置在这里 2.该文件要符合CJS模块化规范*///引入Node中一个内置的path模块,专门用于解决路径问题const {resolve} = require('path');//引入html-webpack-plugin,用于加工html文件const HtmlWebpackPlugin = require('html-w.原创 2022-02-07 19:15:34 · 3563 阅读 · 0 评论 -
ES6特性 -- Promise特性
一、什么是Promise1.概念从语法上来说: Promise是一个构造函数 从功能上来说: promise对象用来封装一个异步操作并可以获取其结果2.Promise的状态改变1. pending变为fulfilled2. pending变为rejected说明: 只有这2种, 且一个promise对象只能改变一次 无论变为成功还是失败, 都会有一个结果数据 成功的结果数据一般称为vlaue, 失败的结果数据一般称为reason二、为什么使用Pro...原创 2022-01-31 17:49:42 · 266 阅读 · 0 评论 -
ES6的常用特性
一、let关键字let关键字用来声明变量,使用let声明的变量有几个特点:不允许重复声明 块儿级作用域 不存在变量提升二、const关键字const 关键字用来声明常量,const声明有以下特点声明一定要赋初始值 不允许重复声明 值不允许修改 块儿级作用域声明对象类型使用const,非对象类型声明选择let三、变量的解构赋值ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。//数组的解构赋值const arr = ['张学友', '刘原创 2022-01-30 11:37:06 · 788 阅读 · 0 评论 -
React Hooks -- 自定义Hooks函数
自定义Hooks函数偏向于功能,而组件偏向于界面和业务逻辑。采用use开头,这样才能区分出什么是组件,什么是自定义函数。import React, { useState ,useEffect ,useCallback } from 'react';function useWinSize(){ const [ size , setSize] = useState({ width:document.documentElement.clientWidth,原创 2022-01-29 22:47:46 · 667 阅读 · 0 评论 -
React Hooks -- 实现Redux
useContext:可访问全局状态,避免一层层的传递状态。这符合Redux其中的一项规则,就是状态全局化,并能统一管理。useReducer:通过action的传递,更新复杂逻辑的状态,主要是可以实现类似Redux中的Reducer部分,实现业务逻辑的可行性。import React, { useContext, createContext,useReducer} from 'react';function ShowArea(){ const {color} = use.原创 2022-01-29 21:54:16 · 886 阅读 · 0 评论 -
React Hooks -- useReducer
以下是Redux中的Reducer有两个参数一个参数是状态,一个参数是如何控制状态。function countReducer(state, action) { switch(action.type) { case 'add': return state + 1; case 'sub': return state - 1; default: return st.原创 2022-01-29 21:37:26 · 333 阅读 · 0 评论 -
React Hooks -- useContext父子组件传值
Context的作用就是对它所包含的组件树提供全局共享数据的一种技术。通过createContext创建通过useContext使用import React, { useState , createContext , useContext } from 'react';//===关键代码const CountContext = createContext()function App(){ const [ count , setCount ] = useState(0);原创 2022-01-29 21:29:07 · 1149 阅读 · 1 评论 -
React Hooks -- useEffect代替常用生命周期函数
原始生命周期函数componentDidMountcomponentDidUpdatecomponentWillUnmount采用原始的方式把计数器的Demo增加两个生命周期函数componentDidMount和componentDidUpdate。分别在组件第一次渲染后在浏览器控制台打印出计数器结果和在每次计数器状态发生变化后打印出结果。代码如下:import React, { Component } from 'react';class Example3 extends原创 2022-01-29 18:28:06 · 1269 阅读 · 0 评论 -
React路由 react-router
一、基础概念什么是react-router?react的一个插件库。专门用来实现一个SPA应用。基于react的项目基本都会用到此库。npm install --save react-router-dom官方文档:https://reacttraining.com/react-router/web/guides/quick-start什么是SPA?单页Web应用(single page web application,SPA)。整个应用只有一个完整的页面。点击.原创 2022-01-27 15:38:41 · 394 阅读 · 0 评论 -
React应用--基于React脚手架
使用前需要安装 node.js官网:下载 | Node.js 中文网安装 yarn npm install --global yarn官网:安装 | Yarn 中文文档使用create-react-app创建react应用react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置(语法检查、jsx编译、devServer…) 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架...原创 2022-01-26 09:48:05 · 127 阅读 · 0 评论 -
React 组件的生命周期
官方文档:生命周期API1.组件从创建到死亡它会经历一些特定的阶段。2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。3.我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/需求:定义组件实现以下功能让指定的文本做显示 / 隐藏的渐变动画 从完全可见,到彻底消失,耗时2S 点击“不活了”按钮从界面中卸载组件.原创 2022-01-25 11:04:57 · 422 阅读 · 0 评论 -
React-受控组件和非受控组件
受控组件官网简述:原文链接在 HTML 中,表单元素(如<input>、 <textarea> 和 <select>)通常自己维护 state,并根据用户输入进行更新。而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。我们可以把两者结合起来,使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 Re原创 2022-01-25 10:19:39 · 465 阅读 · 0 评论 -
react 组件间互相传值 --Simple TODO List
问题一:数据保存在哪个组件内?看数据是哪个组件需要(给它),还是某些组件需要(给共同的父组件)问题二:需要在子组件中改变父组件的状态子组件不能直接改变父组件的状态 状态在哪个组件,更新状态的行为就应该定义在哪个组件解决:父组件定义函数,传递给子组件;子组件调用组件话编写功能的流程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g原创 2022-01-24 21:06:40 · 85 阅读 · 0 评论 -
react 组件间互相传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函数) 在子组件中绑定触发传值得事件比如点击事件,在事件处理函数中通过this.props.属性名()调用父组件中定义得方法 就可以在父组件中拿到传递过来得值进行使用<!DOCTYPE html><html lang="en"><head> <met原创 2022-01-24 19:53:37 · 226 阅读 · 0 评论 -
React 组件三大核心属性 state、props、refs
官网英文官网: https://reactjs.org/中文官网: https://react.docschina.org/介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源React的特点声明式编码 组件化编码 React Native 编写原生应用 高效(优秀的Diffing算法)React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。相原创 2022-01-24 19:20:57 · 620 阅读 · 0 评论 -
React 基础(一)
一、简介React起源于Facebook的内部项目,该公司积极尝试引入HTML5技术用来架设Instagram网站,开发中发现HTML5的性能下降明显,达不到预期的效果。他们就自己开发了React框架。ReactJS官方地址:https://facebook.github.io/react/GitHub地址:https://github.com/facebook/reactreact特点:虚拟DO...原创 2018-05-04 16:20:12 · 217 阅读 · 0 评论 -
React 基础(二)
一、ReactDOM.render()React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对...原创 2018-05-02 21:07:46 · 179 阅读 · 0 评论 -
React 基础(二)
Ant Design of React常用的一些组件Table,Modal,Pagination,Input,Button,Radio,Select,messageTable参数说明类型默认值bordered是否展示外边框和列边框booleanfalsecolumns表格列的配置描述,具体项见下表ColumnProps[]-components覆盖默认的 table 元素object-dataSo...原创 2018-05-03 16:17:26 · 2009 阅读 · 0 评论 -
React实现java输出流的下载
目的:java端是输出流,前端用的react要实现输出流的下载,其中核心代码是模仿url的点击事件downloader=()=>{ let that =this; let parameter = '?shopID='+that.state.shopID +'&shopName='+that.state.shopName+'&shopTypeNa...原创 2018-05-10 14:50:38 · 3025 阅读 · 0 评论 -
学习使用Ant-design需要以下参考知识
学习使用Ant-design需要以下参考知识 这几个网站都不错(我自己都看了收获很大)我的博客 react基础系列中有详细介绍 用的架构是 前端 react +springboot 通过json传值1.es6 (箭头表达式,let,map等) http://es6.ruanyifeng.com/#docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B...原创 2018-05-04 10:49:15 · 1085 阅读 · 0 评论 -
React规范
一.React+ES6+ant-design+webpack二.建议加入eslint插件到编辑器中,帮助我们检查Javascript编程时的语法错误基础规范component 文件夹中,展示组件文件名,样式文件名,采用大驼峰命名,如:Login.js 、Login.lesscontainers 文件夹中,容器组件文件名,采用大驼峰命名,如:Login.js对应的展示组件和容器组件最好命名一致...原创 2018-05-04 14:33:49 · 378 阅读 · 0 评论 -
React 前端开发规范(执行版)
一、命名规范1.变量命名方法:小驼峰式命名法,首字母小写。studentInfo、userInfo命名建议:使用英文单词组合,语义清晰忌:var a=0;var nihao=true;注明:无法用英文诠释的单词可使用首拼,例:var hkb={};//户口本2.常量命名方法:全部大写,下划线分隔命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词例:var MAX_COUNT=10...原创 2018-05-07 11:04:01 · 5717 阅读 · 0 评论 -
react 箭头表达式
基本用法ES6 允许使用“箭头”(=>)定义函数。var f = v => v;// 等同于var f = function (v) { return v;}; 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。var f = () => 5;// 等同于var f = function () { return 5 };var sum = (...原创 2018-05-02 15:22:34 · 2220 阅读 · 0 评论