React
uncle_Huang
No pains,no gains.
展开
-
umi(3.0.5)版本之二 约定式路由
看一下umi的官网,你会发现约定路由的规则改了。动态路由约定 [] 包裹的文件或文件夹为动态路由。比如:src/pages/users/[id].tsx 会成为 /users/:idsrc/pages/users/[id]/settings.tsx 会成为 /users/:id/settings举个完整的例子,比如以下文件结构,. └── pages └── [post]...原创 2020-03-08 22:09:32 · 746 阅读 · 0 评论 -
umi之一 安装及搭建脚手架umi(3.0.5)版本
参考umi官网首先,你安装好了node,且确保 node 版本是 10.13 或以上全局安装uminpm install umi -g或yarn global add umi脚手架在空文件加下输入命令行:yarn create @umijs/umi-app安装依赖yarn启动项目yarn start-官网上说: 一个基础的 Umi 项目大致是这样的....原创 2020-03-08 22:07:34 · 7245 阅读 · 0 评论 -
React之 8 应⽤redux-saga改造路由守卫登录认证
8.1 redux-saga与redux-thunkredux-saga是⼀个⽤于管理redux应⽤异步操作的中间件redux-saga通过创建sagas将所有异步操作逻辑收集在⼀个地⽅集中处理,可以⽤来代替redux-thunk中间件作用:reducer负责处理action的stage更新sagas负责协调那些复杂或者异步的操作redux-saga可以处理各种复杂的异步操作,red...原创 2020-03-07 20:47:23 · 338 阅读 · 0 评论 -
React之7 路由react-router
7.1 初时react-router安装react-routernpm install react-router-dom --save引⼊顶层路由组件包裹根组件引⼊Link组件编写路由导航引⼊Route组件编写导航配置exact 完全匹配,只有路径完全⼀致时才匹配import React from 'react'import { BrowserRouter, Link, Rou...原创 2020-03-07 16:55:46 · 314 阅读 · 0 评论 -
React路由守卫
路由守卫其实就是我们的路由拦截,当我们有⼀些⻚⾯需要登录之后才有权限去访问这个时候我们的路由守卫就可以派上⽤场了React⾥的路由守卫其实也是⼀个组件,最后返回的还是Route组件实例:当没有登录时,“我的”压面不可见,显示登陆页面,只有点击登陆按钮后,才能跳转到“我的”页面import React, { Component } from 'react'import { BrowserRo...原创 2020-03-06 23:54:28 · 515 阅读 · 0 评论 -
React之6 状态管理器Redux
6.1 Redux成员及其数据流actionsactions是描述操作的对象,调⽤dispatch时需要传⼊此对象storestore是整个应⽤的数据存储仓库,把我们全局管理的状态数据存储起来reducersreducers接收action并更新store注意:redux是⼀个单独的数据流框架,是JavaScript的状态容器, 跟react并没有直接的联系,通过redux, 我...原创 2020-03-05 22:08:09 · 187 阅读 · 0 评论 -
React之5 编程式函数Hook
Hook解决函数组件不能使用state的问题。函数式组件比class组件好用,这时候hook它来了,这样函数式组件也能使用state,岂不是爽歪歪。5.1 新特性useState(组件状态管理钩⼦)用法:const [state,setState]=useState(initState)state是要设置的状态setState是更新state的⽅法,只是⼀个⽅法名,可以随意更改in...原创 2020-03-04 09:43:24 · 469 阅读 · 0 评论 -
React之 4 高阶组件
4.1 初识高阶组件⾼阶组件—HOC(Higher-Order Components)⾼阶组件是为了提⾼组件的复⽤率⽽出现的,抽离出具有相同逻辑或相同展示的组件⾼阶组件其实是⼀个函数,接收⼀个组件,然后返回⼀个新的组件,返回的这个新的组件可以对属性进⾏包装,也可以重写部分⽣命周期app.jsimport React, { Component } from 'react'const...原创 2020-03-02 15:24:44 · 185 阅读 · 0 评论 -
React的高阶组件装饰器准备工作
安装插件用npm install或是yarn add都行,这里我用yarn add引入 react-app-rewiredyarn add react-app-rewired安装customize-crayarn add customize-cra更改package.json⽂件"scripts": { "start": "react-app-rewired sta...原创 2020-03-02 14:59:38 · 273 阅读 · 0 评论 -
React之3.2组件复合
import React from 'react'function Dialog(props){ return( <div style={{ border: `4px solid ${props.color || "blue"}` }}> {/* 下面一行出错是一位反方向单引号写成了单引号 */} {/* <div st...原创 2019-12-18 10:20:07 · 135 阅读 · 0 评论 -
React3.1PureComponent和React.memo
PureComponent是内部定制了shouldComponentUpdate⽣命周期的Component它重写了⼀个⽅法来替换shouldComponentUpdate⽣命周期⽅法平常开发过程中设计组件能使⽤PureComponent的地⽅都尽量使⽤使⽤PureComponent特性要记住两点:1.确保数据类型是值类型2.如果是引⽤类型,确保地址不变,同时不应当有深层次数据变化Pu...原创 2019-12-17 17:29:43 · 229 阅读 · 0 评论 -
React2antd按需加载
安装命令 yarn add react-app-rewired customizecra更改package.json⽂件"scripts": {//"start": "react-scripts start", "start": "react-app-rewired start",// "build": "react-scripts build", "build": "react-ap...原创 2019-12-17 15:50:37 · 150 阅读 · 0 评论 -
React1.5双向数据绑定
//App.js参照上一篇import React, { Component } from 'react'export default class PropsChild extends Component { constructor(props){ super(props) this.state={ showTitle:true,...原创 2019-12-17 14:49:23 · 156 阅读 · 0 评论 -
React1.4事件监听
PropsChild.js//App.js参照上一篇import React, { Component } from 'react'export default class PropsChild extends Component { constructor(props){ super(props) this.state={ sh...原创 2019-12-17 14:05:07 · 133 阅读 · 0 评论 -
React1.3条件渲染与数据循环
App.jsimport React, { Component } from 'react'import PropsChild from './PropsChild'export default class App extends Component { render() { return ( <div> <PropsChild title=...原创 2019-12-17 12:01:27 · 314 阅读 · 0 评论 -
React之1.2Props属性
父组件向子组件传递属性利用prop接收App.jsimport React, { Component } from 'react'import PropsChild from './PropsChild'export default class App extends Component { render() { return ( <div> &...原创 2019-12-17 11:26:14 · 118 阅读 · 0 评论 -
React之1.1state和setState
React的安装很简单,npm isntall -g create-react-app创建项目 create-react-app 项目名state变量渲染,setState修改数据App.jsimport React, { Component } from 'react'export default class App extends Component { //state第一种...原创 2019-12-17 11:07:11 · 141 阅读 · 0 评论