Joe 发布的文章

十五、Mobxhttps://cn.mobx.js.org/npm i mobx@51. Mobx 介绍Mobx 是一个功能强大，上手非常容易的状态管理工具Mobx 背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得Mobx 利用 getter 和 setter 来收集组件的数据依赖关系，从而在数据发生变化的时候精确知道哪些组件需要重绘，在界面的规模变大的时候，往往会有很多细粒度更新（vue类似）2. Mobx 与 redux 的区别Mobx 写法上更偏向于 OOP对一份数据直接进行修改操作，不需要始终返回一个新的数据并非单一 store，可以多 storeRedux 默认以 J...

八、React 生命周期1. 初始化阶段2. 运行中阶段3. 销毁阶段老生命周期的问题componentWillMount，在 ssr 中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求componetWillupdate，更新前记录 DOM 状态, 可能会做一些处理，与 componentDidUpdate 相隔时间如果过长，会导致状态不太信新生命周期的提替代getDerivedStateFrom...

一、React 介绍1. React 起源与发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。2. React 与传统 MVC 的关系轻量级的视图层库！A JavaScript library for building user interfacesReact 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React 并不非常认可 MVC 开发模式；React 构建页...

使用 CRA 创建支持 TS 的项目React 脚手架工具 create-react-app（简称：CRA）默认支持 TypeScript创建支持 TS 的项目命令：npx create-react-app 项目名称 --template typescript当看到以下提示时，表示支持 TS 的项目创建成功： 更多：在已有项目中使用 TS相当于非 TS 项目目录结构主要以下三个变化：项目根目录中增加了 tsconfig.json 配置文件：指定 TS 的编译选项（比如，编译时是否移除注释）React 组件的文件扩展名变为：*.tsxsrc 目录中增加了 react-app-env.d.t...

概述几乎所有的 JavaScript 应用都会引入许多第三方库来完成任务需求这些第三方库不管是否用 TS 编写的，最终都要编译成 JS 代码，才能发布给开发者使用我们知道是 TS 提供了类型，才有了代码提示和类型保护机制但在项目开发中使用第三方库时，就会发现它们几乎都有相应的 TS 类型，这些类型是怎么来的呢类型声明文件：用来为已存在的 JS 库提供类型信息这样在 TS 项目中使用这些库时，就像用 TS 一样，都会有代码提示、类型保护等机制了TS 的两种文件类型.ts 文件既包含类型信息又可执行代码可以被编译成 .js 文件，然后执行代码用途：编写程序代码的地方.d.ts 文件只包含类型...

