javascript

React hooks 入门 此教程翻译自Academind课程, 源地址:https://www.youtube.com/watch?v=-MlNBTSg_Ww 为何需要React Hooks 为了状态和生命周期而去写Class组件往往是繁琐的, 而且组合优于继承的原则, 使得在多数情况下能定义函数组件就不去定义类组件 在新版React(16.8)中, 新增了React Hooks, 使我们可以在函数组件中使用状态和生命周期函数, 使得函数组件更加灵活, 减轻类组件使用负担 从state开始(useState) 项目目录: src/ |-components/ |---TabList.js |---Schedule.js |-hooks/ |---http.js 首先我们声明一个无状态函数组件, 内容如下: const TabList = () => { const currentTab = 1; return <div> CurrentTab: {currentTab} </div>; }; 这是一个普通的无状态组件, 我们使用新的useState API来赋予初始值: (useState的调用参数和state一样, 可赋予任何值)(useState的参数为state的初始值) useState方法返回1个数组, 数组内包含2个参数, 第一个参数是当前state: import React, { useState } from 'react'; const TabList = () => { const [state] = useState({ selectedTab: 1 }); return <div> CurrentTab: {state....

Rx.js 入门 该文章内容为 https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow 的翻译 ReactiveX 通常用来解决异步的繁琐操作, ReactiveX 中所有数据都看作"流", 也是"流式编程"的集大成者, 并运用 ReactiveX 的操作符我们可以轻松联动多个异步操作之间的关系 起手文件配置 项目结构 |-src/ |---code.ts |-index.html |-package.json |-tsconfig.json |-webpack.config.js package.json: { "name": "rxjs-learn", "version": "1.0.0", "main": "index.js", "license": "MIT", "scripts": { "start": "webpack-dev-server --mode development" }, "dependencies": { "rxjs": "^6.4.0", "rxjs-compat": "^6.4.0", "ts-loader": "^5.3.3", "typescript": "^3.4.3", "webpack": "^4.30.0", "webpack-dev-server": "^3.3.1" }, "devDependencies": { "webpack-cli": "^3.3.0" } } tsconfig.json: { "compilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "es2015", "moduleResolution": "node", "sourceMap": true, "target": "es6", "typeRoots": ["node_modules/@types"], "lib": ["es2017", "dom"] } } webpack....