Nassua-CSDN博客

转载 useCallback

1、使用场景function App () { const [data, setData] = useState(null) function getData () { setTimeout(() => { setVal({ name: 'nassua' }) }, 500) } useEffect(() => { getData() }, []) return ( <div>{val}</div&

2021-06-11 14:17:33 910 1

转载 useEffect

1、最基本使用首先，举一个简单的例子：import React, { useState } from 'react';function App() { const [data, setData] = useState({ hits: [] }); return ( <ul> {data.hits.map(item => ( <li key={item.objectID}> <a href={i

2021-06-09 20:18:36 236

原创 useState

const [state, setState] = useState(initialState)返回一个 state，以及更新 state 的函数。在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。...

2021-06-09 14:44:25 1706

原创 useRef

1、访问 DOM 节点import { useRef } from 'react'export default () => { const inputElement = useRef(null) const handleClick = () => { inputElement.current.focus() } return { <> <input ref={i

2021-06-08 16:45:29 288

转载 webpack中publicPath、contentBase

在学习webpack的时候，配置文件中有一个publicPath属性，一直不是很明白它到底是怎么用，也查了很多资料，得到最多的说法是当打包的时候，webpack会在静态文件路径前面添加publicPath的值，当我们把资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。但是在使用webpack进行开发的时候，得到的结果却和该说法不是很一致，经过一段时间的摸索，好像是懂了一点点，至少在简单的配置中不会报错，在这里记一下，做一个总结.　　我们在使用webpack进行开发的时候，通...

2021-06-03 10:11:36 1374

原创前端面试题

1、浏览器输入url后发生了哪些事 / 一次完整的http请求过程1.对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址；2.建立TCP连接，根据这个IP，找到对应的服务器，发起TCP的三次握手；（1）浏览器所在的客户机向服务器发出连接请求报文；（2）服务器接收报文后，同意建立连接，向客户机发出确认报文；（3）客户机接收到确认报文后，再次向服务器发出报文，确认已接收到确认报文；此处客户机与服务器之间的TCP连接建立完成，开始通信。3.建立TCP连接后发起HTT

2021-06-01 17:46:51 160 3

转载 XSS攻击

1、什么是XSS攻击Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。相信以上的解释也不难理解，但为了再具体些，这里举一个简单的例子，就是留言板。我们知道留言板通常的任务就是把用户留言的内容展示出来。正常情况下，用户的留言都是正常的语言文字，留言板显示的内容也就没毛病。然而这个时候如果有人不按套路

2021-05-22 14:19:06 431

转载跨域

1、什么是跨域在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服ajax只能同源使用的限制。2、同源策略同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。3、常见跨域场景3、跨域解决方案（1）jsonpjsonp的原理就是利用<script>标签没有跨域限

2021-05-21 15:06:34 88

原创 http

1、htttp简介HTTP 协议（超文本传输协议 HyperText Transfer Protocol），它是基于TCP协议的应用层传输协议，简单来说就是客户端和服务端进行数据传输的一种规则。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。2、http协议特点（1）无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户端的请求，并收到客户端的应答后，即断开连接。采用这种方式可以节省传输时间。Connection:keep-a

2021-05-18 13:52:18 305

转载防抖、节流

1、背景在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。2、防抖所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版。（1）非立即执行function debounce (fn, del

2021-05-17 20:49:36 104

转载 https

1、概念HTTPS 协议（HyperText Transfer Protocol over Secure Socket Layer）：可以理解为HTTP+SSL/TLS，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL，用于安全的 HTTP 数据传输。2、http为什么不安全？http协议属于明文传输协议，交互过程以及数据传输都没有进行加密，通信双方也没有进行任何认证，通信过程非常容易遭遇劫持、监听、篡改，严重情况下，会造成恶意的流量劫持等问

2021-05-17 13:54:57 168

转载 react 中 context 的理解

1、为什么要使用 context没有 context 这个概念之前，我们在组件中自上而下传递数据是通过 props 属性来实现的；如果层级不多用 props 还好，但是如果层级多了，并且只是最后一层会用到，那我们是不是每一层都得写一个 props，这样的话代码写起来很繁琐，不够优雅，不容易维护；所以context 的出现可以解决这个问题。context 提供了一个无需为每层组件手动添加 props，就能在组件之间进行数据传递的方法。2、怎么使用 contextReact.createConte.

2021-04-29 16:25:56 450

原创 1px、1em、1rem、1vh / 1vw 的含义

1、1pxpx像素（Pixel），相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的，一般电脑的分辨率有{1920*1024}等不同的分辨率，1920*1024 前者是屏幕宽度总共有1920个像素，后者则是高度为1024个像素。2、1emem 就是相对于自身字体 fontSize 的大小，如果自身指定fontSize = 20px，父元素 fontSize = 30px，那么 1em = 20px；如果自身没有指定，则是继承来自于父元素的 fontSize，1em = 30px。3、.

2021-04-28 20:42:51 6632

原创 react 中事件处理的三种方法，以及为什么事件处理需要绑定 this

1、事件处理的三种方法（1）在回调函数中使用箭头函数：onClick={ () => this.fn() }缺点：在每次 render 时候，都会产生一个匿名函数。如果此组件作为一个子组件，那么父组件 render 的时候，子组件也可能会重新渲染，消耗性能。（2）在构造器 constructor 中绑定 this：this.fn = this.fn.bind(this)缺点：每次都要手动绑定 this。（3）使用类字段语法：fn = () => { }缺点：ES7功能

2021-04-28 14:00:07 580

转载 react 中的 super(props) 作用

1、constructor()这是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。2、super()在class方法中，继承是使用 extends 关键字来实现的。子类必须在 constructor( ) 调用 super() 方法，否则新建实例时会报错。报错的原因是：子类是没有自己的 this 对象的，它只能继承自父类的 this 对象，然后对其进行加工，而 super()..

2021-04-28 11:05:14 3579

m0_37557930的博客