关注
分享
文章平均质量分 52
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高
I-T枭
这个作者很懒，什么都没留下…
展开
-
React 中 setState的对象、数组的操作时是不能用类似array.push()等方法
运用在React 中setState的对象、数组的操作时是不能用类似array.push()等方法，因为push没有返回值，setState后会出现state变成Number，为了方便他人和自己查看，因此写个数组和对象的操作方法小笔记。 // 1、修改object中某项this.setState({ object: {...object, key: value}}); //...原创 2020-03-17 15:16:36 · 5129 阅读 · 0 评论 -
fetch各种报跨域错误,数据无法获取的解决方案
1、介绍 fetch 提供了一个获取资源的接口 (包括跨域)。 fetch 的核心主要包括：Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 promise 的2、用法 1 2 3 4 5 6 7 8 varr...转载 2020-03-15 22:32:47 · 3624 阅读 · 0 评论 -
React Navigation2.0配置createBottomTabNavigator
// In App.js in a new projectimport React,{ Component } from 'react';import { View, Text ,StyleSheet,Image} from 'react-native';import { createStackNavigator,createBottomTabNavigator } from 'rea...原创 2020-03-09 14:05:54 · 268 阅读 · 0 评论 -
react-router-dom动态渲染路由
module.jsimport React from 'react';export function Home() { return <h2>Home</h2>;}export function About() { return <h2>About</h2>;}export function Users() {...原创 2020-03-06 17:56:32 · 2484 阅读 · 1 评论 -
React-Native项目中使用Redux
前言网上别人的文档都是 直接 就是上reduxredux-thunkreact-redux,immutable这样的一套,这个有经验的看还行,新手看就很吃力了,需要了解一步一步的安装redux达到开发要求我觉得这需要一个学习的过程,拔苗助长不是好事这是我写项目的逐步搭建的过程,欢迎查看源代码github-pinduoduoRedux安装redux(后面再安装(react-...原创 2020-02-12 20:08:12 · 379 阅读 · 1 评论 -
React Mixin 的使用
update: Mixin 只适用于 ES5。如果你的项目里面用的是 ES6 ，可以采用高阶组件点击预览来实现 Mixin 的功能。我使用React.js构建大型项目已经有一段时间了，我遇到过很多在不同的组件中都要用到相同功能的情况。因此，我花了一个小时左右的时间去了解mixin的用法，然后分享我所学习到的一些东西。为什么使用 Mixin ？React回避子类组件，但是我们知道...转载 2020-02-07 12:13:49 · 482 阅读 · 0 评论 -
React获取真实dom的几种方式？
原生方法也就是通过document.getElement获取，可以自己添加className或者id方便获取dom，不多赘述ref方式ref原生当你使用ref直接是在原生标签上使用的时候// 1. reflet divNode = this.refs.div;// 2. ref 方法let spanNode = this.span// 3. creatRefl...转载 2020-02-07 10:55:48 · 1715 阅读 · 0 评论 -
react遍历Route处理
遍历Route引发的React Route路由失效问题探究route.jsimport Account from '../component/auth/admin/list';import Role from '../component/auth/role/list';import Estatebill from '../component/bill/estate/index';i...原创 2020-01-02 18:18:39 · 1708 阅读 · 0 评论 -
webpack(create-react-app=>dotenv.cli)针对不同环境使用不用接口地址的适配问题
项目中使用了create-react-app搭建的项目，package.json中用的react-app-rewired方式，由于webpack没有被释放，不能在webpack的配置文件直接配置适配，所以针对build 的dev，test, production环境取不同的接口地址，就不是很方便。（create-react-app默认情况下，webpack的配置是对dev ，productio...原创 2019-12-27 10:59:52 · 1960 阅读 · 1 评论 -
react禁止图片拖动下载
<div style={{ padding: '0px', height: 80 }}> <img src={wlogo} className="menuLogoIco" alt="" onClick={this.reloadSystem.bind(this)} onDragStart={ (e) => { if (e && e.preve...原创 2019-12-03 17:35:22 · 661 阅读 · 0 评论 -
React高级-PropTypes校验传递值
PropTypes的简单应用我们在Xiaojiejie.js组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用PropTypes限制的。在使用需要先引入PropTypes。import PropTypes from 'prop-types'引入后，就可以在组件的下方进行引用了，需要注意的是子组件的最下面（不是类里边），写入下面的代码：XiaojiejieItem....转载 2019-11-20 11:25:47 · 309 阅读 · 0 评论 -
Fragment标签讲解
加上最外层的DIV，组件就是完全正常的，但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了，为我们准备了<Fragment>标签。要想使用<Fragment>，需要先进行引入。import React,{Component,Fragment } from 'react'...原创 2019-11-20 10:11:20 · 1352 阅读 · 0 评论 -
React面试核心要点总结
一、重新认识render原创 2019-11-19 10:03:36 · 152 阅读 · 0 评论 -
React项目如何打包发布及遇到的坑
使用React开发有一段时间了，下面我就把自己一些心得体会分享给大家。我使用的是create-react-app脚手架生成的项目，这个脚手架一键生成react项目，非常方便，先简单记录一下这个新建项目的过程。一、打包在项目路径下，敲npm run buil，就出现了build文件夹，同时终端显示这些文字：大致意思是：已经编译好啦。build生成的这些东西要放在服务器root下，可以在p...转载 2019-11-18 17:27:43 · 791 阅读 · 0 评论 -
浏览器-安装 react-devtools
说在前面：这个插件的安装教程网上能找到不少，我就想问一句：你们自己写的教程，你们照着教程能安装成功吗，你们安装过吗，对你们无fuck说，坑！开始干货：React Dev Tools现在的版本支持chrome和Firefox，但目前对Firefox的支持仍不是很好，建议用chrome，那么问题来了，Google被墙了，普通方法安装已经行不通了，需要先从GitHub上下载源码包进行编译安装。...原创 2019-11-18 10:58:26 · 717 阅读 · 0 评论 -
react 性能优化注意事项
工具：React 16或更新版本 只需在url后边加 ?react_perf后performance一栏中会添加 User Timing devtool分析 state、props 、组件树、redux store数据； profiler工具能分析具体函数； Timeline工具跟 User Timing大同小异；优化点：父组件更新默认触发所有子...原创 2019-11-14 14:55:17 · 89 阅读 · 0 评论 -
React中this值绑定和事件函数传参
Javascript中的this值总是能让很多初学者感到困惑，总的来说this值就是指向调用函数的那个对象。但是call,apply,bind方法和ES6中箭头函数让this值还是要具体情况具体分析，不过这块知识点并不是很难，对应的博客也很多，花点时间就能掌握。接下来主要介绍React中this值绑定和事件函数传参。React中this值绑定React中也有this值的绑定问题，接下来...转载 2019-11-14 11:26:39 · 477 阅读 · 0 评论 -
React组件性能优化总结
性能优化的思路影响网页性能最大的因素是浏览器的重排(repaint)和重绘(reflow)。React的Virtual DOM就是尽可能地减少浏览器的重排和重绘。从React渲染过程来看，如何防止不必要的渲染是解决问题的关键。性能优化的具体办法1. 尽量多使用无状态函数构建组件无状态组件只有props和context两个参数。它不存在state，没有生命周期方法，组件本身即...原创 2019-11-13 10:45:23 · 163 阅读 · 0 评论 -
React 数据为什么要使用immutable方式(PureRenderMixin封装)？
深复制与浅复制let obj = { a: 1, arr: [1, 2]};let obj1 = obj; //浅复制obj1.a = 2console.log(obj) // { a:2, arr: [1,2] };//同样的方式let obj = { a: 1, arr: [1, 2]};let obj2 = deepCopy(obj); //深复制obj2.a = 2cons...原创 2019-11-12 14:34:20 · 224 阅读 · 0 评论 -
react-custom-scrollbars样式
首先npm i react-custom-scrollbars安装所需模块import ScrollView from 'react-custom-scrollbars';把需要滚动加载的部分放到ScrollView中<ScrollView onScroll={this.onScroll}> 。。。</ScrollView>onScroll ...转载 2019-11-12 09:28:42 · 4086 阅读 · 0 评论 -
react使用Immutable实战
1. 与 React 搭配使用，Pure Render熟悉 React 的都知道，React 做性能优化时有一个避免重复渲染的大招，就是使用 `shouldComponentUpdate()`，但它默认返回 `true`，即始终会执行 `render()` 方法，然后做 Virtual DOM 比较，并得出是否需要做真实 DOM 更新，这里往往会带来很多无必要的渲染并成为性能瓶颈。当然我们...原创 2019-11-11 16:54:23 · 687 阅读 · 0 评论 -
Vue（MVVM）、React(MVVM)、Angular(MVC)对比
前言昨天阿里内推电面一面，面试官了解到项目中用过Vue，就问为什么前端框架使用Vue而不适用其他的框架，当时就懵了。因为只用过Vue，不了解其他两个框架，今天就赶紧去了解一下他们之间的区别。大家发现如果本文中哪个地方不对，欢迎来访。React与Vue对比相似点： 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 ...转载 2019-11-11 16:26:50 · 162 阅读 · 0 评论 -
React怎么绑定键盘事件
方法1，直接绑定在原生事件上，这个一般是用来捕捉编辑的时候的事件，用的不多<textarea onKeyDown={e=> console.log( e.keyCode ) } />方法2，通过声明周期直接绑定到document的事件上，这个方式一般用来做快捷键比较多export class KeyBind extends React.Component { ...原创 2019-11-11 10:51:29 · 1552 阅读 · 0 评论 -
什么时候create-react-app会混淆或缩小代码？
React在构建期间缩小代码并生成源映射。JS最终被认为是缩小产品的副产品，而不是因为保密。这样，最终用户能够比不缩小脚本更快地加载脚本，并且当您（或他们）打开开发人员工具时，您（以及其他所有人）可以浏览原始代码。如果您build/static/js在构建后查看目录，则有成对.js和.map文件。JS文件随您的网站一起加载，并且.map在打开Developer Tools时按需加载文件。...原创 2019-11-04 17:39:43 · 2552 阅读 · 0 评论 -
redux react-redux 示例的快速上手体验
1.redux要知道redux和react并没有半毛钱的关系，redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。所以呢，学习react-redux之前我们要比较熟悉的了解redux的思想。本文比较直接，不来虚的，直接上代码：首先就很熟悉了1 使用官方脚手架create-react-app redux-demo2 环境搭建...原创 2019-10-25 11:52:33 · 156 阅读 · 0 评论 -
react map遍历时事件无效
import React from 'react';import './Left.css';const menuArr_ = ['用户管理', '用户登录', '房源管理', '财务管理'];class Left extends React.Component { constructor(props) { super(props); this.s...原创 2019-10-24 17:29:08 · 371 阅读 · 0 评论 -
使用npx(creact-react-app) 构建项目后-npm start启动报错
使用create-react-app创建的React项目时，有时在安装完其他组件后，再次运行 npm start 命令时会报以上错误，让我很郁闷，不过在上网搜了这个错后原来：是create-react-app有丢包的缺陷，手动安装包后，需要重新npm install一下，这样node_modules/.bin/目录下才会重新出现react-scripts的文件，这样npm start命令才...原创 2019-10-24 14:27:51 · 1982 阅读 · 0 评论 -
React性能提升
了解react如何提升性能将有助于我们更好的编写代码。个人认为react中很多的性能优化，其实都是围绕着react的核心diff算法来展开的，通过优化，减少diff算法中一些不必要的步骤，从而来提高性能。下面是我平时开发总结出来的一些经验。Component与PureComponent一般来讲，很多人都是使用的Component，但是会带来一个问题，那就是在父组件的props或者state...转载 2019-09-16 10:34:44 · 148 阅读 · 0 评论 -
React的Sass配置
2019/3/11更新从react-scripts 2.0.0开始就支持直接配置sass了！转载 2019-09-02 14:47:43 · 297 阅读 · 0 评论 -
我们一起踩过的坑----react（antd）
1.this问题对应写法1)this.handleChange = this.handleChange.bind(this) //如果不写这个，必须要用箭头函数 handleChange(e) {this.setState({temperature: e.target.value});} 2)handleChange=(e)=> {this.setStat...转载 2018-12-26 11:07:11 · 3315 阅读 · 0 评论 -
react如何使用base64图片
原图如下：var baseImg='data:image/png;base64,图片base64编码' <img src={img_base} style={{ width: 130, height: 'auto', borderRadius: 30,margin:'0 auto',display:'block'}} />使用react-base64后效果图如下：so easy!...原创 2018-06-07 11:46:12 · 11374 阅读 · 5 评论 -
React中setState修改深层对象
在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的:state = { list: { objA: { name: 'A', age: 20 }, objB: { ...转载 2019-09-16 14:29:53 · 1103 阅读 · 0 评论 -
npx create-react-app my-app 安装报错
问题简述 根据react文档上安装命令行npx create-react-app my-app,但是出现报错信息。信息如下dell@dell-PC MINGW64 /e/demo$ npx create-react-app my-appnpm ERR! code ENOLOCALnpm ERR! Could not install from "Files\nodejs\node_c...转载 2019-09-30 14:22:59 · 2961 阅读 · 0 评论 -
create-react-app创建失败
执行命令 create-react-app命令：但是执行了好久，安装了好久，当你以为成功的时候。不好意思，他不仅罢工了，连之前话很长时间安装的都delete了，delete，delete了。。。。不说了，要不，你乖乖的改改安装的源吧，因为他默认调用的npm命令。查看npm源的命令：npm config get registry设置方法：npm config set registr...原创 2019-09-30 15:16:41 · 499 阅读 · 1 评论 -
yarn create react-app my-app(mac)不成功
当我用yarn安装项目时，报错如下：参考：https://www.jianshu.com/p/5cb4f48ed11b另，请参考：http://quabr.com/53025664/error-eslint5-6-0-the-engine-node-is-incompatible-with-this-module-when-try设置yarn如下：yarn config set...原创 2019-09-30 15:28:01 · 1380 阅读 · 0 评论 -
在 Create React App 中启用 Sass 和 Less
本文介绍了如何在 Create React App 脚手架中启用 Sass 和 Less。前言关于创建 create-react-app 项目请查看： create-react-app 的安装与创建。关于在 less 和 sass 如何在 create-react-app 启用 CSS Modules，请查看我的上一篇文章：在 Create React App 中使用 CSS Modu...原创 2019-10-10 10:28:48 · 119 阅读 · 0 评论 -
babel-plugin-import配置babel按需引入antd模块，编译后报错.bezierEasingMixin()
用create-react-app做项目的时候，同时引入了antd，为了实现按需加载antd模块，用到他们提供的babel-plugin-import（ 一个用于按需加载组件代码和样式的 babel 插件）虽然项目一开始是用create-react-app创建，但是之后有 yarn run eject，将所有内建的配置暴露出来，这样可以自由重新配置webpack，至于为什么要这...转载 2019-10-10 17:30:32 · 1059 阅读 · 0 评论 -
一看就懂的ReactJs入门教程-精华版
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScri...转载 2018-12-26 10:59:05 · 552 阅读 · 0 评论 -
前端开发环境的安装、搭建及配置
干货( Dry goods？)node.js brew(just for mac) ruby npm cnpm yarn git webpack bower browser-sync express gulp grunt sass vue angular react cutterman(填坑中) 待续...node.jsWindow官网下载地址：下...转载 2018-12-30 01:14:55 · 9496 阅读 · 0 评论 -
react的map循环嵌套
var btnType=Object.keys(obj).map((key,i)=>{ var item=obj[key].map((s,index)=>{ return ( <button className={styles.btnType} key={index}>{obj[key][index]}</button> ...原创 2018-08-14 10:04:06 · 1921 阅读 · 0 评论