react学习日记
文章平均质量分 65
菜鸟小胖砸
博主很懒,但是却对前端很热爱,除了样式!
展开
-
Vue3/React-对比实现仿知乎专栏--01
Vue3/React-对比实现仿知乎专栏–01技术栈Vue3:全家桶+TS+bootstrapReact:React全家桶(函数式组件hooks)+TS+Redux+Antd项目创建React :create-react-app react-version --template typescriptVue3 : npm install -g @vue/cli npm install -g @vue/cli-init vue create vue3-version初步文件结构/as原创 2021-10-30 17:18:20 · 1006 阅读 · 0 评论 -
TS+react自建组件库 05
TS+react自建组件库 05KGD的第十个组件-Upload需求分析文件分析:①文件状态:ready、uploading、success、error②文件属性展示:uid、size、name、status、percent、raw、response、error设计实现import { FC, useRef, ChangeEvent, useState} from 'react'import axios from 'axios'import Button from '.原创 2021-10-24 15:45:49 · 865 阅读 · 0 评论 -
TS+react自建组件库 04
TS+react自建组件库 04KGD的第七个组件-Input需求分析属性分析:能否禁用、图标、规格大小、输入框前缀、输入框后缀设计实现import {FC, ReactElement, ChangeEvent, InputHTMLAttributes} from 'react'import { IconProp } from '@fortawesome/fontawesome-svg-core'import classNames from 'classnames'import Ic原创 2021-10-21 07:57:51 · 497 阅读 · 1 评论 -
TS+react自建组件库 03
TS+react自建组件库 03KGD的第五个组件-Icon引用第三方图标库:fontowesome安装指令:yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/react-fontawesome引入:import {FontAwesomeIcon, FontAwesomeIconProps} from '@fortawesome原创 2021-10-18 09:19:47 · 157 阅读 · 0 评论 -
TS+react自建组件库 02
TS+react自建组件库 02KGD的第二个组件-Alert需求分析类型分析-type:成功、默认、危险、警告功能分析-:默认弹出框、可添加描述弹出框设计实现import React, {FC, useState} from 'react'import classNames from 'classnames'export enum AlertType { Success = 'success', Default = 'default', Danger = 'dange原创 2021-10-14 22:14:53 · 453 阅读 · 0 评论 -
TS+react自建组件库 01
TS+react自建组件库 01Hello World组件测试import {FC} from 'react'interface IHello { message?: string; }const Hello:FC<IHello> = function(props){ let {message} = props; return ( <h2>{message}</h2> )}Hello.defaultPro原创 2021-10-12 22:16:54 · 478 阅读 · 0 评论 -
react后台管理系统---0922
react后台管理系统—0922①报错:Error: Invariant failed: You should not use outside a 原因:在Router外使用NavLink标签解决:给根组件套上BrowserRouter外标签②报错:Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you原创 2021-09-22 22:44:16 · 203 阅读 · 0 评论 -
react后台管理系统 ---0921
react后台管理系统 —0921引入antd库:报错:Manifest: Line: 1, column: 1, Syntax error.原因:创建react-app项目时候删除了manifest.json文件,但是在public的index.html中还有它的引入没有删除。解决:删除index.html中的: 样式出现问题:原因:未引入样式解决:引入样式,代码:import ‘…/…/…/node_modules/antd/dist/antd.less’;引入axios:原创 2021-09-21 22:38:16 · 253 阅读 · 0 评论 -
0920 NOTE
0920 NOTEredux数据共享(1).定义一个Pserson组件,和Count组件通过redux共享数据。(2).为Person组件编写:reducer、action,配置constant常量。(3).重点:Person的reducer和Count的Reducer要使用combineReducers进行合并,合并后的总状态是一个对象(4).交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。纯函数一个函数的返回结果只依赖于它的参数,并且在执行过程里面原创 2021-09-21 09:55:37 · 78 阅读 · 0 评论 -
0919 NOTE
0919 NOTEredux的简单使用①安装:npm i redux②引用举例://store.jsimport {createStore} from ‘redux’import reducer from ‘./reducers’export default createStore(reducer)//reducer.jsconst initState = 0;export default function countReducer(preState=initState,action原创 2021-09-19 22:54:53 · 62 阅读 · 0 评论 -
0918 NOTE
0918 NOTEredux的三个核心概念action动作的对象包含2个属性: type:标识属性, 值为字符串, 唯一, 必要属性 data:数据属性, 值类型任意, 可选属性例子:{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }reducer 用于初始化状态、加工状态。 加工时,根据旧的state和action, 产生新的state的纯函数。store将state、action、reducer联系在一起的对象如原创 2021-09-18 16:42:44 · 75 阅读 · 0 评论 -
0917 NOTE
0917 NOTE路由的基本使用原生html中可以通过a标签调转不同页面react中通过路由链接实现切换组件//1.安装react库npm i react-router-dom//2.组件中引入import {Link,BrowserRouter,Route} from "react-router-dom"//3.Link标签类似a标签 to属性用于链接跳转<Link className="" to="/about">About</Link><Link c原创 2021-09-18 07:22:51 · 119 阅读 · 0 评论 -
0916 NOTE
0916 NOTEtodoList案例总结 1.拆分组件、实现静态组件,注意:className、style的写法 2.动态初始化列表,如何确定将数据放在哪个组件的state中? ——某个组件使用:放在其自身的state中 ——某些组件使用:放在他们共同的父组件state中(官方称此操作为:状态提升) 3.关于父子之间通信: 1.【父组件】给【子组件】传递数据:通过props传递 2.【子组件】原创 2021-09-16 23:23:16 · 94 阅读 · 0 评论 -
0915 NOTE
0915 NOTE新生命周期生命周期流程图(新)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9JGxOTqb-1631716995505)(0915%20NOTE.assets/image-20210915101237823.png)]对比旧生命周期流程图: 下述生命周期方法即将过时,在新代码中应该避免使用它们:UNSAFE_componentWillMount()UNSAFE_componentWillUpdate()UNSAFE_compo原创 2021-09-15 22:44:22 · 74 阅读 · 0 评论 -
0914 NOTE
0914 NOTErefsreact的refs属性字符串类型ref:class InputAlert extends React.Component { render() { return ( <div> <input type="text" placehoder="点击按钮弹出输入值" ref="left"/> &原创 2021-09-14 22:37:33 · 78 阅读 · 0 评论 -
0913 NOTE
0913 NOTEReact是什么?一个将数据渲染为HTML视图的js库React的特点:1.采用组件化模式,声明式编码,提高开发效率及组件复用率2.React Native中可以使用React语法进行移动端开发3.虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互React实现:数据=>虚拟DOM=>真实DOM虚拟DOM的两种创建方式1.js创建React.createElement('h1',{id:"title"},React.createElement原创 2021-09-13 22:39:46 · 75 阅读 · 0 评论