研发笔记
关注
分享
扫一扫
夹心776655
这个作者很懒，什么都没留下…
展开
-
ES Module与CommonJS的区别
ESModule和CommonJS的区别原创 2024-03-26 23:24:06 · 278 阅读 · 0 评论 -
如何做移动端的样式适配
移动端样式适配原创 2024-03-26 23:12:49 · 777 阅读 · 0 评论 -
【项目搭建】项目搭建与开发
正确的项目启动思路软件开发流程软件需求设计规范功能性需求:用户可以打开网站顶部导航栏、走马灯、热门推荐等等2.非功能性需求：网站使用React + Typescript代码逻辑清晰创建ts项目在typescript中，类型的定义我们需要使用 .d.ts 为后缀的文件来表示，.d.ts 是typescript专用的声明类型的文件，这个文件只包含类型声明，它不会包含任何逻辑。不会被编译、也不会被webpack打包。打开src文件夹，创建一个名叫 custom.d.ts 的文件原创 2021-09-26 09:06:50 · 328 阅读 · 0 评论 -
【React】State和Props
State与Props1、props是组件对外的接口, 而state是组件对内的接口2、props用于组件间的数据传递, 而state用于组件内部的数据传递3、state是私有的，可以认为state是组件的“私有属性”4、用 setState() 修改 State用 setState() 修改StateonClick = {() => { this.setState( {isOpen: !this.state.isOpen} )}}初始化// 生命周期第一阶段：初始化//原创 2021-09-06 08:59:10 · 122 阅读 · 0 评论 -
【React】异步处理-获取网络API数据与react组件生命周期
处理异步、动态显示ajaxcallback回调函数程序栈stack, 先进后出原创 2021-09-05 17:36:29 · 396 阅读 · 0 评论 -
【React】React Event事件处理
React事件处理<button className = {styles.button} onClick = {(e) => { this.setState({ isOpen: !this.state.isOpen }); }}> 购物车2件</button> 给any添加自动映射tsconfig.json{ "compilerOptions": { "noImplicitAny": false }}添加事件处理函原创 2021-09-01 09:16:29 · 738 阅读 · 1 评论 -
【React】子组件向父组件传值
React子组件如何向父组件传值？可以在父组件中创建一个方法，将其传递给子组件，并在每次子状态更改时从props调用它，并将状态保留在子组件中代码案例子组件：import React, { useState } from "react";function EnhancedTable({parentCallback}) { const [count, setCount] = useState(0) const clickCount = () => { cons原创 2021-08-20 08:26:07 · 848 阅读 · 0 评论 -
【React.js】之 React-router
React-routerhash 模式（默认），如 http://abc.com/#/user/10H5 history 模式， 如 http://abc.com/user/20后者需要 server 端支持，因此无特殊需求可选择前者路由配置（动态路由、懒加载）原创 2021-08-06 09:08:46 · 166 阅读 · 0 评论 -
【HTML+CSS】之CSS布局
常用布局方式table 表格布局float 浮动 + margininline-block 布局flexbox布局1.flexbox 布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2021-08-06 08:47:07 · 505 阅读 · 0 评论 -
【React.js】之性能优化
React 性能优化SCU 默认返回true, 即 React 默认重新渲染所有组件必须配合 “不可变值” 一起使用可先不用SCU, 有性能问题时再考虑使用ShouldComponentUpdateshouldComponentUpdate(nextProps, nextState) { if(nextState.count !== this.state.count) { return true // 可以渲染 } return false // 不重复渲染}代码案例原创 2021-07-25 17:14:21 · 162 阅读 · 1 评论 -
JQuery实现to do list
JQuery实现 to do list代码案例$(function() { $('#title').on('keydown', function(event) { // 按下回车键保存代办事项 if (event.keyCode == 13) { // 先读取本地存储原来的数据 var local = getData(); // 更新 local 数组，追加数据 lo原创 2021-07-14 07:37:04 · 799 阅读 · 0 评论 -
【前端自动化框架】Jest
Jest性能功能易用性jest框架速度快，api简单，易配置，隔离性好，监控模式，IDE整合，Snapshot, 多项目并行，覆盖率，Mock丰富jest帮助我们完成单元测试(模块测试)、集成测试(多个模块测试)安装jestnpm install jest@24.8.0 -D测试jestpackage.json"scripts": { "start": "react-scripts start", "build": "react-scripts build",原创 2021-07-07 00:31:07 · 192 阅读 · 0 评论 -
【React.js】之异步组件
异步组件import()React.lazyReact.Suspense代码实例import React from 'react'const ContextDemo = React.lazy(() => import('./ContextDemo'))class App extends React.Component { constructor(props) { super(props) } render() { retur原创 2021-07-04 19:20:32 · 152 阅读 · 0 评论 -
【React.js】Portals
Portals组件默认会按照既定层级嵌套渲染如何让组件渲染到父组件外？使用场景overflow: hidden父组件 z-index值太小fixed需要放在body第一层级代码案例import React from 'react'import ReactDOM from 'react-dom'import './style.css'class App extends React.Component { constructor(props) { supe原创 2021-07-01 23:17:06 · 144 阅读 · 1 评论 -
【Git】Git的常用操作
GITgit调试工具抓包webpackbabellinux常用命令什么是git最常用的代码版本管理工具大型项目需要多人协作开发，必须熟悉gitMac OS自带git命令，windows可去官网下载安装git服务端常见的有github coding.net等大公司会搭建自己的内网git服务常用git命令git add .git checkout xxxgit commit -m "xxx"git push origin mastergit pul原创 2021-06-26 12:15:07 · 111 阅读 · 0 评论 -
【React.js】之state的使用
React中有两种组件写法，一种是class组件，一种是函数组件。1.类组件写法import React from "react";class ClickCounter extends React.Component { constructor() { super() // 定义 state this.state = { count: 0 } // 绑定this this原创 2021-06-25 09:04:37 · 321 阅读 · 0 评论 -
【React】Antd - step组件的使用
Antd 完成 step 组件代码案例：index.tsx <div className="steps"> <Steps current={curRecNodeInd} size="small"> {reconcileNodeList.map((item: any, idx: number) => ( <Step key={`${item.index}-${i原创 2021-06-24 12:00:13 · 2772 阅读 · 0 评论 -
【React Hook】之useImerpativeHandler
作用：将函数内的方法返回给ref绑定的组件类组件写法：利用ref, 在父组件中调用子组件事件Hello.jsimport React, {Component} from 'react'export default class Hello extends Component { handler = () => { alert('Hello world') } render() { return ( <原创 2021-06-23 09:19:02 · 439 阅读 · 1 评论 -
【React.js】之组件传值
1.父子组件之间通讯props 传递数据props 传递函数props 类型检查2.状态提升把 数据 存储在父组件，向子组件层层传递3.React实现to do listimport React from 'react'import PropTypes from 'prop-types'class Input extends React.Component { constructor(props) { super(props) t.原创 2021-06-23 08:10:11 · 221 阅读 · 0 评论 -
【React.js】如何使用ant design树形组件
树形组件涉及到层层递归的模式，因此需要用到深度优先遍历dfs, 树的数据结构在前端开发中十分重要。代码案例：const { Tree } = antdconst { TreeNode } = treeconst json = [ { title: "一", key: "1", children:[{title:"三", key: "3", children:[]}] }, { title: "二", key: "2", child原创 2021-06-22 09:22:09 · 580 阅读 · 0 评论 -
【React.js】之表单的使用
React.js中如何使用表单？import React from 'react'class FormDemo extends React.Component { constructor(props) { super(props) this.state = { name: '夹心', info: '个人信息', city: 'nanjing', flag: tru原创 2021-06-22 00:14:28 · 205 阅读 · 0 评论 -
【Reactjs】多层展示报表信息
需求：从后端返回的数据为层层嵌套的树状结构，前端如何层层遍历并展示?json 文件items: [ { fieldName: 'allFlowMoney', fieldChineseName: '本期账单消费', totalFee: 0, existRebateReport: false, subItems: [ { fieldName: 'fltConMoneyHasPost',原创 2021-06-12 15:37:17 · 367 阅读 · 0 评论 -
【Reeatjs】JSX的基本使用、条件渲染与列表渲染
JSX的基本使用import React from 'react'class JSXBaseDemo extends React.Component { constructor(props: any) { super(props) this.state = { name: '双越', imgUrl: 'https://img1.mukewang.com/5a9fc8070001a82402060220-140-原创 2021-06-20 22:11:14 · 174 阅读 · 0 评论 -
【React.js】之Context
在大型项目中公共信息(语言、主题) 如何传递给每个组件?用props过于繁琐用redux小题大做import React from 'react'// 创建 Context 填入默认值（任何一个 js 变量）const ThemeContext = React.createContext('light')// 底层组件 - 函数是组件function ThemeLink (props: any) { // const theme = this.context // 会报错。原创 2021-06-19 22:51:29 · 157 阅读 · 1 评论 -
React获取DOM节点之useRef
React Hook可以利用useRef获取DOM节点代码animport React, { useEffect, useRef } from 'react'function UseRef() { const btnRef = useRef(null) // 初始值 useEffect(() => { console.log(btnRef.current) // DOM 节点 }) return <div>原创 2021-06-19 21:01:59 · 1906 阅读 · 0 评论 -
React 数据改变后页面没有重新渲染
小小的一个前端关注0.1012021.01.21 11:29:47字数 151阅读 2,864页面通过render渲染，通过setState改变数据但是页面并未改变。（记录）const obj = this.state.obj;obj.forEach((e) =>{ 改变了对象的值});this.setState({ obj});此时页面并未改变解决方法：浅拷贝方式获取对象并修改再赋值。const obj = [...thi...原创 2021-06-19 13:44:02 · 9151 阅读 · 1 评论 -
【React.js】实现下拉列表多级联动、与优先级添加、删除功能
需求：下拉列表第一级选中的，二级不能再选中，三级不能选中一二级选中的，以此类推原创 2021-06-18 09:13:31 · 2160 阅读 · 0 评论