![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React.js
承蒙时光不弃1769203735
hello world!
展开
-
react调试工具与调试方法
react开发的调试方式借助以下插件进行调试。 Redux DevTools React Developer Tools React Perf F12 之后,在源代码处打断点。 像用 IDEA 调试 Java 代码一样,用 WebStorm 调试 react 代码,直接在 WebStorm 源代码上打断点,调试起来有点象在 IDEA 下调试 Java 程序,很爽!Redux DevTools安装插件 以 qq 浏览器为例,搜索:Redux DevTools 添加相应代..转载 2020-11-07 11:10:38 · 2320 阅读 · 0 评论 -
react项目如何断点调试?
进入到相应的网页界面,然后查看Sources->Page->top->webpack://->找到react的js代码处,设置断点,进行调试转载 2020-11-07 10:51:00 · 2572 阅读 · 0 评论 -
react组件的构造方法 constructor()
react组件的构造方法 constructor()constructor(props){ super(props); this.state = { };}1 constructor必须用super()初始化this, 可以绑定事件到this2 如果你在constructor中要使用this.props, 就必须给super加参数, super(pro...转载 2019-01-10 11:28:31 · 600 阅读 · 0 评论 -
react中ref的两种使用方法
ref一共有两种使用方式回调函数形式(官方推荐) string形式第一种 回调函数形式回调函数形式一共有三种触发方式组件渲染后 组件卸载后 ref改变后import React,{Component} from 'react'export default class UserAdd extends Component{ constructor(){ ...原创 2019-01-10 11:50:14 · 461 阅读 · 0 评论 -
react中的setState的使用和深入理解
前端框架从MVC过渡到MVVM。从DOM操作到数据驱动,一直在不断的进步着,提升着, angular中用的是watcher对象,vue是观察者模式,react就是state了,他们各有各的特点,没有好坏之分,只有需求不同而选择不同。今天就着重详细的随手写点我对react中state的理解: React通过管理状态实现对组件的管理,通过this.state()方...转载 2019-04-17 11:09:45 · 574 阅读 · 0 评论 -
dva.js介绍
https://dvajs.com/数据流问题目前流行的数据流方案有:Flux,单向数据流方案,以Redux为代表 Reactive,响应式数据流方案,以Mobx为代表 其他,比如 rxjs 等到底哪一种架构最合适 React ?#目前最流行的数据流方案截止 2017.1,最流行的社区 React 应用架构方案如下。路由:React-Router 架...原创 2019-04-22 16:14:02 · 1362 阅读 · 0 评论 -
dva.js 上手
初始化安装 dva-cli 用于初始化项目:npm install -g dva-cli# 或yarn global add dva-cli创建项目目录,并进入该目录:mkdir your-projectcd your-project初始化项目:dva init然后运行 npm start 或 yarn start 即可运行项目。目录结构项目初...转载 2019-04-26 18:10:52 · 181 阅读 · 0 评论 -
React组件性能优化
React: 一个用于构建用户界面的JAVASCRIPT库.React仅仅专注于UI层;它使用虚拟DOM技术,以保证它UI的高速渲染;它使用单向数据流,因此它数据绑定更加简单;那么它内部是如何保持简单高效的UI渲染呢?React不直接操作DOM,它在内存中维护一个快速响应的DOM描述,render方法返回一个DOM的描述,React能够计算出两个DOM描述的差异,然后更新浏览器中的DO...转载 2019-05-17 09:12:05 · 119 阅读 · 0 评论 -
使用 react-intl 实现 React 组件国际化
开始之前,先了解目前常用的 React 国际化插件:The Best Libraries for React i18n。因为看上去使用方法比较简单,我先选择了 react-i18next。但是使用过程中遇到很多问题,不想继续浪费时间,于是转而使用react-intl。事实证明及时改变方案是明智的。React IntlReact Intl 用于国际化 React 组件,提供 React ...转载 2019-05-26 11:18:57 · 2062 阅读 · 1 评论 -
react-redux 中state改变,页面未重新渲染
1.问题?在redux中,通过reducer来对state的进行更新,但是我在reducer中改变了state的值,但是页面没有重新渲染,并且在控制台输出显示state的值已经改变代码:const initStore = [ { name: 'lili', blogTitle: 'nihao', blogContent...转载 2019-05-22 18:02:54 · 2624 阅读 · 0 评论 -
antd动态增减表单时Select中的value属性无效(不显示)
在antd的Select标签中,可以设置value和defaultValue。这两者的区别如下:具体可以看这个例子:https://codesandbox.io/s/hvi6z可以看到是可以通过value或者defaultValue回显数据的。但是我在把Select标签放到动态增减表单项中时,发现用这两个属性就是回显不了数据。后面得益于一篇推文,https://blog.c...原创 2019-07-04 11:07:17 · 5770 阅读 · 0 评论 -
react-router 路由的实现原理
React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。本文从两个方便来解析 react-router 实现原理。一:介绍 react-router 的依赖库history;二:使用 history 库,实现一个简单的 react-router 路由。history 介绍history 是一个 Java...转载 2019-08-14 07:43:03 · 283 阅读 · 0 评论 -
React.js解决setState的异步问题
由于react中把setState设置为异步操作函数,这有时候会给我们带来以一些问题,下面介绍一下怎么解决这个问题。1. 在setState完成的回调里执行需要的操作setState函数的第二个参数允许传入回调函数,在状态更新完毕后进行调用,譬如:this.setState({ load: !this.state.load, count: this.sta...原创 2019-08-14 17:50:28 · 2051 阅读 · 0 评论 -
react将字符串转为标签
React中将字符串转换为DOM节点React不支持直接将字符串放到render返回值中,这样放入的字符串会被当做一般字符串处理。 12345678 const App = () => { const str = '<div>test</div>'; return ( <div> ...原创 2019-08-28 14:45:26 · 3895 阅读 · 0 评论 -
react笔记--手动实现一个react-router(简易版)
前言从vue转入到react技术栈有两月了,两个月来一直断断续续学习react的知识。自己也很久没有写过总结了(恐怖的加班),趁元旦假期抽空总结一波(还是要学习地)。习惯了vue简洁的语法和api,再回过来写react组件化,不习惯有木有(怪自己太菜)。文中若有错误点,欢迎各位大佬指正react-router路由的模式选择用过react-router的会比较熟悉react路由...转载 2019-09-01 23:11:47 · 439 阅读 · 0 评论 -
Redux 入门教程,应用的状态管理器
Redux由Flux演变而来,提供几个简单的API来实现状态管理,所谓状态指的是应用数据,所以,Redux本质上是用来管理数据的。进一步,Redux配合支持数据绑定的视图库使用,就可以将应用状态和视图一一对应,开发者不需要再去关心DOM操作,只关心如何组织数据即可。由于Redux对于数据的管理拆分很细,一时间会有很多概念,并且Redux有自己丰富的生态,所以容易眼花缭乱。所以强烈建议从头开...转载 2019-01-09 15:44:13 · 109 阅读 · 0 评论 -
react中的时间戳转换成年-月-日 时:分:秒
在react中有专门的包可以转换在react中使用得先导入moment : import moment from 'moment'; npm install --save moment发表时间:{moment(Time).format("YYYY-MM-DD HH:mm:ss")}--------------------- 作者:青年邓先生 来源:CSDN 原文:http...转载 2019-01-14 16:19:32 · 2354 阅读 · 0 评论 -
在当前组件(页面)中,关闭eslint检查
在当前页面最顶部,加上如下注释/* eslint-disable */该注释下方的代码都不会再有eslint检查原创 2019-01-19 10:03:55 · 4600 阅读 · 0 评论 -
React基础——JSX语法
JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。虽然你可以完全不使用JSX语法,只使用JS语法,但还是推荐使用JSX,可以定义包含属性的树状结构的语法,类似HTML标签...转载 2018-11-21 20:09:02 · 175 阅读 · 0 评论 -
使用create-react-app脚手架创建React项目
1. 介绍在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。比如:npm install react react-dom --savenpm install babel babel-loade...转载 2018-11-22 21:33:13 · 554 阅读 · 0 评论 -
create-react-app中安装使用antd-mobile
先按照官方的教程走一遍用create-react-app创建一个项目,引入antd-mobilecreate-react-app antd-mobile-democd antd-mobile-demonpm install antd-mobile --save对入口页面(index.html)进行一些有关移动端的相关配置<script src="https://a...转载 2019-01-03 16:14:16 · 1260 阅读 · 0 评论 -
React使用className引入多个类样式
在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式。比如说有一个固定样式"title":<div className="title">标题</div>,然后还要一个点击高亮的样式:<div className={index === this.state.active ? "active" : null}>标题&l原创 2019-01-04 12:11:58 · 12515 阅读 · 0 评论 -
React父组件与子组件之间的值传递
整体代码地址:https://github.com/klren0312/react_study/blob/master/stu15/src/Father.jshttps://github.com/klren0312/react_study/blob/master/stu15/src/Son.js一、父组件向子组件传递信息将父组件的state通过props传入子组件父组件代码片段...转载 2019-01-04 20:19:07 · 456 阅读 · 0 评论 -
React在组件中监听redux中state状态的改变
解决方式:1、在组件中引入store2、在constructor构造器方法中,重写store.subscribe方法(该方法即是监听state状态改变的放过)组件完整代码如下:import React, { Component } from 'react'import CSSModules from 'react-css-modules'import { connect ...原创 2019-01-10 13:05:31 · 12145 阅读 · 1 评论 -
react生命周期的基本用法
写react也快半年了,讲一下自己对于生命周期的理解及各个生命周期的作用首先,看一下一个组件的构造import React,{ Component } from 'react';class Demo extends Component { constructor(props,context) { super(props,context) this.stat...转载 2019-01-10 20:58:36 · 124 阅读 · 0 评论 -
eslint检测报错error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style
在.eslintrc文件 rules 里面 配置 "linebreak-style": [0 ,"error", "windows"], //允许windows开发环境转载 2019-01-02 20:07:51 · 7324 阅读 · 0 评论 -
多个异步请求执行成功后,执行后续操作
方法一:jq的$.when().done()$.when( $.ajax(), $.ajax(), $.ajax() ).done(fn).fail(fn);当内部传入的3个ajax都执行了成功的回调, done里的函数才会被触发,而当有一个ajax执行失败了,fail就被触发。方法二:Promise.all([promise1,promise2...原创 2019-01-18 09:24:33 · 11548 阅读 · 0 评论 -
React阻止事件冒泡
<div className={styles.hezi} onClick={e => this.handleClick(e)}>handleClick=e => { // 阻止事件冒泡 e.stopPropagation() }原创 2019-01-18 11:04:09 · 340 阅读 · 1 评论 -
React如何在组件中获取路由参数?
路由参数假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢?这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置。import List from './component/list'; <Route path="list/:id" component={List} />注意 path 属性中的...原创 2019-01-18 11:50:39 · 9883 阅读 · 0 评论 -
Cookie的使用(js-cookie插件)
js-cookie 官方文档里面就详细的介绍了es5怎么引用,以下是ES6以上的用户一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用存到Cookie去// Create a cookie, valid across the entire site:Cook...转载 2019-01-13 13:15:27 · 2039 阅读 · 0 评论 -
React项目实现点击图片预览------React-zmage 一个图片放大查看组件,动画流畅简洁,使用简单方便
这里我们可以使用一个强大的组件,没错,他就是React-zmage github地址:https://github.com/Caldis/react-zmage/issuesreact-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以立即获得缩放效果, 您可以用这个控件完全替代原生的 img 标签, 令所有图片其附带图片缩放功能,安装...原创 2019-01-18 17:14:18 · 11550 阅读 · 1 评论 -
qs.stringify和JSON.stringify的使用和区别
最近在用vue2.x做项目,说实话,项目比较赶不吃力那肯定是假的。这里顺带吐槽一下二线城市东莞,我之前待的城市。深圳很多新技术打得火热,东莞还是有点滞后呐。言归正传,说说 qs.stringify和JSON.stringifyqs可通过npm install qs命令进行安装,是一个npm仓库所管理的包。而qs.stringify()将对象 序列化成URL的形式,以&进行拼接。...转载 2019-01-13 22:04:45 · 530 阅读 · 0 评论 -
传统 Ajax 已死,Fetch 永生
原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代。最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定。结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的。由于 Fetch API 是基于 Promise ...转载 2019-01-13 22:11:27 · 87 阅读 · 0 评论 -
React框架介绍
Virtual DOM虚拟DOM是React的基石。之所以引入虚拟DOM,一方面是性能的考虑。Web应用和网站不同,一个Web应用 中通常会在单页内有大量的DOM操作,而这些DOM操作很慢。 在React中,应用程序在虚拟DOM上操作,这让React有了优化的机会。简单说, React在每次需要渲染时,会先比较当前DOM内容和待渲染内容的差异, 然后再决定如何最优地更新DOM。这个过程被...原创 2018-11-14 10:09:16 · 1253 阅读 · 0 评论