- 博客(19)
- 收藏
- 关注
RSS订阅原创 JS 对象深复制
一、使用扩展运算符使用扩展运算符可以实现部分对象的深复制，若对象中有数组或其他引用类型，则扩展运算符不能实现深复制。成功案例：let obj1 = { name: "rain", age: 18}let obj2 = { ...obj1 }obj2.name = "snow"console.log(obj1)// {name:'rain',age:18}console.log(obj2)// {name:'snow',age:18}失败案例：let obj1 = { n
2022-04-10 14:49:37
551
原创 JS 对象深复制
一、使用扩展运算符使用扩展运算符可以实现部分对象的深复制，若对象中有数组或其他引用类型，则扩展运算符不能实现深复制。成功案例：let obj1 = { name: "rain", age: 18}let obj2 = { ...obj1 }obj2.name = "snow"console.log(obj1)// {name:'rain',age:18}console.log(obj2)// {name:'snow',age:18}失败案例：let obj1 = { n
2022-03-14 18:27:49
3898
原创 JS immutable组件
介绍更多信息immutable中文：不变的，不可改变的每次修改一个Immutable对象时都会创建一个新的不可变的对象，在新对象上操作并不会影响到原对象的数据。安装npm i immutable一、Immutable优化性能的方式Immutable实现的原理是持久化数据结构，也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免deepCopy把所有节点都复制一遍带来的性能损耗，Immutable使用了结构共享，即如果对象树中一个节点发生变化，只修改这个节点和受它影响的
2022-03-14 18:24:38
3333
原创 React Redux
介绍Flux是一种架构思想，专门解决软件的问题。它跟MVC架构是同一类东西，但是更加简单和清晰。Redux最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（state对象）保存着一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers），这样就可以进行数据追踪，实现时光旅行。安装npm i redux一、redux介绍及设计和使用的三大原则state以单一对象存储在state对象中state只读（每次
2022-03-13 22:04:43
1228
原创 Promise方法解决回调地狱
一、回调地狱示例弊端：data1，data2，data3这三个数据不能重名，调试起来很不方便。需要的操作多时，回调会一直往里塌陷。const fs = require("fs")fs.readFile("./one.txt", (err, data1) => { fs.readFile("./two.txt", (err, data2) => { fs.readFile("./three.txt", (err, data3) => { console.
2022-03-13 16:16:04
1964
原创 React 反向代理
一、安装npm install http-proxy-middleware --save二、在src目录下创建setupProxy.js文件三、编写setupProxy.js代码**注意：**每次编写完setupProxy.js文件后都要重启服务器const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( '/api
2022-03-11 19:05:23
859
1
原创 React Router路由
一、React 路由1 什么是路由？路由是根据不同的url地址展示不同的内容或页面。一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URL之间的同步映射关系2 路由安装npm install react-router-dom@53 路由使用<Redirect from="/" to="/home"/>exact 精确匹配（Redirect即使使用了exact，外面还要嵌套Switch来用）Warning：Hash hist
2022-03-11 17:27:19
301
原创 React Hooks
一、使用hooks的理由高阶组件为了复用，导致代码层级复杂生命周期的复杂写成functional组件，无状态组件，因为需要状态，又改成了class，成本高二、useState(保存组件状态) const [name, setName] = useState("rain")//useState 记忆函数，记住状态三、useEffect(处理副作用)和useLayoutEffect(同步执行副作用)Function Component不存在生命周期，所以不要把Class Componen
2022-03-10 20:47:13
335
原创 React 非父子组件通信方式
一、非父子组件通信方式1 状态提升（中间人模式）React中的状态提升概况来说，就是将多个组件需要共享的状态提升到它们最近的父组件上，在父组件上改变这个状态然后通过props分发给子组件import React, { Component } from 'react'export default class Tenth extends Component { state = { title: '' } render() { return ( <div
2022-03-07 21:40:58
891
原创 React Ref父子通信
一、Ref版-表单域组件父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法import React, { Component } from 'react'class Tenth extends React.Component { state = { value: '' } clear() { this.setState({ value: '' }) } render() { return
2022-03-07 17:10:24
670
原创 React props属性验证
一、属性验证1 安装npm i prop-types2 使用import React, { Component } from 'react'import PropTypes from 'prop-types'export default class Fifth extends Component { //static 定义类属性，可以在类外Fifth.proTypes直接使用 static propTypes = { title: PropTypes.string,//规定t
2022-03-07 13:29:22
439
原创 React setState异步同步
一、setStatesetState处在同步的逻辑中，异步更新状态，更新真实domsetState处在异步的逻辑中，同步更新状态，同步更新真实domimport React, { Component } from 'react'export default class App extends Component { state = { num: 1 } handleOnClick() { this.setState({ num: this.state.nu
2022-03-06 21:27:52
595
原创 React 脚手架初始化项目
一.React 脚手架初始化项目1 初始化项目，命令：npx create-react-app my-app2 启动项目，在根目录执行命令：npm start3 npx 命令介绍npm v5.2.0引入的一条命令目的：提升包内提供的命令工具的使用体验原来：先安装脚手架包，再使用这个包中提供的命令现在：无需安装脚手架包，就可以直接使用这个包提供的命令补充说明推荐使用：npx create-react-app(固定格式) my-app(项目名称)可以使用npm i
2022-03-03 22:27:42
702
2
原创 JS arr.sort()排列数值
arr.sort()默认情况下，sort()会按照升序重新排列数组元素，即最小的值在前面，最大的值在后面。为此，sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序。即使数组元素都是数值，也会先把数组转换为字符串再比较、排序。let arr = [0, 1, 5, 10, 15]arr.sort()console.log(arr)//[ 0, 1, 10, 15, 5 ]sort()排列数值方法let arr = [3, 2, 1, 5, 10, 15]arr.
2022-03-01 20:17:53
943
原创 JS 正则表达式基础详解
一、正则表达式概述1 什么是正则表达式正则表达（Regular Expression）是用于匹配字符串组合的模式。在JavaScript中，正则表达式也是对象。正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。2 正则表达式的特点灵活性、逻辑性和功能性非常强。可以迅速地用极简单的方式达
2022-02-28 17:54:40
2977
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人