React项目指导使用webpack需要安装的依赖 webpack，webpack-cli，react，react-dom babel-loader，@babel/core，@babel/preset-env，@babel/preset-react 设置.babelrc，{"presets": ["@babel/preset-env","@babel/preset-react"]} 设置scripts： 12"dev": "webpack --mode development","build": "webpack --mode production" 设置webpack-dev-server： 1234567devServer: { compress: true, port: 9000， hot: true},"start": "webpack ...

环境配置新建项目create-react-app redux-meme-generator 安装插件npm i -S redux react-redux redux-thunk react-bootstrap 文件结构运行项目npm run start，清空src下的文件，建立index.js，引入react和react-dom。并在src下新建component、actions、reducer文件夹。 src/index.js 1234567891011121314151617181920import React from 'react';import ReactDOM from 'react-dom';import App from './component/App';import {createStore, applyMiddleware} from 'redux';import rootReducer from './reducer';impor ...

本文重点记录使用React Native构建双平台App的过程，同时进一步掌握构建过程中运用的技术。 搭建开发环境**安装react-native-cli**：npm i -g react-native-cli Android SDK安装Android SDK并启动进行配置： 配置环境变量 123export ANDROID_HOME=~/Library/Android/sdkexport PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools Android 虚拟机设定Genymotion的Android SDK 位置（Android SDK 的路径可以在 SDK Manager 上找到）。  模拟器有多款模拟器可供选择，Android Studio自带，Genymotion和夜神模拟器，推荐选择夜 ...

特性 类型批注 和编译时类型检查 类型推断 类型擦除 接口 枚举 enum mixin 泛型编程 名字空间 元组 tuple 类型 boolean 布尔值 number 数值 string 字符串 any array 数组 tuple 元组 enum 枚举 undefined null void 空类型 方法没有返回值 never 任何类型的子类型 代表不会出现的值 object 对象 基本类型 增加void any enum never 引用类型 高级类型 交叉类型 联合类型 类型别名 类型索引 类型约束 类型映射 条件类型 交叉类型 & 将多个类型合并为一个类型 并 T & U 表示 T 和 U 的交集 123456789101112131415function extend<T, U>(first: T, second: U): T & U { let result:<T & U> = {}; for (let key in first) { ...

表达式全集 字符 描述 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符。例如，“n”匹配字符“n”。“\n”匹配一个换行符。串行“\\”匹配“\”而“\(”则匹配“(”。 ^ 匹配输入字符串的开始位置。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。 $ 匹配输入字符串的结束位置。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。 * 匹配前面的子表达式零次或多次。例如，zo*能匹配“z”以及“zoo”。*等价于{0,}。 + 匹配前面的子表达式一次或多次。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。 ? 匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“does”或“does”中的“do”。?等价于{0,1}。 {n} n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹 ...

商品计价的千分位分隔符转换1return total.toString().replace(/\B(?=(\d{3})+$)/g, ',') 去除字符串的空格 字符串原生trim方法，只能去除两侧空格，返回新字符串 replace正则匹配 去除所有空格：str = str.replace(/\s*/g,"") 去除两侧空格：str = str.replace(/^\s*|\s*$]/g,"") 去除左侧空格：str = str.replace(/^\s*/,"") 去除右侧空格：str = str.replace(/\s*$/,"") 中文、英文、数字但不包括下划线等符号 中文：^[\u4e00-\u9fa5]{0,}$ 中文、英文、数字：^[\u4e00-\u9fa5A-Za-z0-9_]+$（包括下划线），[\u4e00-\u9fa5A-Za-z0-9]+$/[\u4e00-\u9fa5A-Za-z0-9]{ ...

项目需求：1、用nodejs的socket.io写了一个简易版的聊天室（实时推送技术，无刷新实现信息实时更新，应用于在线聊天室、在线客服系统、评论系统和WebIM等） 2、根据socket.io库给出的api以及《nodejs实战》给出的demo实现了, 也只是很基础的, 但放到服务器上后会有网络延迟, 顺序不正确等问题 3、看过网上的资料, 没看到有解释很全或者投入生产环境的代码, 都是一些demo 想请教前辈, 对于一个业务开发中常用的聊天室模块: 1、应该如何去思考呢?2、整个过程会涉及到哪些知识点?3、会有哪些难点呢?(比如支持高并发啥的)4、应该注意什么呢?(比如如何测试或者啥的?) 解决方案需求分析： 实现在线聊天室的基本功能，包括显示在线用户的个人信息 用户进行实时聊天，信息推送实时更新 其他可扩展功能 技术栈分析socket.io是一个开源WebSocket库，它通过Node.js实现WebSocket服务端，同时提供客户端JS库。socket.io支持以事件为基础的实时双向通讯，可以工作在任何平台、浏览器或移动设备。 Node.js+ ...

React component lifecycle 生命周期React的生命周期是component在建立和渲染的过程，以component class出发，React会做以下的过程： 依照component被挂入DOM的过程分类，过程中会依序执行component的函数如下： Mounting：component被建立实体（即react element）后，渲染到DOM的过程： constructor() static getDerivedStateFromProps() render() componentDidMount() Updating：当component收到新的props时，更新状态（state），再重新渲染到DOM的过程： static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate() Unmounting：当component不被使用，从DOM移除的过程 componentWillUn ...

reduxRedux就是给JavaScript应用程序一个可以预测state的容器。 使用Redux的时候一定要记得以下三大原则： single source of truth：应用程序的state，皆存储在唯一一个树状结构的store中； state is read-only：唯一改变state的方式，发送一个描述如何改变的action； changes are made with pure functions：为了描述action如何改变state，reducer必须改成pure function。 具体运行 当我们要改state时，必须**通过dispatch发送一个action对象到store**，这个action对象是用来描述发生了什么事。 store基本上也不知道收到这个用来做什么，因为它是用来存储state tree的地方，所以store会把「自己目前的state」及「action」交给给Reducer处理。 reducer是一个pure function，它会**根据我们action的要求去做state的更改，并将新的state回传给store**。 我们可以 ...