React.js
文章平均质量分 61
逸尘️
沉稳大气,笃行克己
展开
-
基于Electron的桌面端应用开发和实践
先简单介绍一下electron。electron是由Github开发的开源框架,现在由OpenJS基金会维护的一个开源项目。它允许开发者使用 HTML、CSS 和 JavaScript 来构建跨平台的桌面应用,而且构建出来的应用,可以很好地兼容 Mac、Windows 和 Linux 这些主流的操作系统。原创 2022-12-06 18:59:00 · 8042 阅读 · 1 评论 -
解决electron + react单页应用调用localhost服务失败
通过nodejs发送网络请求,或者通过electron的net模块发送网络请求。这两种发送请求的方式,都不受浏览器同源策略的影响。否则,你可能需要用到webSecurity属性。原创 2022-11-27 13:49:07 · 1196 阅读 · 2 评论 -
【Bug解决】Can‘t perform a React state update on an unmounted component. This is > a no-op, but it...
在 React 应用程序中我们遇到以下警告消息:Can’t perform a React state update on an unmounted component. This isa no-op, but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in a useEffect cleanupfunction.这是因为我们在使用原创 2021-11-18 16:37:23 · 17024 阅读 · 1 评论 -
记一次webpack构建提速
写在开头由于业务调整需要,最近接盘了公司内部云平台的项目H。看了代码,开发了几个需求,我的第一感觉是,H项目真的好严肃,还有厚重的历史感。经过多年的开发与维护,H项目经过了数十位前端同学之手,“前任”小伙伴们在里面花费了大量的时间与精力。这里面涉及到的技术栈也错综复杂,包含了react、webpack、reflux、mobx以及不少手动封装的类库和组件,日积月累,已经包含了十几个子项目,代码体积...原创 2020-01-03 15:48:33 · 653 阅读 · 0 评论 -
关于Warning: setState(...): Can only update a mounted or mounting component.的解决方案
一、原因在做项目的时候,控制台一直报一个错误。最初以为是脏数据导致的key重复问题,后来发现这个问题一直存在。细看,发现具体错误提示如下:略经思考,脑子里首先闪现的问题原因是,setState异步函数在组件生命周期结束后异步抛出。经此设想,快速切换两个路由,此问题复现,即证明了猜想是正确的。react中快速切换路由时报此错误,是由于在组件开始挂载(componentWillmount)或...原创 2019-01-12 16:23:58 · 2892 阅读 · 0 评论 -
React中使用highcharts绘制图表demo
import React from 'react';import Highcharts from 'highcharts';export default class extends React.Component { componentDidMount() { this.renderGraph(); } renderGraph = () => { let...原创 2018-10-30 17:29:42 · 4333 阅读 · 0 评论 -
React中监听鼠标滚轮事件
const rdom = require('react-dom'); class Hello extends React.Component { render() { handleScroll(e) { const ele = rdom.findDOMNode(this); if (e.nativeEvent.deltaY <= 0) { /* s...原创 2018-08-29 06:56:18 · 12235 阅读 · 0 评论 -
React中的setState异步回调和同步
在使用React过程中,中可以使用this.state来访问需要的某些状态,但是需要更新或者修改state时,一般而言,我们都会使用setState()函数,从而达到更新state的目的,setState()函数执行会触发页面重新渲染UI。语法:setState(updater[, callback]) //updater是要改变的state对象,callback是state导致的页面重新渲染的回原创 2017-12-14 17:40:02 · 13819 阅读 · 2 评论 -
React和Redux 之间的依赖注入connect(mapStateToProps、mapDispatchToProps)
在理解react-redux通过connect连接的关系之前,需要重温下组件的概念,组件分为两大类:展示组件和容器组件。展示组件就是用来显示UI的普通组件,不涉及业务逻辑和redux。容器组件的概念不容易理解,但它与展示组件之间却存在着明显不同特征。1. 容器组件 容器组件是使用 store.subscribe() 从 Redux state 树中读取部分数据,并通过 props 来把这些数...原创 2017-11-23 14:46:09 · 13753 阅读 · 0 评论 -
React.render和reactDom.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。新的react包包含了React.createElement,.createClass,.转载 2017-07-09 18:40:57 · 8248 阅读 · 1 评论 -
React15中组件的生命周期
生命周期的三个阶段(初始化阶段、运行中阶段、销毁阶段),三者时间是不固定的,只是在逻辑上的分类,react在不同的生命周期会触发不同的钩子函数。一、初始化阶段: getDefaultProps:获取实例的默认属性(即使没有生成实例,组件的第一个实例被初始化CreateClass的时候调用,只调用一次,),作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共...原创 2019-10-12 14:56:31 · 904 阅读 · 0 评论 -
React子组件向父组件传值
子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化。/***实现在输入框输入邮箱时,在div中即时显示输入内容***/<body> <div id="test"></div></body>//子组件var Child = React.createClass({ render原创 2017-07-23 17:10:06 · 23565 阅读 · 0 评论 -
react-router中使用Link在不同路由之间进行参数传值
1.使用Link 首先需要引入Link 模块。import { Link } from 'react-router'2.通过 Link to设置路由跳转地址,以及需要传递的参数对象,注意,此处to 中所携带的路由和参数也是一个对象。<Link to={{ pathname: `detail/${id}`, state: 'hello', }}>点击跳转原创 2017-08-10 10:04:56 · 17412 阅读 · 0 评论