【React高级】二、代码分割
摘要：大多数 React 应用都会使用 Webpack，Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。 接着在页面上引入该 bundle，整个应用即可一次性加载。 打包是个非常棒的技术，但随着你的应用增长
阅读全文
摘要：为什么我们需要无障碍辅助功能？ 网络无障碍辅助功能（Accessibility，也被称为 a11y，因为以 A 开头，以 Y 结尾，中间一共 11 个字母）是一种可以帮助所有人获得服务的设计和创造。无障碍辅助功能是使得辅助技术正确解读网页的必要条件。 React 对于创建可访问网站有着全面的支持，而
阅读全文
摘要：从设计稿开始 第一步：将设计好的 UI 划分为组件层级 首先，你需要在设计稿上用方框圈出每一个组件（包括它们的子组件），并且以合适的名称命名。如果你是和设计师一起完成此任务，那么他们可能已经做过类似的工作，所以请和他们进行交流！他们的 Photoshop 的图层名称可能最终就是你编写的 React
阅读全文
摘要：有些组件无法提前知晓它们子组件的具体内容。在 Sidebar（侧边栏）和 Dialog（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。 我们建议这些组件使用一个特殊的 children prop 来将他们的子组件传递到渲染结果中： function FancyBorder(props
阅读全文
摘要：在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。 我们知道 props 是只读的。当属性只存在于组件的 state 中时，组件调用 this.setState() 便可修改它。然而，当属性是由父组件传入的
阅读全文
摘要：在 HTML 中，表单元素（如、 和 ）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。 我们可以把两者结合起来，使 React 的 sta
阅读全文
摘要：渲染多个组件 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); function Test(props) { const a = [1, 2, 3, 4, 5
阅读全文
摘要：根据条件返回组件 if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick}
阅读全文
摘要：React 事件的命名采用小驼峰式（camelCase），而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。 在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 为了在回调中使用 th
阅读全文
摘要：1.通过以下五步将 Clock 的函数组件转成 class 组件： 创建一个同名的 ES6 class，并且继承于 React.Component。 添加一个空的 render() 方法。 将函数体移动到 render() 方法之中。 在 render() 方法中使用 this.props 替换 p
阅读全文
摘要：1.定义有效的React组件，有两种方式 1.1 通过函数形式 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } 1.2 通过类形式 class Welcome extends React.Component { ren
阅读全文
摘要：与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。 React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。 React 元素是不可变对象。一旦被
阅读全文
摘要：我们可以通过使用命令npx create-react-app my-app来创建一个React项目 React的目录结构如下： 其中index.js是程序的入口 import React from 'react'; import ReactDOM from 'react-dom/client'; i
阅读全文
摘要：分为SCSS（Sassy CSS）和Sass（Indented Sass） 任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式 $ sass-convert style.sass style.scss $ sass-co
阅读全文
摘要：interface Add { } function add<T>(a: T, b: T): T[] { return [a, b] } let res = add<number>(1, 2) console.log(res)
阅读全文
摘要：迭代器 let s = [1,2,3,4] let it:Iterator<number> = s[Symbol.iterator]() console.log(it.next()); console.log(it.next()); console.log(it.next()); console.l
阅读全文
摘要：let s: symbol = Symbol("123") let s1: symbol = Symbol("123") let o = { [s]: "111" } console.log(o[s]); console.log(s, s1, s1 s);
阅读全文
摘要：let a: string & number function error(message: string): never { throw new Error(message) } // error("my error") function loop(): never { while(true) {
阅读全文
摘要：// 类型推断 let a = "13" // 类型别名 type s = string type sn = string|number type cb = ()=>string type T = 'off' | 'on'
阅读全文
摘要：数字枚举 enum A { red, green, blue, } console.log(A.red); console.log(A.green); console.log(A.blue); 增长枚举 enum A { red=1, green, blue, } console.log(A.red
阅读全文
摘要：// 元组, 需要严格按照元组声明的类型给值 let arr: [string, number] = ['1', 1] console.log(arr) console.log(arr[0]); let excel:[number, string][] = [ [0, '白云区'] ]
阅读全文
摘要：抽象类被继承使用，抽象类中abstract修饰的方法不能有实现，实现抽象类的类需要实现抽象类中所有抽象方法 abstract class A { name: string constructor(name: string) { this.name = name } abstract run(time
阅读全文
摘要：类定义 class Person { private name: string age: number constructor(name: string, age: number) { this.name = name this.age = age } display(): void { conso
阅读全文
摘要：// 类型断言 interface A { name: string } interface B { age: string } let f1 = function(type: A|B): void { let x = (<A>type).name let y = (type as A).name
阅读全文
摘要：数组 let arr: number[] = [1, 2, 3, 4,] let arr1: string[] = ["hello", "world"] let arr2: boolean[] = [true, false] let arr3: any[] = [1, '1', true] let
阅读全文
摘要：接口 interface t1{ name:string } let obj:t1 = { name: "aoaoao" } console.log(obj); // 名字一样的接口会合并 interface t1{ name:string } interface t1 { age:number }
阅读全文
摘要：编译工具 yarn global add ts-node yarn global add @types/node any let str: any = '123456' str = {} console.log(str) str = 123 console.log(str) unknow let s
阅读全文
摘要：字符串 let str:string = '123456' 数字 let num: number = Infinity bool let b:boolean = Boolean(0) void let v:void = undefined any let n:any = null function
阅读全文
摘要：一、基础 Vue3笔记 文本模板<span>Message: {{ msg }}</span> 原始html<p>Using v-html directive: <span v-html="rawHtml"></span></p> 一次性插值<span v-once>这个将不会改变: {{ msg
阅读全文
摘要：安装包：yarn add axios 导入axios：import axios from 'axios' 编写代码请求 var a = axios.create({ baseURL: 'http://localhost:8080', timeout: 1000, headers: { 'X-Cust
阅读全文
摘要：父组件传递给子组件（单向数据流） 父组件页面在引用子组件的地方写上属性值 <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.
阅读全文
摘要：├── babel.config.js // 配置文件 ├── cypress.json ├── jest.config.js ├── package.json // 项目依赖描述文件 ├── public // 静态内容 │ ├── favicon.ico │ ├── img │ │ └── ic
阅读全文
摘要：下载安装nvm nvm安装node npm安装yarn yarn安装@vue/cli vue create 项目名 yarn 下载依赖包 yarn run server 运行项目
阅读全文
