0x1461A0

Context 上下文： 表示做某一些事情的环境。类似于语言环境中的上下文，上下文这个东西不是一个具体的东西，在不同的地方表示不同的含义，理解为环境比较好。 知乎上一个关于上下文的问题：编程中什么是「Context(上下文)」？ React 中的 Context： 组件可以创建一个上下文，上下文中的数据可以被所有的后代组件共享，而不需要层层传递 例如这样的一个组件结构： 1234567891011121314151617181920212223242526272829function App() { return ( <> <Cmp1 /> <Cmp2 /> </> )}function Cmp1() { return ( <> <p>Cmp1</p> <Cmp3 /> </> ) ...

生命周期 生命周期： 组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。 React 在组件的生命周期中提供了一系列的钩子函数，可以让我们在其中注入代码，在适当的时候运行。 注意： 生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁。 旧版生命周期 旧版生命周期指的是 React 版本 < 16 所使用的生命周期： 可以将整个生命周期分为四个阶段，初始化阶段，挂载阶段，更新阶段，卸载阶段。（也可以将初始化阶段和挂载阶段合并） 初始化阶段：主要是初始化类组件的实例 挂载阶段：主要是将组件挂载到页面 更新阶段：主要是当属性/状态发送变化时重新渲染的过程 卸载阶段：主要是当我们不需要某个组件卸载的阶段 constructor 同一个组件只会运行一次，因为一个组件只需要创建一个对象 在运行构造函数的时候组件还未挂载，为了避免问题，不要在构造函数中使用 setState 使用会报错： componentWillMount 正常情况下，只会运行一次 服务端渲染情况下会被调用两次 可以正常使用 setState，但是为了避免多次 ...

什么是ref ref 就是 reference（引用），当我们希望直接使用 DOM 元素中的某个方法（例如许多 H5 的 API）或者希望直接使用自定义组件中的某个方法。 先来看看 ref 大致怎么使用，可以很明了的看出 ref 就是组件的一个属性： 1234567891011121314class App extends React.Component { componentDidMount() { console.log(this); } render() { return ( <div> <h1 ref="text">hello world</h1> </div> ) }} ref 的使用组件要求： ref 作用于内置的 html 组件，得到的将是真实的 DOM 对象 ref 作用于类组件，得到的将是类的 ...

Vue2中的v-model Vue 给我们提供了 v-model 指令来实现双向数据绑定，所谓双向数据绑定就是：数据更新元素更新、元素更新数据也会更新。 先回顾一下 Vue2 中的用法： 12345678910111213141516<template> <div id="app"> <input type="text" v-model="value"> <p>{{value}}</p> </div></template><script>export default { data() { return { value: '' } }}</script> v-model 实际上是一个语法糖，本质 ...

State React 组件中的数据可以来源于使用者，也可以组件自身维护。使用者传递的数据就是组件的属性 （props），而组件自身维护的数据就是组件的状态（state）。 React 中的哲学：数据属于谁，谁才有权力更改。 对于使用者传递过来的 props，组件自然是没有权利更改的；对于 state，组件自己自行维护，所以组件自然是有权利更改的。 在表现上，state 和 props 一样都是一个对象，但是 state 仅在类组件中有效。 setState 由于 React 无法监测到组件状态的变化，不像 Vue 实现了数据响应式，这也意味着我们无法直接修改 state 的某个属性值来达到触发组件重新渲染的目的。 12345678910111213class Demo extends React.Component { state = { a: 1 } render() { return ( <div> <p>  ...

类型约束 TS 是一个可选的、静态的类型系统 类型约束语法：变量: 类型 1let num: number = 1; TS 在很多时候可以完成类型推导： 1let num = 1; 基本类型 number string boolean symbol bigint object null undefined null 和 undefined 是所有类型的子类型，它们可以赋值给其他类型 通过在 tsconfig.json 文件设置 strictNullChecks:true ，可以获得更严格的空类型检查，null 和 undefined 只能赋值给自身。 数组 不建议约束为 []，建议加上数组类型 例如： 1let arr: string[] = []; 这样数组的每一项都只能是字符串 或者使用构造函数和泛型的写法： 1let arr: Array<string> = []; 元组 Tuple 该类型为一个固定长度的数组，并且数组中每一项的类型确定 例如： 123let x: [string, number];x = ['q', 1]; // ...

同源策略 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 同源：两个 URL 的协议、域名、端口都相同的话，就是同源。 同源策略是一个保障我们信息的安全策略，目的是为了保证用户信息的安全，防止恶意的网站窃取数据。 同源策略的限制 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。 最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页“同源”。 目前，同源策略共有三种行为受到限制： 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB 无法接触非同源网页的 DOM 无法向非同源地址发送 Ajax 请求（可以发送，但浏览器会拦截响应不会给你数据） 跨域解决方案 JSONP 浏览器能够发送 HTTP请求的方式： 直接在浏览器的地址栏输入地址 利用 location.href 直接改变 URL 进行跳转 带有 src、href 等属性的元素 表单的提交 Ajax 除了 ...

JWT概述 JWT 全称 Json Web Token，强行翻译就是 json 格式的网络令牌，可以看出来 JWT 是一个令牌。 令牌的作用是什么？令牌一般用来验证身份，和 cookie 的作用相同，JWT 就是用来做这件事的。 都有 cookie 了，为什么还要有 JWT？ 存在的问题 随着前后端分离的发展，以及数据中心的建立，越来越多的公司会创建一个中心服务器，服务于各种产品线。 而这些产品线上的产品，它们可能有着各种终端设备，包括但不仅限于浏览器、桌面应用、移动端应用、平板应用、甚至智能家居。 一般来说，中心服务器至少承担着认证和授权的功能，例如登录：各种设备发送消息到中心服务器，然后中心服务器响应一个身份令牌。 当这种结构出现后，就出现一个问题：它们之间还能使用传统的cookie方式传递令牌信息吗？ 因为cookie在传输中无非是一个消息头而已，当然可以。但是除了浏览器对cookie有完善的管理机制，其他设备上就需要开发者自己手动处理。 JWT 的出现就是为了解决这个问题，JWT 要解决的问题，就是为多种终端设备，提供统一的、安全的令牌格式。 使用 JWT 只是一个令 ...