- 博客(21)
- 收藏
- 关注
RSS订阅原创 react hook 函数式组件渲染机制，setTimeval 倒计时组件
功能需求：点击按钮，触发一个十秒的倒计时，初始值为 0 ，用 react-hook 函数式组件实现在线代码演示: https://codesandbox.io/s/xmhu3?file=/src/App.tsx.import "./styles.css";import React, { useState, useEffect } from "react";// 问题案例const IssuesExample = () => { let [countDown, setCountDown
2021-03-11 14:35:40
1521
4
原创 截取url参数
添加依赖包 yarn add urlconsole.log(url.parse(history.location.search, true).query);
2020-02-27 21:15:27
143
原创 TypeScript 接口的使用
TypeScript的核心原则之一是对值所具有的结构（对象or数组or…中的字段值）进行类型检查1. 基础的类型约束接口// 可以使用 interface 关键字定义函数中传入的字段进行检验interface LabelledValue { label: string;}// 也可以不使用interface 直接在函数中定义// function printLabel(labell...
2020-01-20 10:39:31
179
原创 typescript 基础类型
typescript 是什么typescript 是微软出的一个脚本语言，目的是增强 Javascript 的类型约束的不足，因为javasctipt 的变量可以被重复赋值成多种类型，带来方便的同时，也给大型项目变量管理很容易混乱typescript 是js的超集, ts并不行直接在浏览器中运行，而是向下兼容成js，ts中可以兼容js代码，es6/7/8;需要注意的是在使用了 ts 包时...
2020-01-17 17:14:35
359
原创 antd-pro 中如何添加区块
首先先克隆一个 antd-pro 一个基础项目npm start 打开项目之后点击添加区块的圆球路由路径：下拉选择添加在哪个路由之中 后面的输入框是这个路由的名字添加到： 添加到哪个pages 下的哪个组件页面中，后面的输入框是组件的名称...
2020-01-16 16:45:41
2763
原创 antd-pro 如何添加一个二级菜单页面
这是一个二级菜单，添加完成之后需要在menu.ts中添加菜单国际化的中文名；如果不想用国际化如何关闭国际化：//config.ts 把 enable 改为 falselocale: { // default false enable: false, // default zh-CN default: 'zh-CN', ...
2020-01-16 16:35:52
2302
原创 使用Apollo-useMutation注册一个表单
import React, { useState } from "react";import { Form, Button } from "semantic-ui-react";import gql from "graphql-tag";import { useMutation } from "@apollo/react-hooks";const Register = props =&g...
2020-01-14 17:31:00
586
原创 hooks 和Form表单提交
import React, { useState } from "react";import { Form, Button } from "semantic-ui-react";const Register = () => { const [values, setValues] = useState({ username: "", email: "", pa...
2020-01-14 16:55:31
2753
1
原创 Apollo useMutation 添加数据，改变数据
useMutation 修改后台数据，并且更新前端视图修改了数据之后，Apollo 会根据ID自动更新视图，所以修改数据不需要手动改变本地缓存，删除，或者添加数据需要修改本地缓存或者改变了多个数据也需要修改本地缓存import React from "react";import { render } from "react-dom";import { ApolloClient } fro...
2020-01-11 21:13:01
2537
原创 Apollo 使用获取数据
使用Apollo 优势是什么：声明式数据获取：编写gql查询并接收数据，而无需手动跟踪加载状态出色的开发人员经验：享受TypeScript，Chrome DevTools和VS Code的有用工具专为现代React设计:充分利用最新的React功能，例如hooks可逐步采用：将 Apollo无缝插入任何JavaScript应用程序,可以直接嵌套到任何一个前端项目中如何获取数据：可...
2020-01-11 20:12:01
2132
原创 GraphQL 使用
GraphQl特点：请求需要的数据，前端可以自定义需要字段获取多个资源，只用一个请求，GraphQl 用类型来区分资源便于后期维护，根据需求平滑演进，添加或者隐藏字段参数传递：和js传递参数相同，小括号内定义形参，但是注意：参数需要定义类型（String Int Boolean Float ID）!:代表参数不能为空type Query{text(num:Int!,numSid...
2020-01-11 17:03:03
121
转载 hooks/useMemo 优化子组件重复渲染
父组件每次进行变化时子组件里面的方法都会再执行一遍，这样就造成了很大的性能损耗；下面是性能有问题的子组件，父组件点击志玲时子组件里面的changeXiaohong方法都会执行一遍import React, { useState, useMemo } from "react";function Example7() { const [xiaohong, setXiaohong] = ...
2020-01-08 21:09:46
4615
1
原创 umi.js的简单理解
什么是umi.js?插件化 内部由大量的插件组成，列如pwa按需加载 一件兼容等开箱即用 安装一个umi依赖足以（react webpack react-router等）约定式路由 抛开繁琐的配置（支持权限 动态路由 路由嵌套等）通过脚手架创建项目 参考官方文档：https://umijs.org/zh/guide/create-umi-app.html#%E4%BB%8B%E7%B...
2020-01-05 15:20:57
5057
原创 windows下安装linux子系统 vscode 中使用
介绍：主要使用 WSL1 + VSCode 来提供一套 Windows 10 系统下的开发环境。WSL2 必须使用开发者预览版才支持安装 WSL 参考官方文档：https://docs.microsoft.com/en-us/windows/wsl/install-win10在windons的应用商店中安装 ubuntuVSCode 设置 WSL 为默认终端VSCode 安装 Re...
2020-01-03 22:25:52
2402
1
原创 react prop-types的使用方法
为什么使用prop-types？父组件传值给子组件时的类型约束，方便后期维护；import React from 'react'import PropTypes from 'prop-types';function Son({optionalArray,optionalBool,optionalFunc,optionalNumber,optionalObject,optiona...
2020-01-03 21:26:10
801
原创 dva获取与修改公共状态里的数据
在models中新建一个文件获取数据 stateexport default { namespace: "indexTest", // 命名空间，区别每个组件间的数据 state: { // 组件的数据 name: "测试" }};新建一个路由页面引入connect : import { connect } fro...
2019-12-29 21:42:04
3215
1
原创 dva路由新增路由
1 引入路由在dva中引入路由： import { Router, Route, Switch } from 'dva/router';引入方式不同之外，使用的方法都是一样的2 如何新增一个路由页面在src的routes目录下，新建一个文件src的router.js文件中引入浏览器窗口输入新增的路由地址3 在ui组件中（components）没有props自带的路由如何解决...
2019-12-29 14:56:17
336
原创 如何关闭占用端口的应用程序
cmd 进入命令行netstat -aon|findstr “8000” 8000 查询的端口号输入完成后，我们会看到界面上会弹出一个列表，记录下列表第一行最后会出现一个数字tasklist|findstr “记录下的数字” （此时你就可以看到占用端口的哪个凶手了）taskkill /f /t /im 占用的应用程序图例子：...
2019-12-29 11:55:31
1132
原创 初始化dva项目和目录介绍
1. dva简介dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。(dva集成了全局状态管理，网络接口请求，路由配置，不需要自己再去一步步集成，可以说是使用方便)2. 安装dva-clinpm install dva-cli -g 全局安...
2019-12-29 11:47:16
411
原创 style-component实现继承样式
import React from "react";import styled from "styled-components";const Button = styled.button` background: palevioletred; border-radius: 3px; border: none; color: white;`;const TomatoBu...
2019-12-05 11:27:58
1986
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人