React
文章平均质量分 51
zlzbt
写代码的小菇凉
展开
-
使用TypeScript编写npm package
tsdx 官方仓库:https://github.com/jaredpalmer/tsdx。原创 2023-03-01 20:02:39 · 282 阅读 · 1 评论 -
使用pixi绘制呼吸灯
使用pixi绘制呼吸灯原创 2022-12-12 16:41:01 · 273 阅读 · 0 评论 -
状态管理使用样例
状态管理使用样例原创 2022-11-30 11:46:53 · 786 阅读 · 1 评论 -
点击更新进度条位置
进度条位置根基点击实时更改原创 2022-09-15 15:59:32 · 143 阅读 · 0 评论 -
eventing-bus详解
事件总线 eventing-bus安装1.Node.jsnpm install --save eventing-bus2.Webpack:yarn add eventing-bus3.NPMnpm install --save eventing-bus订阅事件import EventBus from 'eventing-bus'const callback = (name) => { console.log(`Hello, ${name}!`) };EventBus.on("原创 2021-05-28 18:18:18 · 271 阅读 · 1 评论 -
Module build failed (from ./node_modules/source-map-loader/dist/cjs.js): TypeError: this.getOptions
错误图示如下执行 `npm run build` 的时候报错查了很久的资料只需要修改 webpack.config.js 中的rules修改如下原创 2021-05-18 15:05:33 · 3491 阅读 · 1 评论 -
新手搭建 ts + react + webpack 项目
新手搭建 ts + react + webpack 项目第一步安装依赖添加TypeScript配置文件开始编写代码创建一个webpack配置文件打包执行重点来了,小白千万别走第一步初始化项目结构:mkdir projcd projmkdir srccd srcmkdir componentscd ..npm ini安装依赖首先确保已经全局安装了Webpack。 npm install -g webpack现在我们添加React和React-DOM以及它们的声明文件到packa原创 2021-05-13 10:52:18 · 1747 阅读 · 7 评论 -
2020前端面试总结(持续更新)
目录1: 常见的数据类型 以及基本(原始)数据类型和引用数据类型的区别2: 闭包的优缺点3:解释一下原型和原型链4: 优化前端性能的方法5: 解释一下axios 和 await6: promise有几个状态 分别是什么7: promise 是异步还是同步8: new 一个构造函数的时候都做了什么9: display: none 和 class="hidden" 的区别10:标准的盒子模型11:伪类选择器什么时候会用到 ,为什么要用伪类选择器12: 如何解...原创 2020-06-18 16:32:04 · 15094 阅读 · 22 评论 -
浅谈props 以及 什么是纯函数
当 React 遇到一个代表用户定义组件的元素时,它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。function Welcome(props) { return <h1>Hello, {props.name}</h1>;}const element = <Welcome name="China" />;ReactDOM.render( element, document.getElementById原创 2020-09-11 10:31:27 · 489 阅读 · 0 评论 -
React 初学笔记要点(父子组件 this stae )
首先要讲的就是 react强调的思想是面向数据编程 ,React 的核心思想是组件化的思想跟着视频从头又把react学习了一遍,巩固了一下基础下面就来说一下在学习过程中认为比较重要的点吧1:什么是组件组件被我简单的理解成 就是类 。自定义的一个组件必须要继承react的组件 即React.Component 才能变成react的一个组件,这是规定没有原因classTodoListextendsReact.Component{}export default TodoList;...原创 2020-07-16 15:17:08 · 305 阅读 · 0 评论 -
创建react 项目时遇到 name can no longer contain capital letters 问题
小编本来想从头再次搭建一个react 项目,没想到在一开始使用脚手架工具的时候就遇到问题了当我输入 npx create-react-app reactProgram 时给我报了一个错name can no longer contain capital letters原来时因为项目命名不能有大写字母,怪不得 脚手架推荐的都是 npx create-react-app my-app项目命名更改成小写字母就ok 了。你会了吗 .^^....原创 2020-07-05 13:47:26 · 2093 阅读 · 0 评论 -
简单搭建一个react 并可以启动
create-react-app是一个react工程脚手架,可快速构建一个react应用。内置webpack、babel、es6等特性,开发者无需关注配置,关注业务模块的开发即可1、打开cmd命令行窗口,输入npm -v,查看当前的npm版本2、如果npm版本是5.2以上版本,在cmd中输入 npx create-react-app my-app,当前目录下创建一个名为my-app的工...原创 2020-04-15 18:20:52 · 622 阅读 · 0 评论 -
hooks初入门了解
什么是Hooks?总结起来就是hooks提供了在react函数组件中也可以使用类组件的state和生命周期的能力。为什么要用Hooks?组件嵌套问题之前如果我们需要抽离一些重复的逻辑,就会选择 HOC 或者 render props 的方式。但是通过这样的方式去实现组件,你打开 React DevTools 就会发现组件被各种其他组件包裹在里面。这种方式首先提高了 debug 的难...原创 2021-04-01 17:39:57 · 278 阅读 · 0 评论 -
判断当前元素是否是获取焦点状态
下一个节点自动获取焦点遇到的坑简介activeElement属性activeElement 属性返回文档中当前获得焦点的元素。小编在写react 的过程中遇到了一点坑,由于自己写了一个时间控件,选择完年份之后自动跳到月份的选择框上是的月份选择框自动获取焦点const nextFocusDomNode = ReactDOM.findDOMNode(this.refs[nextF...原创 2019-06-05 14:53:04 · 6304 阅读 · 0 评论 -
React bind(this) 参数详解
<span onClick={this.historyMaterial.bind(this, materialName)} className={'label label-warning materialStatus'}>材料已更新点击查看历史材料</span>此时想 把参数 materialName 传递给方法 historyMaterial在查询资料之前一...原创 2020-03-11 16:03:31 · 942 阅读 · 0 评论 -
概述 React 生命周期
第一个是组件初始化(initialization)阶段也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类,也就继承这个react的基类,才能有render(),生命周期等方法可以使用,这也说明为什么函数组件不能使用这些方法的原因。super(props)用来调用基类的构造方法( constructor() ), 也将父组件...原创 2019-06-04 15:06:57 · 121 阅读 · 1 评论 -
原生js找到指定父元素获以及取指定节点的属性
语法: dom.closest(指定父元素的标签名)currentTargetDom.closest('li.thisClickInfoLi');saveExpressDeliveryMethod = (evt) => { const currentTargetDom = ReactDOM.findDOMNode(evt.currentTarget); if(!cu...原创 2019-05-09 20:38:26 · 10045 阅读 · 0 评论 -
原生js动态添加元素
div.insertAdjacentElement("beforeBegin", document.createElement("p")); //在div之前添加p元素div.insertAdjacentElement("afterBegin", document.createElement("p")); //div所有子元素之前div.insertAdjacentElement("be...原创 2019-05-08 15:48:04 · 5490 阅读 · 0 评论 -
React 中的元素、组件、实例和节点
React 元素其实就是一个简单JavaScript对象,一个React 元素和界面上的一部分DOM对应,描述了这部分DOM的结构及渲染效果。一般我们通过JSX语法创建React 元素,React 元素可以分为两类:DOM类型的元素和组件类型的元素。DOM类型的元素使用像h1、div、p等DOM节点创建React 元素,前面的例子就是一个DOM类型的元素;组件类型的元素使用React 组件创建...原创 2019-04-26 12:58:13 · 985 阅读 · 0 评论 -
React组件中的this
构造函数内绑定 this在构造函数constructor内绑定this,好处是仅需要绑定一次,避免每次渲染时都要重新绑定,函数在别处复用时也无需再次绑定通过bind方法或者箭头函数来强制绑定thisrender函数中的this指向了组件实例通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this:import React from 'reac...原创 2019-04-28 18:20:03 · 802 阅读 · 0 评论