react
文章平均质量分 70
荷包蛋_
这个作者很懒,什么都没留下…
展开
-
TypeScript + React: 状态管理 Redux
我们来为应用加入状态管理,使其更利于维护。安装redux-thunk:Redux 的异步解决方案react-redux 的两个最主要功能:Provider:提供包含 store 的 contextconnect:连接容器组件和展示组件;yarn add redux react-redux redux-thunk入口文件在入口文件中,我们引入了 react-redux 提供的 Provider 组件。将 Provider 作为应用的外层容器并传入 store,容器内的所有组件原创 2021-05-08 18:31:28 · 207 阅读 · 0 评论 -
TypeScript + React:列表渲染 & 路由配置
在 上一篇 中,我们为表单元素绑定了事件、封装了 Axios、向后端发送了 get 请求以及搭建了 mock server – 将请求转发到了本地,并返回了一个 json。接下来我们就用这个 response 渲染表单以及项目路由的配置。列表渲染兄弟组件间的通讯/* ** src/components/employee/index.tsx */class Employee extends Component { render() { return ( <>原创 2021-05-08 18:30:24 · 697 阅读 · 0 评论 -
TypeScript + React:事件处理 & 数据请求
如何用 ts 来编写 react 中的事件处理和数据请求?功能在 employee/QueryForm 组件中,升级 Input、Select 为受控组件,Button 添加数据请求事件,以渲染员工信息列表。实现抽离接口文件我们在 src/interface 下,存放所有与后端交互的数据请求类型。比如, employee/QueryForm 中的状态(state)就是向后端发送的数据请求的格式,可以单独抽离成接口。/* ** src/interface/employee.ts */exp原创 2021-05-04 14:26:57 · 2108 阅读 · 0 评论 -
TypeScript + React:添加 Layout & 组件
highlight: atom-one-light这一篇,我们来堆砌组件(不包含事件处理和数据请求)。知识点在此 --> React & Typescript:组件的入门实例项目需求一个简单的员工管理系统,分为两部分功能:员工管理 和 系统设置。在员工管理部分,可以通过员工的姓名和部门进行查询员工的信息;在系统设置部分,进行简单的系统配置。目录|--src |--components |--employee |--QueryFor.原创 2021-04-30 16:35:10 · 788 阅读 · 1 评论 -
React & Typescript:组件的入门实例
React 组件的演化组件复用方式优势劣势状态类组件(Class)发展时间长,接受度广泛只能继承父类作为一种传统开发模式,会长期存在Mixin可以复制任意对象的任意多个方法,实现组件间的复用组件间相互依赖、耦合,可能产生冲突,不利于维护被官方抛弃高阶组件(HOC)利用装饰器模式,在不改变组件的基础上,动态地为其添加新的能力嵌套过多调试困难,需要遵循某些约定(不改变原始组件,透传 props 等)能力强大,广泛引用Hooks替代类组件,多个 Ho原创 2021-04-30 09:59:32 · 302 阅读 · 0 评论 -
创建 TypeScript & React 项目
项目需求一个简单的员工管理系统,分为两部分功能:员工管理和系统设置。在员工管理部分,可以通过员工的姓名和部门进行查询员工的信息;在系统设置部分,进行简单的系统配置。有两种初始化方案我们可以通过两种方式创建项目:手动配置和使用脚手架;手动配置为了对项目的配置有一个基本了解,之后的开发还是基于脚手架开展。手动配置创建 基本的 ts 环境安装 react 及其声明文件npm i react react-domnpm i -D @types/react @types/react-dom.原创 2021-04-28 15:54:47 · 1049 阅读 · 0 评论