react+ts全家桶企业级项目实战（上）

redux基本原则 单一数据源 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。 如图所示，无论你有多少个页面，还

什么是redux Redux 是 JavaScript 状态容器，提供可预测化的状态管理。 为什么要使用redux 视频教程地址 当我们了解一项技术的时候，大多说人只是想着，有了一项新技术，我要了解一

高阶组件 视频教程地址 我们定义一个函数withLee，它的参数是一个组件，并把这个组件返回 定义一个组件，使用高阶组件重新生成一个新的组件 使用组件

组件的生命周期 视频教程地址 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件

状态提升.md 我们做项目的过程中，有时候需要父组件控制子组件的状态，这个时候，我们可以采用提升子组件的状态，把子组件的状态交给父组件管理。如下图，我们编辑用户信息的时候，希望把弹窗的状态交给列表页，

事件绑定 视频教程地址 React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 tsx语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 定义state，用来提供需要

tsx语法 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言

组件的状态-state 在react中更新一个组件的办法就是更新state，state更新之后组件重新渲染 创建一个组件 创建一个接口，用来定义state 给组件添加状态 初始化state 更新sta

组件的属性-props 创建一个组件 ​ 在src目录下创建Lee.tsx文件,我们定义了Lee这个类，并且继承了Component。这里解释一下Component<属性 ,状态>。 创建一个接口，用

组件 定义组件 函数组件 class组件 使用组件组件 定义组件 函数组件 class组件 使用组件

项目初始化 yarn 中国镜像加速 TS 初始化项目 目录结构 目录结构说明 build为我们编译后的文件存放地点，默认这个文件是不存在的，我们需要打包的时候会自动创建，我这里为了给大家展示，所以进行

泛型 为什么要用泛型？泛型有什么好处，看下面的示例 不用泛型 运行结果 泛型的写法 运行结果 看完上面的示例，你会觉得用了泛型好麻烦，代码量一下多了好多！我不仅要定义接口，还要处理接口，好麻烦！是的。

ts中的类 下面看一个使用类的例子 运行结果：lee { title: '乐编码' } 我们创建了一个类，并对类进行了初始化操作 我们知道类有三大特性： 多态 继承 封装 继承 运行结果：乐编码 封装

typescript中的接口 接口采用 interface 作为关键词 接口的成员属性类型可以是 number string Boolean any enum tuple 等ts的基本数据类型,如下代

基础数据类型 布尔值 最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。 执行结果 数字 用 number表示数字

react+ts全家桶企业级项目实战--前言 前言： 2020年6月份来到武汉就职于一家小公司，公司原来的系统采用原来的mvc模式。前端用的layui框架，后台用的laravel框架。刚进入公司没多久