React
徐同保
web前端行业的小学生。博客底部有联系方式,可以入群
展开
-
react 搜集复选框组的状态
react 搜集复选框组的状态 <div className="m-plugin-control-filter-item"> <CheckBox defaultChecked={true} checked={ rank.indexOf(0) >= 0 ? true : false } onClick={this.handleRank.bind(this, ...原创 2019-01-25 11:26:10 · 1267 阅读 · 0 评论 -
Can’t call setState (or forceUpdate) on an unmounted component
componentWillUnmount() { this.setState = () => { return } }原创 2019-01-16 11:58:46 · 1447 阅读 · 0 评论 -
react网页多语言(react-intl-universal)
github项目地址:https://github.com/xutongbao/my-app-intl参考链接:https://www.npmjs.com/package/react-intl-universal目录结构:App.jsimport React, { Component } from 'react';import intl from 'react-intl...原创 2019-03-14 18:49:11 · 1791 阅读 · 0 评论 -
React性能优化 渲染20000多条checkbox组件,点击选择checkbox组件的时候特别卡,解决办法
import * as React from 'react';interface IData { id: number, title: string}interface IState { checkedValues: Set<IData>; data: IData[];}interface IProps { value: IData, c...原创 2019-03-15 11:15:07 · 3246 阅读 · 5 评论 -
React 父组件通过props控制子组件执行不同的方法进行渲染
import React, { Component } from 'react';class Item extends Component { constructor(props) { super(props) this.state = { content: '' } } componentWillReceiveProps(nextProp...原创 2019-03-18 11:14:18 · 1871 阅读 · 0 评论 -
react tab切换 第一次切换到某个页面时会请求数据,以后不会再请求数据
目录结构:App.js:import React, { Component } from 'react'import { connect } from 'react-redux'import Fruits from './Fruits/Fruits.js'import Phone from './Phone/Phone.js'import './App.css'...原创 2019-03-25 18:58:10 · 8800 阅读 · 0 评论 -
react中getDerivedStateFromProps和componentDidUpdate配合使用
React 父组件通过props控制子组件执行不同的方法进行渲染import React, { Component } from 'react';class Item extends Component { constructor(props) { super(props) this.state = { content: '', fu...原创 2019-04-09 15:07:25 · 2642 阅读 · 0 评论 -
redux中间件redux-thunk的作用
redux的dispatch默认只能传一个对象参数:dispatch({ type: 'CHANGE_COLOR', themeColor: color })redux-thunk的作用就是使dispatch支持传函数参数:dispatch(changeColorAsyn(color))给redux配置thunk也很简单:import { createStore, a...原创 2019-06-26 19:06:07 · 5021 阅读 · 0 评论 -
React(1702H)文章管理-cms系统
一、GIF图1、效果图2、上传图片和创建文章3、编辑文章4、添加带文章的banner二、使用到的npm包1、pug参考链接:https://pug.bootcss.com/api/getting-started.htmlpug示例代码:...原创 2019-07-29 09:09:15 · 733 阅读 · 0 评论 -
React从入门到精通(1704B)
目录一、React简介二、React的背景和原理三、JSX简介四、React组件五、脚手架六、快捷方式七、state和props八、组件九、todo list小练习十、生命周期十一、路由十二、使用 PropTypes 进行类型检查十三、refs 和DOM十四、ReactDOM十五、Mock数据十六、antd十七、Context...原创 2019-07-30 10:40:05 · 4548 阅读 · 0 评论 -
React(1702H)文件上传和分页查找
1.上传dom: <div className="m-upload-input-wrap"> <input type="file" value="" onChange={this.handleUpload.bind(this)}/> </div>接口: handle...原创 2019-07-25 14:38:16 · 320 阅读 · 0 评论 -
React (1702H) 点击复制、滚动条、图形验证码、ridis、密码rsa加密、token、发邮件、文件上传、sql语句
一、使用到的npm包1.clipboard-polyfill复制到剪切板示例代码:import * as clipboard from "clipboard-polyfill" <Button onClick={this.handleCopy.bind(this, record)} >复制链接</Button> handleCopy(record...原创 2019-07-23 11:48:53 · 2139 阅读 · 0 评论 -
React 中setState({key:value}) key值动态变化,如何动态设置key的值
第一种写法:import React, { Component } from 'react'class App extends Component { constructor(props) { super(props) this.state = { username: '', age: '', sex:'' } } ...原创 2018-12-07 14:55:24 · 4429 阅读 · 0 评论 -
classnames-plus 实例
js:import React, { Component } from 'react'import classNamesPlus from 'classnames-plus'import './App.css'class App extends Component { constructor(props) { super(props) this.state ...原创 2018-12-06 11:43:53 · 249 阅读 · 0 评论 -
React 动态填加class,使用classnames库代码
使用classnames:一个简单的JavaScript实用程序,用于有条件地将类名连接在一起。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>React 动态填加class</title> <原创 2018-11-07 14:43:55 · 3220 阅读 · 0 评论 -
React 在body上绑定事件以及阻止事件冒泡
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 在body上绑定事件以及阻止事件冒泡</title> <script src="https://unpkg.com/react@16/u原创 2018-11-07 19:01:04 · 2163 阅读 · 0 评论 -
react-router-dom
import React, { Component } from 'react';import { BrowserRouter as Router, Route, Link } from "react-router-dom";const Index = () => <h2>Home</h2>;const About = () => <h...原创 2018-11-13 19:00:36 · 234 阅读 · 0 评论 -
React,如何理解虚拟DOM,以及相关优质博客推荐
React在Virtual DOM上实现了DOM diff算法,当数据更新时,会通过diff算法计算出相应的更新策略,尽量只对变化的部分进行实际的浏览器的DOM更新,而不是直接重新渲染整个DOM树,从而达到提高性能的目的。你给我一个数据,我根据这个数据生成一个全新的Virtual DOM,然后跟我上一次生成的Virtual DOM去 diff,得到一个Patch,然后把这个Patch打到浏览器...原创 2018-11-20 19:05:12 · 233 阅读 · 0 评论 -
从头实现一个简易版的React虚拟dom和diff算法
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>从头实现一个简易版的React虚拟dom和diff算法</title> <script src="https://cdn.bootcss.com原创 2018-11-21 16:44:45 · 302 阅读 · 0 评论 -
crate-react-app 之 css modules
App.jsimport React, { Component } from 'react';import CSSModules from 'react-css-modules';import styles from './App.module.css';class App extends Component { render() { return ( ...原创 2018-11-15 11:56:44 · 897 阅读 · 0 评论 -
React中setState
mountComponent 本质上是通过 递归渲染 内容的,由于递归的特性,父组件的 componentWillMount 一定在其子组件的 componentWillMount 之前调用,而父组件的 componentDidMount 肯定在其子组件的 componentDidMount 之后调用。若使用 this.state.xxx 赋值更新状态,的确能够改变状态,但是无意义,...原创 2018-11-21 19:00:39 · 227 阅读 · 0 评论 -
React的setState()
setState 通过引发一次组件的更新过程来引发重新绘制setState 方法被调用时,会引起 React 的 4 个生命周期的函数被调用: shouldComponentUpdate (this.state 没有得到更新) componentWillUpdate (this.state 没有得到更新) reader (this.state 得到更新) ...原创 2018-11-22 11:35:33 · 220 阅读 · 0 评论 -
React的setState()
注释掉 this.setState({val: this.state.val + 6}) 时:不注释掉 this.setState({val: this.state.val + 6}) 时: import React, { Component } from 'react';import './App.css';class App extends Component...原创 2018-11-22 12:03:52 · 216 阅读 · 0 评论 -
react 服务端渲染(ssr) 框架 Next.js
官方网站:https://nextjs.org/deom:https://github.com/xutongbao/hello-next-fetching-dataindex.js:import Layout from '../components/MyLayout.js'import Link from 'next/link'import fetch from 'iso...原创 2018-12-04 17:37:05 · 1734 阅读 · 0 评论 -
react-loadable 使用高阶组件动态import组件,实现代码分割(code-splitting)
使用后: import React, { Component } from 'react';import Loadable from 'react-loadable'; const LoadableBar = Loadable({ loader: () => import('./Bar'), loading() { return <div>...原创 2018-12-05 10:03:48 · 1451 阅读 · 0 评论 -
react使用lazy()和Suspense实现根据路由进行代码分割
App.js:import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';import React, { Suspense, lazy } from 'react';const Home = lazy(() => import('./Home'));const Bar =...原创 2018-12-05 10:46:07 · 6413 阅读 · 0 评论 -
React tab切换页面
js:import React from 'react'import { Icon } from '@components'import classNames from 'classnames'import './index.scss'class SystemSetup extends React.Component { constructor(props) { supe...原创 2018-12-05 14:34:12 · 4397 阅读 · 0 评论 -
React入门
React Developer Tools.crx下载地址:https://pan.baidu.com/s/137XB-alpKdUS9k-5bHekrgReact是一个声明式的,高效的,并且灵活的用于构建用户界面的 JavaScript 库。当数据更改时,React 将有效地更新并渲染正确的组件。组件接收参数,称为 props(属性),并通过 render 方法返回一个显示的视图层次结构。r...原创 2018-05-25 14:03:44 · 347 阅读 · 0 评论