肥林の仓库

Typescript的基本介绍 中文官方文档 - 英文官方文档 TypeScript 的定位是静态类型语言，在写代码阶段就能检查错误，而非运行阶段 类型系统是最好的文档，增加了代码的可读性和可维护性。 有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）等 ts最后被编译成js 创建项目(ts)create-react-app my-app --template typescript TS + 类组件 在react中使用最多的就是接口(interface),因为我们要限制组件中的状态,属性等… 类组件的定义方法:// 定义传参(props)接口interface propsIn { name: string,//必须有name属性且为string形式 age?: number,//可以有age属性且必须为number形式 add?: Function,//可以有add属性且必须为函数}// 定义状态(state)接口interface stateIn { nam ...

immutable的进阶使用 下面我来展示一下,在深层次的Map或者List结构中,想要修改深层次的数据,如何实现呢? 提供一个思路: 一层一层的改,首先获取第一层数据,再获取第二层数据,通过链式结构的形式修改数据 案例展示: 这个是一个修改信息数据的Demo,使用immutable来实现,但是源数据是一个复杂的Map数据结构 /* ----------------------- 案例组件 --------------------------- */ import React, { Component } from 'react'import { Map, List } from 'immutable'export default class App extends Component { state = { // 将源数据变成Map和List的组合型复杂结构 info: Map({ name: 'Lam&# ...

immutable.js 官方文档 每次修改一个 Immutable 对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据。 immutable是一种持久化数据结构，immutable数据就是一旦创建，就不能更改的数据，每当对immutable对象进行修改的时候，就会返回一个新的immutable对象，以此来保证数据的不可变。 讲讲深浅拷贝浅拷贝 只拷贝对象的一层数据，再深处层次的引用类型value将只会拷贝引用 实现方式: Object.assign() 和 ES6的拓展运算符 /* (1). Object.assign()或者拓展运算符 */let a = {// 创建一个a对象 age:10,// 第一层数据 usage:{// 第二层数据 sing:'唱歌' }}// 使用b对象复制a对象let b = Object.assign({}, a) // 或者let b = {...a}b.age = 11// 修改b对象的值(第一层, ...

Ant Design(PC端) 官方文档 Ant Design 是一个致力于提升『用户』和『设计者』使用体验的设计语言 ；它是基于 React 实现的一套组件库。由蚂蚁金服体验技术部开发的，最早是在2015年发布的，到现在已经发布了三个大版本，目前一共封装了50多个组件。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源； 包含很多设计原则和配套的组件库。 使用步骤: 安装 npm i antd 在项目任意代码中引入和使用即可 import React, { Component } from 'react'import { Button } from 'antd';// 引入对应的组件export default class App extends Component { render() { return ( <div> {/* 使用对应的组件 */} & ...

react-redux的原理 在上一篇博客中以及介绍了react-redux的基本使用,由此可以得出,react-redux中提供的两个API,Provider只不过是组件间通信context方案的应用罢了,用于方便容器组件拿到全局的store; 而另一个connect其实也就是一个高阶组件(HOC hight order component),与路由中的withRouter是很相似的,下面我们就用代码来实现一下connect高阶组件 高阶组件的构建代码如下:/* ------------ connect(高阶组件) -------------- */// 这里我们以 404NotFound 组件为实现案例import React,{useEffect} from 'react'function NotFound(props) { // 组件一挂载获取高阶组件生成的组件数据 useEffect(()=>{ console.log('我自己设置的connect高阶组件的数据:',props ...

什么是react-redux 官方文档 react-redux是一个由react官方推出的第三方插件,是一个redux的绑定库,它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。其实就是用于连接redux,更方便我们在项目中操作redux。react-redux提供了connect(用于进行组件连接)和Provider(给全局父组件App包裹用于进行全局的store传参)两个Api react-redux将所有组件分为两大类：UI组件和容器组件，其中所有容器组件包裹着UI组件，构成父子关系。容器组件负责和redux交互，里面使用redux API函数，UI组件负责页面渲染，不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态（state）和操作状态的方法（action）。 基本使用 下载react-redux npm i react-redux 在项目入口文件index.js中引入Provider，以及配置好的redux的store对象,并以类似context的通信形式,将provider ...

redux-promise 官方文档 redux-promise与上篇博客提到的redux-thunk是非常相似的,都是用与处理异步操作,不过相较于thunk,可能promise的用法更为多样一些,可以结合async,await等来结合使用 与redux-thunk不同的是,在redux-promise中,如果action是一个promise， 则会等待promise完成，将完成的结果作为action触发(可以直接return,也可以手动reslove)，如果action不是一个promise，则判断其payload是否是一个promise，如果是，等待promise完成，然后将其作为payload的值触发。 案例展示: 沿用上一篇博客的案例,axios请求小狗的照片 安装redux-promise npm i redux-promise 在全局的store中配置中间件,类似于Vue中的Vue.use() // 1. 引入reduximport {applyMiddleware, combineReducers, createStore} fro ...

redux中间件 官方文档 在redux里，action仅仅是携带了数据的普通js对象。action creator返回的值是这个action类型的对象。然后通过store.dispatch()进行分发。同步的情况下一切都很完美，也就是说,默认情况下，Redux 自身只能处理同步数据流。但是在实际项目开发中，状态的更新、获取，通常是使用异步操作来实现, 但是reducer无法处理异步的情况。那么我们就需要在action和reducer中间架起一座桥梁来处理异步。这就是middleware(中间件)。 由此可见,在redux中,中间件的的核心功能就是:在 action 被发起之后，到达 reducer 之前的一些扩展,主要增强store.dispatch的能力 中间件的执行流程 由上图我们可以看出,所谓redux中间件其实就是指的是action和store之间的流程加工。即dispatch的封装和升级。 中间件的作用以及触发时机处理具有副作用(side effect)的功能，比如，异步操作就是最常见的 side effect 中间件说明： 中间件，可以理解为处理一个功能的中间 ...

Reducer必须为纯函数 什么是纯函数? 所谓纯函数基本可以用一句话来替代,那就是”一个函数,相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。“,下面展示一下纯函数与非纯函数的区别 非纯函数// 非纯函数(所谓的浅复制)// 设置一个对象var obj1 = { name:'lam',}// 设置一个非纯函数(接受一个对象,并修改对象的指定属性)function changeObj(obj){ obj.name = '肥林'//将接收形参对象的属性修改为肥林}changeObj(obj1) // 运行函数修改设置的对象属性console.log(obj1);// { name: '肥林' }/* 可以看出,函数修改了源对象中的属性(浅复制) */ 纯函数// 纯函数(所谓的深复制)// 设置一个对象var obj1 = { name:'lam',}// 设置一个纯函数(接受一个对象,并修改对象的指定属 ...

Flux 官方文档 Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC架构是同一类东西，但是更加简单和清晰。Flux存在多种实现(至少15种) Facebook Flux是用来构建客户端Web应用的应用架构。它利用*单向数据流*的方式来组合React 中的视图组件。它更像一个模式而不是一个正式的框架，开发者不需要太多的新代码就可以快 速的上手Flux。 Redux 官方文档 Redux最主要是用作应用状态的管理,类似于Vue中的Vuex,是一个集中式的状态管理插件,但是Redux并不是React团队出品的,仅仅只是在React项目中使用的比较多,且与React的名字非常的相似而已; Redux可以在React,Vue以及Angular等前端框架中使用 !。简言之，Redux用一个单独的常量状态树（state对象）保存这一整个应用的 状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers），这 样就可以进行数据追踪，实现时光旅行。 redux介绍及设计和使用的三大原则 单一数据源 整个应用程序的sta ...