![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
zlq_csdn
有志者自有千计万计,无志者只感千难万难。
展开
-
React中super(props)和super()以及不写super()的及ES6和ES5的区别
一、constructor和super的基本含义constructor() – 构造方法这是es6中的类的默认方法,通过new命令生成对象实例自动调用的方法。并且,该方法是类中必须要有的,如果没有显示定义,则会默认添加空的constructor()方法。super() – 继承在class方法中,继承是使用extends关键字来实现继承的。子类必须在constructor()中调用super()方法,否则新建实例时会报错。报错的原因是,子类是没有自己的this对象的,它只能继承父类的this对转载 2020-08-14 09:07:29 · 858 阅读 · 0 评论 -
React 组件通信(发布者和订阅者模式)
// eventProxy.js'use strict';const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn) { if(this.onObj[key] === undefined) { this.onObj[key] = []; } this.onObj[key].push(fn); }, one: function(key, fn) { if(this.on转载 2020-07-19 09:29:35 · 642 阅读 · 0 评论 -
npm和 npx 的区别
前言: 在接触学子 React 的时候,创建react应用项目使用的命令是 npx create-react-app my-app,有些奇怪,为什么为添加 npx 呢? 其实写法是正确的,npx 不是拼写错误,它是 npm 5.2+ 附带的 package 运行工具。注意:NPM实际上自身不能去运行任何包,如果你想去执行某个包,必须在package.json文件中去定义。当通过NPM安装Node包,NPM会在node_modules下的.bin里创建一个软链接。本地安装链接会放到./node_m.原创 2020-07-18 18:55:22 · 848 阅读 · 0 评论 -
create-react-app 构建的项目中配置proxy
前言: 目前项目开发中大都采用的是完全前后端分离开发模式,各自独立进行开发,虽然最后前后端都会部署到同一台服务器上,但在开发过程中前后需要进行联调,这个过程难免会遇到跨域问题。解决跨域问题:使用 react 脚手架 create-react-app 搭建react基础项目。运行 npm run eject 展开项目中的详细配置注意:项目中只能执行一次,展开后不可恢复;如果项目需要相关配置文件,建议刚开始执行。create-react-app 版本低于 2.0 时,可以直接在 packa原创 2020-05-29 10:34:39 · 849 阅读 · 0 评论 -
React单页面应用实现div或组价高度占满屏的效果
通过浏览器调试可以这样设置样式:html, body, #root { height: 100%;}问题:这样设置可以实现占满屏的效果,但是会对全局的组件样式产生影响。解决方案:使用绝对定位的方式,如下:.className { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}...原创 2020-04-29 14:13:32 · 1527 阅读 · 0 评论 -
yarn add node-sass 失败的解决方案
create-react-app 搭建的基本项目中,执行 yarn add node-sass 失败:解决方案:在项目的根目录下新建 .npmrc 文件进行镜像配置:phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry...原创 2020-04-29 12:37:05 · 2076 阅读 · 0 评论 -
React项目中 Eslint 配置
Eslint:是 JavaScript 的验证工具,可以在项目中形成一套规范,检测代码是否出错等。1. 安装eslint及依赖包// 全局安装npm i -g eslint// 当然也可以局部安装cnpm i -D eslintcnpm i -D eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import esli...原创 2020-04-20 11:11:09 · 2889 阅读 · 0 评论 -
React 事件处理及 this 绑定问题
React 事件处理React 事件是一个合成事件,JSX实际上是 React.createElement(component, props, ...children) 函数提供的语法糖表达方式,那么:// JSX 表达<button onClick = {this.handleClick}> Click me</button>// 经转化为React.cr...原创 2020-04-14 11:19:05 · 278 阅读 · 0 评论 -
constructor 中为什么要调用super和传递props
来自官网中的一段代码,入下:// 通过该方法将props传递到父类的构造函数中constructor(props) { super(props); this.state = {date: new Date()};}为什么调用super这并不是 react 的限制,是 js(ES6) 的限制,ES6中 class 的 this 指向问题,ES6中类的继承需要先调用拿到当前实例的...原创 2020-04-13 21:03:07 · 1345 阅读 · 1 评论 -
react 之 create-react-app 启动命令 npm run eject
前言:使用 create-react-app 初始化 react 项目时:初始化后项目文件只有:node_modules 是各个依赖存放的位置public 用来存放静态资源,其不参与构建src 项目源码文件,一般开发就在该目录下扩展,并参与构建package.json 文件默认只有三个依赖:react、react-dom、react-scripts,其他如 webpack 、b...原创 2020-04-10 21:17:02 · 938 阅读 · 0 评论 -
JavaScript----什么是纯函数
定义简单来说,一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。这么说肯定比较抽象,我们把它掰开来看:函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用const a = 1const foo = (b) => a + bfoo(2) // => 3foo 函数不是一个纯函数,因为它返回的结果依赖于外部变量 a,我...转载 2020-04-09 15:07:23 · 160 阅读 · 0 评论 -
create-react-app慢的解决方法
create-react-app慢的解决方法在操作官方实例Create React App时,需要执行指令:create-react-app my-app来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch解...转载 2019-09-08 22:30:23 · 508 阅读 · 0 评论 -
解决Module build failed: BrowserslistError: Unknown browser query `dead`的问题
...转载 2019-09-07 16:16:19 · 7985 阅读 · 1 评论 -
yarn的安装和使用
yarn的简介:Yarn是facebook发布的一款取代npm的包管理工具。yarn的特点:速度超快。 Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。 在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。 使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上...原创 2019-07-02 11:46:09 · 341 阅读 · 0 评论 -
React相关总结
react中几个核心概念虚拟DOMDOM的本质是: 浏览器中的概念,用js对象表示页面上的元素,并提供了操作DOM元素的API。React中的虚拟DOM是: 是框架中的概念,是程序员用js对象来模拟页面上的DOM和DOM嵌套。使用虚拟DOM的目的: 为了实现页面中的DOM元素的高效更新。虚拟DOM和ODM二者间的区别:浏览器提供的概念,用js对象来表示页面中的元素,并未元素提供了相...原创 2019-07-11 15:15:58 · 334 阅读 · 0 评论 -
Fatal error: ENOSPC: System limit for number of file watchers reached, watch '...path...'
某前端工程在 Ubuntu18.04 系统环境中运行 npm run dev 命令时出现如下错误解决方案在终端按顺序执行下面两个命令即可解决问题echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -psudo sysctl --system这种问题不是...原创 2019-07-06 15:59:47 · 1206 阅读 · 1 评论 -
Ubuntu系统启动react项目
具体步骤:首先我们需要从别人的git上clone下项目,这时候的项目中是没有项目依赖包的。以 zlq-project 为例cd zlq-projectsudo npm install //必须是在 sudo 下安装包此时需要保证 Ubuntu 系统下安装了 node 和 npm。 (需要保证两个版本是新版本,注意版本的升级)以管理员身份安装 mongodb 数据库连接...原创 2019-07-06 16:18:25 · 1111 阅读 · 0 评论 -
React生命周期函数
生命周期函数指: 在某一个时刻会自动执行的函数图解://组件即将挂载到页面上的时候被执行的方法(组件第一次挂载的时候执行)componentWillMount(){ console.log('componentWillMount');}//页面渲染到页面上的时候执行render(){ console.log('render'); return <div></d...原创 2019-07-07 11:47:29 · 373 阅读 · 0 评论 -
React ant design表格导出数据为EXCEL表格数据
需求:将表格数据导出为EXCEL表格数据。环境:React+Ant Design步骤:安装插件 js-export-excel 官方查看yarn安装-记得以管理员身份执行yarn add js-export-excel npm安装npm install js-export-excel一、代码示例页面先引入安装的插件import Expo...转载 2019-07-27 17:07:50 · 444 阅读 · 0 评论 -
react、redux、react-redux之间的关系
React一些小型项目,只使用 React 完全够用了,数据管理使用props、state即可,那什么时候需要引入Redux呢?当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 E...转载 2019-07-27 17:16:11 · 142 阅读 · 0 评论 -
window、Ubuntu系统下拉取项目并运行起来
以下以我自己的经历来做的总结,可能与大家遇到的问题不太相同.从远程git上拉取项目,并在本地跑起来的步骤:拉取项目(项目用到了node 、mongo环境)git clone [git上远程路径]git clone -b [分支名称] [git上远程路径]安装node、npm注意:版本要选择高一些的哦,电脑中之前有的话,可以直接通过更新命令来更新。项目中用到了mongo数据库,...原创 2019-07-27 19:13:01 · 542 阅读 · 0 评论 -
Redux相关总结(数据层框架)
Redux工作流程如下:原创 2019-07-07 20:13:19 · 212 阅读 · 0 评论