class 类TypeScript 全面支持 ES2015 中引入 class 关键字，并为其添加了类型注解和其他语法（比如，可见性修饰符等）class 基本使用，如下：根据 TS 中的类型推论，可以知道 Person 类的实例对象 p 的类型是 PersonTS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在类的实例属性初始化：class Person { age: number gender = '男' // gender: string = '男' }声明成员age，类型为 number（没有初始值）声明成员 gender，并设置初始值，此时可...

TypeScript 常用类型类型例子描述number1, -33, 2.5任意数字string'hi', `"hi", ´hi´任意字符串booleantrue、false布尔值 true 或 false字面量其本身限制变量的值就是该字面量的值any*任意类型unknown*类型安全的 anyvoid空值（undefined）没有值（或 undefined）never没有值不能是任何值object{ name: '孙悟空' }任意的 JS 对象array[1, 2, 3]任意 JS 数组tuple[4, 5]元素，TS 新增类型，固定长度数组enumenum{ ...

TypeScript 介绍TypeScript（简称TS）是 JavaScript 的超集（JS有的TS都有）TypeScript = Type + JavaScript（在JS基础之上，为 JS 添加了类型支持）TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行// TypeScript 代码：有明确的类型，即 : nmber (数值类型) let age1: number = 18 // JavaScript 代码：无明确的类型 let age2 = 18 TypeScript 为什么要为 JS ...

React Router 6 快速上手1.概述React Router 以三个不同的包发布到 npm 上，它们分别为：react-router: 路由的核心库，提供了很多的：组件、钩子。react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。与React Router 5.x 版本相比，改变了什么？内置组...

件通信方式总结组件间的关系：父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）几种通信方式：props：children propsrender props消息订阅-发布：pubs-sub、event 等等集中式管理：redux、dva 等等conText:生产者-消费者模式比较好的搭配方式：父子组件：props兄弟组件：消息订阅-发布、集中式管理祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

1. setStatesetState 更新状态的2种写法 (1). setState(stateChange, [callback]) ------ 对象式的 setState 1.stateChange 为状态改变对象(该对象可以体现出状态的更改) 2.callback 是可选的回调函数, 它在状态更新完毕、界面也更新后(render 调用后)才被调用 (2). setState(updater, [callback]) ------ 函数式的 setState ...

npm run bulidnpm i serve -gserve bulid

npm i redux-devtools-extensionstore 文件中进行配置：import { composeWithDevTools } from 'redux-devtools-extension' export default createStore(countReducer, composeWithDevTools(applyMiddleware(thunk)))

纯函数一类特别的函数: 只要是同样的输入(实参)，必定得到同样的输出(返回)必须遵守以下一些约束不得改写参数数据不会产生任何副作用，例如网络请求，输入和输出设备不能调用 Date.now() 或者 Math.random() 等不纯的方法redux 的 reducer 函数必须是一个纯函数高阶函数理解: 一类特别的函数情况1: 参数是函数情况2: 返回是函数常见的高阶函数:定时器设置函数数组的 forEach()/map()/filter()/reduce()/find()/bind()promisereact-redux 中的 connect 函数作用: 能实现更加动态, 更加可扩展的功能

react-redux 基本使用明确两个概念UI 组件：不能使用任何 redux 的 api，只负责页面的呈现、交互等容器组件：负责和 redux 通信，将结果交给 UI 组件如何创建一个容器组件靠 react-redux 的 connect 函数connect(mapStateToProps, mapDispatchToProps)(UI组件)mapStateToProps：映射状态，返回值是一个对象mapDispatchToProps：映射操作状态的方法，返回值是一个对象容器组件中的 store 是靠 props 传进去的，而不是在容器组件中直接引入mapDispatchToProp...

redux 理解学习文档英文文档: https://redux.js.org/中文文档: http://www.redux.org.cn/Github: https://github.com/reactjs/reduxredux 是什么redux 是一个专门用于做状态管理的JS库(不是 react 插件库)。它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。作用: 集中式管理 react 应用中多个组件共享的状态。什么情况下需要使用 redux某个组件的状态，需要让其他组件可以随时拿到（共享）。一个组件需要改变另一个组件的状态（通信）。总体原...

流行的开源React UI组件库material-ui(国外)官网: http://www.material-ui.com/#/Github: https://github.com/callemall/material-uiant-design(国内蚂蚁金服)官网: https://ant.design/index-cnGithub: https://github.com/ant-design/ant-design/ant-design 组件库使用安装 npm i antd引入需要使用的组件 import { Button } from 'antd'接着引入 css 文件 import ...

底层原理不一样BrowserRouter 使用的是 H5 的 history API，不兼容 IE9 及以下版本HasRouter 使用的是 URL 的哈希值url 表现形式不一样BrowserRouter 的路径中没有 #，例如：localhost:3000/dome/testHasRouter 的路径中包含 #，例如：localhost:3000/#/dome/test刷新后对路由的 state 参数的影响BrowserRouter 没有任何影响，因为 state 保存在 history 对象中HasRouter 刷新后会导致路由 state 参数的丢失HasRouter 可以用于解...

push 和 replace默认 push 模式，类似压栈// 开启 replace 模式 <Link repalce to={`/home/message/dateil/Joe/18`}>详情</Link>编程式路由导航借助 this.props.history 对象上的 API 对操作路由跳转、前进、后退this.props.history.push 跳转// push 跳转+携带 params 参数 this.props.history.push('/home/message/detail/Joe/18') // push 跳转+携带 search 参数 ...

params 参数 *路由链接（携带参数）：{/* 传递 params 参数 */} <Link to={`/home/message/dateil/Joe/18`}>详情</Link>注册路由（声明接收）：{/* 声明接收 params 参数 */} <Route to='/home/message/detail/:name/:age' component={Detail} />接收参数// 路由组件接收 params 参数 this.props.match.params // {name:'Joe', age: '18'}search 参数路由链接...

React 路由介绍现代前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在 React 中，是 URL 与 组件 的对应关系使用 React 路由简单来说，就是配置 路径 和 组件（配对）路由的基本使用使用步骤1. 安装 react-router-domnpm i react-router-dom2. 导入路由的三个核心组件：Router、Route...

前置说明React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻量级, 建议使用封装XmlHttpRequest对象的ajaxpromise风格可以用在浏览器端和node服务器端axiosaxios 中文文档相关APIGET 请求// 可用 async await 修饰 axios.get('/user?ID=12345') .then(function (response) { ...

使用 create-react-app 创建 React 应用React 脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer...）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目...