云中客的博客

一、基础api1. Route：是用于声明路由映射到应用程序的组件层，主要参数有用于react-router匹配使用的path，匹配后对应渲染到页面上的component2. 路由模式选择：hash模式：HashRouter，history模式：BrowserRouterimport { BrowserRouter as Router } from 'react-router-dom'3. switch：只匹配第一个的Route并返回到页面上，如下面的例子，在本地打开项目，假设启动后的路

先看下面的例子import React, { Component } from 'react';class Child extends Component { render() { console.log('Foo render') return null }}class App extends Component { state = { count: 0 } render() { return ( <div&...

熟悉React都知道，在React中一些UI的错误，比如throw new Error()，加载服务器资源报错时，或者一些js的语法错误可能会导致整个项目崩溃掉，满屏的红色报错，非常不友好。为了解决这个问题，React16引入了错误边界。就是在报错的情况下，可以通过static getDerivedStateFromError()和componentDidCatch()捕获到这个错误。import React, { Component, lazy, Suspense } from 'rea...

一、虚拟dom和真实dom的区别 我们在render函数里写的jsx其实就是react.creactElement的语法糖，在插件babel-plugin-transform-react-jsx的作用下，jsx就会被转为const title = React.createElement( 'h1', { className: 'header' }, 'Hello, world!')的结构，然后在React.createElement方法中，通过确认标签类型...

学习一门最需要先了解的就是它的生命周期，知道每个生命周期钩子该做什么事情，同时也能理解在不同阶段，React在内部做了什么事情。图片来源：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/挂载时：首先是constructor，一个组件在更新到页面之前需要创建出来，constructor就是class组件的构造函数。static getDerivedStateFromProps的意思就是从props中获取state。

可以直接将一个组件当成一个参数去传递，通过props.components可以使用这个组件。import React, { useEffect } from 'react';import './staffList.scss';function Title2() { return ( <div>111</div> )}function Title(props) { useEffect(() => { console.log(...

首先，在columns需要排序的那一项中加上sorter:true，因为sorter会触发Table的onChange方法，因此onChange中可以调用获取数据的接口 sorterFun = (pagination,filters,sorter) => { let sortType = sorter.order // 排序类型，正序/倒叙/不排序 if (sortType) { this.getDataList(sortType === 'ascend' ? '.

首先，使用npm或yarn安装http-proxy-middleware$ npm install http-proxy-middleware --save$ # 或$ yarn add http-proxy-middleware然后，在src文件夹下新建一个setupProxy.js，引用http-proxy-middleware后即可配置代理const proxy = require('http-proxy-middleware');module.exports = f...

通过params传参 /*路由配置页面*/<Route path="/addPage/:id" component={addPage} />/*跳转前的页面，点击后跳转的方法*/goAddPage() { let id = 111 this.props.router.push({ pathname: `/addPage/${id}` })} 在跳转后的页面中可以通过this.props.router.params得...

在使用ant-design的Tree时，由于每一层的数据较大，不能一次性把数据全部拉取出来，使用了Tree中的loadData后最大的难题就是把每一层的children数据放到树节点中了。我们数据结构大概是这样的list = [ { id:1, children: null, parent: true }]list2 = [ { id: 1-1, children: null, ...

安装了react和ant-design后，改变modal的visible的属性，会报“Cannot read property 'getParent'of undefined”的错。苦寻答案良久，在ant-design的gitHub的issue里找到了一位同学分享的答案：ant里的rc-util是5.0.1版本的，在rc-util升到5.0.4就可以修复这个bug。...

最近用react做了一个手机端，可以说了解了很多以前没有接触的东西，其中在项目中实现滑动分页让我印象颇为深刻。首先，我们要知道这个功能需要用到哪些准备知识。一、预备阶段 我的想法很简单，就是计算每次加载的最后一条距离项目footer垂直方向上的距离，从而知道什么时候需要将当前页面+1并且向后端发送请求，将重新获得的数据加到上一次获取数据的后面。首先，我们要知道在Reac...

最近在公司负责的项目从Vue转到了React，于是这一个月沉迷React无法自拔....好吧，这不是不写博客的理由，感觉两个月不写整个人都不好了呢。那今天就说说我了解的React提升性能的细节点吧，并且这篇博客会在之后不断更新完善。一、用Fragment代替div 众所周知，在react的render函数中返回一个组件时，如果有多个JSX标签，则需要用一个父标签包裹住...