ange997

react面试题

https://fd.svsva.cn/wjd

React的理解有哪些特性

一、什么是虚拟Dom，实现原理，区别，优缺点？

Diff算法说明

Fiber

二、函数组件与类组件区别

三、state和props的区别

super和super(props)的区别

类组件生命周期函数

四、setState执行机制

五、react事件机制

六、react事件绑定方式class

八、React组件通信

九、React中refs是什么

十、React中的key作用

11、受控组件、非受控组件

12、什么是高阶组件

13、什么是 JSX

14、不能直接更新state数据

15、什么是React Hooks

16、react中引入css方式

17、redux理解，以及工作原理

React中间件

18、React中router的原理、解释、传参方式？

20、immutable 不变的

21、类组件render方法原理

22、React组件复用

23、获取页面滚动距离

22、性能优化、避免不必要的render渲染

23、怎样理解三次握手，四次挥手

JS基础部分

JS高级

作用域的理解

手写Promise

面试题总结

JS面试常问

项目亮点

React的理解有哪些特性

React是一个构建用户界面的 Javasript 库，只提供了UI层面的解决方案

主要使用组件设计模式、声明式编程和函数式编程。

声明式编程：他只关心你要做什么而不是怎么做

component：react中一切皆为组件把整个应用逻辑拆分成小部分,每个小的部分称为组件

优点:可复用、可组合、易维护

使用jsx语法，它具备了js的能力，可以将HTML结构嵌入JS代码中但是不能直接被浏览器识别，最终会被 babel编译为合法的 JS语句。

遵循单向数据流原则。比双向数据绑定更安全速度更快

使用虚拟DOM来有效的操作DOM，。虚拟Dom原理…

一、什么是虚拟Dom，实现原理，区别，优缺点？

虚拟Dom是真实Dom在内存中的表示
本质上是以 JavaScript 对象形式存在，是对真实DOM 的描述
数据状态更新，会记录新树与旧树的差异,把差异更新到真实Dom中
区别在于虚拟Dom不会进行重排重绘，而真实Dom会频繁进行重排重绘
文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实DOM
真实Dom优势在于：易用，
缺点：效率低:解析速度慢，内存占用量高，性能差：频繁操作Dom导致重排重绘
虚拟Dom优点：简单方便，避免的真实Dom的频繁更新，减少多次重绘重排，提高了性能

跨平台使用：借助虚拟Dom，一套代码多端使用
缺点：首次渲染大量虚拟Dom，由于多了一些计算，加载会较慢，无法满足针对性能要求极高的应用
底层是一套diff算法

Diff算法说明

tree diff -----将整棵树分层，对同层级的节点进行比较，说对比两个标签判断是否相同，如果不同直接删除重建
conponent diff------对比同层级节点的类型，如果有不同则直接删除节点，重新创建新的节点比如说conponent A 换成了 conponent B 虽然长得很像，但是也会删除A 再创建B
element diff 比较同层级中子节点默认按照下标对比，如果设置了key，通过key属性指定唯一标识进行对比

如果key是相同的只需要把旧集合节点更新到新的节点
1. key应该是唯一的
2. key不能是随机值
3. 使用index下标作为key时对性能没有优化
4. 在实际开发中多用id指定key值
key是唯一表示，如果渲染列表数据时，

Fiber

JS引擎和页面渲染引擎两个线程是互斥的，其中一个线程执行的时候，另一个只能挂起，如果JS线程长时间占用着主线程，那么页面渲染引擎就不得不原地等待，时间明显超过16ms了，浏览器就会阻塞页面的渲染，界面长时间不更新会导致页面响应速度变差，用户会觉得卡顿掉帧。当js引擎渲染组件时，从开始到渲染完成是一气呵成的无法中断，采用遍历递归来对比虚拟Dom树，找出需要变动的节点，然后同步的更新他们，如果组件较大，那么js线程会一直执行等到dom树计算完成后，才会把控制权交给渲染线程，如果递归花费100ms，那么这100ms浏览器是无法相应的，代码执行时间越长卡顿越明显，CPU的瓶颈

为了解决主线程长时间占用的问题，react16引入了Fiber数据结构

一个 fiber 就是一个 JavaScript 对象

**核心：**Fiber 架构的核心即是可中断、可恢复、优先级

利用 时间切片 解决的问题就是，划分优先级把长任务分拆到每一帧中，拆分成一个个小的任务块，将同步的更新变为可中断的异步更新。

通过ConCurrent Mode，通过合理的调用机制来调控时间，指定任务执行时间从而降低页面卡顿的概率** 同时必须结合event loop的机制来操作，如果一个小任务执行js解析页面绘制没有超过16.67ms 就会执行 requestIdleCallback 中注册的任务

二、函数组件与类组件区别

类组件与函数组件的区别在于,组件是否有状态,

类组件

类组件通过ES6 类的编写形式编写代码此类继承 React.Component方法

如果想访问父组件的数据必须通过props接收，通过this.props访问l

通过state在组件内部维护数据

直接说 state和props的区别…+生命周期…

函数组件

在使用类组件时需要实例化，比较消耗性能

在没有hooks之前只能使用这种方法维护状态，

从react16.8之后有了hooks的出现…

函数组件使用时直接取函数的返回值即可,在能满足需求的情况下，多使用函数组件

而且目前比较推崇函数式编程

类组件：

//状态管理不同
类组件可以通过this.setState 来管理状态信息
//生命周期：
render  //渲染DOM结构
componentDidMount  //组件挂载到真实DOM节点后执行
componentDidIpdate   //组件更新结束后触发
componentWillUnmount  //组件卸载时触发

函数组件:

/状态管理不同
函数组件通过useState声明管理状态信息
通过useEffect模拟类组件声明周期函数

三、state和props的区别

核心：组件的显示形态可以由数据状态和外部参数所决定，数据状态就是state

总结：

state和props都是js对象

两者都保存着影响页面渲染结果的信息

props是外部组件传递过来的数据，数据状态无法改变

state是在组件内部,数据状态由组件本身进行管理,数据状态可以改变

类组件通过setState修改,函数组件结合hooks进行修改

super和super(props)的区别

在React中，类组件是基于ES6,所以在constructor中必须用super

在调用super中，无论是否传入props，React内部都会将props赋值给组件实例props属性中

传入props原因是在子构造函数中能够使用this.props来获取传入的值

类组件生命周期函数

挂载阶段：

constructor

实例过程中自动调用的方法，在方法内通过super来获取父组件的 props

初始化组件内部state数据

getDerivedStateFromProps

无论state、props是否变化都会执行的方法，参数1 为即将更新的的props数据，参数2 上一个state状态，可以在其中做逻辑处理，防止无用的state更新

render

类组件中必须使用的方法渲染DOM的方法可以使用state和props数据

注意不能再render中调用setState 会造成死循环

conponentDidMount

组件挂载完毕后执行的方法可以做一些事件监听、发送ajax请求

更新阶段：

getDerivedStateFromProps：—

shouComponentUpdate

告诉组件基于本身props和state是否需要重新渲染组件,默认情况返回true

参数1 NextPorps 参数2 NextState 可以做逻辑处理判断组件是否需要更新

render：------

getSnpshotBeforeUpdate：

返回一个 Snapshot值可以获取组件更新前的一些信息作为cmponentDiUpdate的第三个参数传入

componentDidUpdate

组件更新结束后执行,可以根据state和props的变化做处理

卸载阶段：

componentWillUnmount

在组件卸载前触发可以卸载事件关闭定时，取消订阅的网络请求器，一旦组件实例被卸载，不会再次被挂载，而只会重新创建

四、setState执行机制

第一种：通过onclick事件,执行this.setState方法,进行更新state状态,重新执行render函数从而导致视图更新

第二种：setstate异步状态,，在组件中使用setstate时为异步状态，如果想拿到最新的状态，需要传递第二个参数，setstate在原生Dom中或setTimeout中呈现同步状态

第三种：批量更新状态，对同一个值进行多次setState时会产生覆盖，更新策略只会取最后一次的执行结果,而在setTimeout和原生dom中不会出现覆盖

五、react事件机制

为了解决跨浏览器兼容性问题React基于浏览器的事件机制自身实现了一套事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等

组件注册的事件最终会绑定在document这个 DOM上，而不是 React组件对应的 DOM，从而节省内存开销，它拥有和浏览器原生事件相同的接口，包含preventdefault()

六、react事件绑定方式class

render方法中使用bind
render方法中使用箭头函数
constructor中bind
定义阶段使用箭头函数绑定
区别：方法1和方法2简单,

方法3.该属性值传递给组件时,会导致渲染，有性能浪费

方法4.使用箭头函只会生成一个实例,所以方法4对于开发更友好

八、React组件通信

分类：

父组件向子组件传递

子组件向父组件传递

兄弟组件之间的通信

父组件向后代组件传递

非关系组件传递

父传子：父组件通过标签属性传递参数,子组件通过props接收父组件传递过来的数据
子传父：父组件向子组件传递一个函数，子组件通过函数的回调传递参数给父组件,父组件在做状态处理
兄弟组件之间通信,父组件作为中间件实现数据互通
父组件向后代组件通信类似全局数据,使用React.creactContext创建一个context，通过创建好的context下的Provider来创建全局数据源,通过value属性向下传递数据，其他组件通过Consumer来使用全局数据
非关系组件建议使用redux来管理状态

总结：React遵循单项数据流,组件自身不会改变接收到的状态,当状态发生变化时候，组件使用新的值，而不是修改之前的值。数据存储的位置都是在上级组件中

九、React中refs是什么

核心：允许访问Dom节点和React元素的一种方法,，如果是渲染组件则返回的是组件实例,如果为dom则返回具体的dom节点，

类组件：通过React.createRef创建，函数组件通过useRef()创建

可以给组件添加ref属性来使用使用ref对象中的currect属性来访问react元素，

该属性的值是一个回调函数，接收作为第一个参数的底层Dom元素或组件挂载实例

不能在函数组件上使用ref属性，因为他们并没有实例

但是过多使用refs会造成节点暴露，违反组件封装原则

使用场景：操作Dom元素，获取聚焦、内容选择、内容设置、媒体播放等等

十、React中的key作用

key的作用

key 是 React 的虚拟 DOM 对象的唯一标识，在页面发生更新渲染时，判断是新创建的元素还是修改的元素，从而避免不必要的渲染

即当状态数据发生变化时，React 会根据 新的数据 生成 新的虚拟DOM，随后再进行新虚拟DOM与旧虚拟DOM 之间的差异比对（diff）。

在 diff 算法中，存在三大策略，分别是：

树策略（tree diff）- 同层比较节点的数量和标签
组件策略（component diff）- 同层比较节点的属性和值
元素策略（element diff）- 对于同一层级的一组子节点，区分是否出现新增、删除、移动的情况（可通过添加唯一 key 更好的区分）

总结

key应该是唯一的
key不能是随机值
使用index下标作为key时对性能没有优化
在实际开发中多用id指定key值

流程图：

11、受控组件、非受控组件

受控组件：标签、、<select></code>的值通常是根据用户输入进行更新，但在react中可变状态通常保存在组件状态属性中，并且通过setState进行更新状态，通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。</p> <p>顾名思义就是受我们控制的组件,</p> <p>例如<code>input</code> 由value属性来控制输入框内容，输在用户输入内容时，发现内容并没有变化内容，因为此时value值已经被state或porps数据所控制,用户在输入内容是并不会直接修改到state的状态，如果想接触可以使用onChange方法触发修改state的方法 setSate 从而实现更新。</p> <p>非受控组件：表单数据由DOM本身处理。即<code>不受setState()</code>的控制，一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态</p> <p>应用场景：</p> <p><a href="http://img.e-com-net.com/image/info8/ad6ddea23c304d55bde85bfa91d8824d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ad6ddea23c304d55bde85bfa91d8824d.jpg" alt="react面试题_第4张图片" width="650" height="464" style="border:1px solid black;"></a></p> <h1>12、什么是高阶组件</h1> <p>高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。</p> <h1>13、什么是 JSX</h1> <p>jsx是javascript的一种扩展语法跟模板语法接近，它具备了js的能力，将原始html模板嵌入到js代码中，而且jsx中的标签可以是单标签也可以是双标签，单标签必须保证闭合</p> <h1>14、不能直接更新state数据</h1> <p>类组件：如果直接更新state数据，不会重新渲染组件，需要使用setState()，方法更新state，它会调度组件state的更新，当state改变时，组件通过重新渲染来响应更新</p> <p>函数组件：直接用useState进行数据更新</p> <h1>15、什么是React Hooks</h1> <p>核心：hooks是react16.8新增的特性，可以在不编写class组件和state的情况下使用<code>React</code> 特性，主要功能就是给无状态的函数组件提供状态，使函数组件可以有自己的状态</p> <h2>解决了…问题…</h2> <ul> <li>更容易解决状态相关的重用的问题</li> <li>通过自定义hook能够更好的封装组件功能，能解决开发中的大多数问题，拥有代码复用机制</li> <li>可以完全避免使用生命周期方法，编写起来代码整体风格优雅</li> </ul> <h2>常用hooks</h2> <h3>useState：实现函数内部维护state状态</h3> <p>usestate返回一个数组，参数1为当前state，第二个参数是更新state状态的函数</p> <p>useState优点：useState 使用起来更为简洁，减少了<code>this</code>指向不明确的情况</p> <h3>useEffect：进行一些带有副作用的操作</h3> <p>副作用包括axios请求等等</p> <pre><code> useEffect(()=>{})=== 代替componentDidMount和componentDidUpdate两个生命周期函数中执行回调 useEffect(()=> return)=== return一个回调函数并且第二个参数为空数组时,组建卸载时触发，代替componentDidMount+componentWillUnmount 第二个参数为空数组时只在首次加载页面时候执行 useEffect(()=>[])=== 代替 componentDidMount state 第二个参数数组中有依赖项时候在依赖项发生变化时触发 useEffect(()=>[依赖项]) componentDidMount+componentDidIpdate </code></pre> <h1>16、react中引入css方式</h1> <h3>第一种：在组件内部直接写-不推荐</h3> <h3>第二种：直接引入.css文件</h3> <pre><code>这种方式存在不好的地方在于样式是全局生效，样式之间会互相影响 </code></pre> <h3>第三种：.module.css 文件</h3> <pre><code>1.module.css作为模块引入,模块中的css样式旨在当前组件中有效，不影响后代组件1 2.注意点：引用的类名不能使用连接符- 3.所以的classname必须使用{style.样式类名} 4.如果不想全部hash类名可以在样式模块前添加 :global 在:global写的样式不会随机类名也不会影响后代组件的样式 </code></pre> <h3>区别：</h3> <p>第一种：在组件中大量写样式，容易编写混乱</p> <p>第二种：符合日常编写，但是存在全局样式问题</p> <p>第三种：能够解决全局作用域的问题，但是不方便样式修改</p> <h1>17、redux理解，以及工作原理</h1> <p>整个应用中会存在很多个组件，每个组件的<code>state</code>是由自身进行管理，包括组件定义自身的<code>state</code>、组件之间的通信通过<code>props</code>传递、如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后续维护阶段，我们将花费大量精力去查询状态的变化过程</p> <p>可以把redux理解为是一个仓库，可以把一些组件共用的数据统一状态存在redux中，将所有状态进行集中管理，当需要更新状态的时候，仅需要对管理集中处理，而不用去关心状态是如何分发到每一个组件内部的。</p> <h3>三个基本原则：</h3> <blockquote> <ol> <li> <p>单一数据源</p> </li> <li> <p>state为只读状态</p> </li> <li> <p>使用纯函数进行数据的修改</p> <p>不能在reducer中使用Date.now()或者 Math.random()等不纯的方法，</p> </li> </ol> </blockquote> <p>redux不仅可以在react使用，其他框架包括原生Dom也可以使用</p> <p><code>redux</code>要求我们把数据都放在 <code>store</code>公共存储空间</p> <p>只要<code>store</code> 里的数据发生改变，其他组件就能感知到变化，再来取数据，从而间接的实现数据传递的功能</p> <p>原理：把数据全部放在store公共储存空间中，</p> <h3>action负责分发行为：认为他是专家</h3> <p>通过dispatch类派发action给reducer</p> <h3>reducer具体执行行为：认为他是员工</h3> <p>通过接收action传递过来的type匹配相应的状态处理</p> <h3>store负责管理-员工和专家</h3> <p>创建数据的公共存储区域（管理员）</p> <pre><code>import { createStore } from 'redux' // 引入一个第三方的方法 const store = createStore() </code></pre> <p><strong>更多情况下使用react-redux语法使用redux</strong></p> <blockquote> <ol> <li>useSelector用于获取state的状态</li> <li>useDispatch用于调用action中修改state的方法</li> </ol> </blockquote> <p>遵顼三个原则：</p> <ol> <li>单一数据源，</li> <li>组件订阅的state数据为只读状态</li> <li>必须使用纯函数进行修改State数据</li> </ol> <p>Action：可以理解为他是一个专家，专门分发任务给reducer,</p> <p>reducer：可以理解为员工，专门处理action分发过来的任务，根据action传递过来的数据和指示进行state数据的修改，注意：不能直接修改state数据，需要基于原来的state数据进行修改</p> <p>store：可以理解为老板，管理action和reducer，</p> <p>通过：redux中的 createStore进行创建store store 参数1为 reducer，参数二为一些中间件</p> <p>通过applyMiddewares来注册一些中间件。</p> <p>需要想让组件都能使用redux中的数据需要在应用的跟组件中使用react-redux 中的 Provider 将跟组件进行包裹，传入store属性属性值为创建好的store 创建完成后组件就可以订阅redux中的数据根据state的变化进行组件更新渲染</p> <p>下面可以继续说组件中</p> <p>获取store原生的方法</p> <ul> <li>store.getState 可以帮助获取 store 里边所有的数据内容</li> <li>store.dispatch 派发 action , action 会传递给 store</li> <li>store.subscrible 订阅 store 的改变</li> </ul> <p>使用react-redux中的hooks 更方便使用store</p> <p>useSelstcer获取数据 useDispatch派发action</p> <h1>React中间件</h1> <p>当<code>action</code>发出之后，<code>reducer</code>立即算出<code>state</code>，整个过程是一个同步的操作</p> <p>那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件</p> <p><code>Redux</code>中，中间件就是放在就是在<code>dispatch</code>过程，在分发<code>action</code>进行拦截处理，</p> <p>通过<code>applyMiddlewares</code>进行注册</p> <pre><code>const store = createStore(reducer,applyMiddleware(thunk, logger)); </code></pre> <h2>react-thunk</h2> <p> 判断传入的是不是一个函数，如果是函数则传入dispatch、getstate两个参数</p> <p> dispatch用于再次派发action getstate 用于获取之前的一些state状态</p> <h2>react-lagger</h2> <p>用于获取操作日志打印在控制台</p> <h1>18、React中router的原理、解释、传参方式？</h1> <p><code>react-router</code>：路由核心</p> <p>原理：可以实现无刷新的条件下切换显示不同的页面，在URL发生变化时，页面结果可以根据URL的变化而改变，可以实现单页(SPA)应用</p> <p><code>react-router-dom</code>基于ract-router实现的一些配置功能</p> <p>提供了常用的Api</p> <ol> <li> <p>BrowserRouter：基于history模式</p> </li> <li> <p>HashRouter：基于URL地址的哈希值</p> <p>两者作为最顶层组件包裹其他组件</p> </li> <li> <p>Route用于匹配URL路径进行组件渲染</p> <p>通过path属性指定路径地址</p> <p>通过component属性指定匹配成功后渲染的组件</p> <p>通过exact属性是否开启严格匹配严格匹配就是url地址必须和path属性值完全一致才会渲染对应的组件</p> </li> <li> <p>Link和NavLink 最终会渲染成a标签用于跳转两者区别在于 NavLink添加组件被选中时的高亮效果</p> </li> </ol> <h2>常用的Api</h2> <blockquote> <p>react-router-dom</p> <ol> <li> <p>BrowserRouter、HashRouter</p> <p>使用两者作为最顶层组件包裹其他组件</p> </li> <li> <p>Route</p> </li> <li> <p>Link，NavLink</p> </li> <li> <p>Switch</p> </li> <li> <p>Redirect</p> </li> </ol> </blockquote> <h2>BrowserRouter、HashRouter原理：</h2> <blockquote> <ol> <li>BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。 HashRouter使用的是URL的哈希值。</li> <li>path表现形式不一样 BrowserRouter的路径中没有#,例如： HashRouter的路径包含# 9.l;</li> <li>刷新后对路由state参数的影响 (1).BrowserRouter没有任何影响，因为state保存在history对象中。 (2).HashRouter刷新后会导致路由state参数的丢失</li> <li>备注：HashRouter可以用于解决一些路径错误相关的问题。</li> </ol> </blockquote> <h2>Route</h2> <blockquote> <ol> <li><code>Route</code>用于路径的匹配</li> <li>path属性用于匹配路径</li> <li>component 匹配路径后用于指定渲染的组件</li> <li>exact精确匹配,开启后只有路由完全一致才会渲染组件</li> </ol> </blockquote> <h2>Link\NavLink</h2> <p>通常路径跳转使用Link组件，link组件最终会被渲染成a标签属性<code>to</code>指定需要跳转的路径。</p> <p>NavLink、Link区别在于</p> <p>NavLink在Link基础上增加了一些样式属性，如果想让组件被选中由样式变化可以使用Navlink</p> <ul> <li>activeStyle：活跃时（匹配时）的样式</li> <li>activeClassName：活跃时添加的class</li> </ul> <h2>Redirect路由重定向</h2> <p>用于路由的重定向，当访问路径匹配到from属性中的路径时，就会执行跳转到对应的<code>to</code>属性中的路径</p> <h2>switch路由筛选</h2> <p>匹配访问路径从第一个开始匹配如果匹配到了就渲染相应组件中，匹配不到可以在最后匹配以恶搞404页面</p> <h2>react-router路由传参</h2> <ol> <li>动态路由传参=>可以理解为跳转时传参，举例：商品列表等…</li> <li>search参数会拼接在地址栏后面,私密性差</li> <li>state: 刷新页面参数不消失,参数不会在地址栏显</li> </ol> <h2>react-router中的hooks</h2> <p>组件通过接收props 可以获取到路由对象对象中包含</p> <ol> <li><strong>history</strong>对象:其中history包含location</li> <li><strong>location</strong>：获取当前路径拿到当前路径地址和state search传参</li> <li><strong>match</strong>:通过match.params 获取动态路由传递的参数</li> </ol> <p>useHistory：无需通过props，直接访问history对象，</p> <p>useLocation：获取当前路径，和跳转时传递的参数</p> <p>useParams：用于获取动态路由中传递的一些参数</p> <p> 比如商品列表点击后向后端发送该商品的id 获取详情可以通过useParams拿到当前动态路由传递的id</p> <h1>20、immutable 不变的</h1> <p>immutable是一种持久化数据。一旦被创建就不会被修改</p> <p></p> <h1>21、类组件render方法原理</h1> <p>触发时机：</p> <p>在类组件中只要调用 setState 修改状态，一定会触发render</p> <p>函数组件中：通过useEffect，[state] state改变则触发重新渲染</p> <h1>22、React组件复用</h1> <h2>render-props</h2> <p>一个特殊的props传值，传递的是一个函数通过函数的返回值定制结构，为什么传函数为了支持接收内部的参数</p> <p>缺点：</p> <ol> <li>函数多层嵌套，不易维护</li> <li>组件结构也存在嵌套，层级过深</li> </ol> <h2>children-props</h2> <p>render-props的一种工作中常见</p> <h2>HOC高阶组件：</h2> <p>本质是一个函数增强组件功能传入一个组件返回一个增强后的新组件</p> <p>缺点：多层嵌套、外层数据丢失</p> <h1>23、获取页面滚动距离</h1> <p>IE兼容：</p> <pre><code>document.documentElement.scrollTop ||document.body.scrollTop </code></pre> <p>最新：</p> <pre><code>windown.pageXoffset windown.pageYoffset </code></pre> <h1>22、性能优化、避免不必要的render渲染</h1> <h2>组件更新机制</h2> <p>父组件渲染，必然会重新渲染子组件，但是渲染只会渲染当前组建的子树</p> <h2>类组件优化</h2> <h3>减轻state：</h3> <ul> <li>不用渲染的数据不要放在state中，比如说定时器id等</li> </ul> <h3>shouldComponentUpdate：</h3> <ul> <li>通过对比前后state、props变化来判断是否需要渲染</li> <li>缺点：逻辑判断太多或，手动写太麻烦</li> </ul> <h3>PureComponent----纯组件：</h3> <p>进行的是浅层对比，只会比较基本数据类型-比较地址</p> <pre><code>跟`shouldComponentUpdate`原理基本一致，通过对 `props` 和 `state`的浅比较结果来实现`shouldComponentUpdate` React.memo </code></pre> <h2>函数组件相关博客</h2> <h3>React.memo：</h3> <p>进行的是检测对比简单类型比较值复杂比较地址</p> <p>有依赖数据，如果更新组件时非常的消耗性能，能不更新就不更新</p> <p>缺点：如果父组件给子组件传递一个函数（提高警惕），每次只要父组件更新，函数就会重新声明，传给子组件的函数地址变化，React.memo就会无效</p> <h3>useCallback</h3> <p>用来缓存函数-复杂数据类型，配合React.memo实现性能优化，参数1是回调函数，参数2依赖项</p> <h3>useMemo</h3> <p>记忆任意数据类型-参数1是回调函数，参数2依赖项</p> <h1>23、怎样理解三次握手，四次挥手</h1> <h2>三次握手</h2> <p>作用：确定双方的接收、发送能力是否正常，指定自己的初始化序列号，为后续可靠传输做准备</p> <p>刚开客户端处于Closed状态，服务端处于Listen状态</p> <p>第一次握手：客户端向服务端发送SYN报文，并指明客户端初始化序列号ISN©,此时客户端进入SYN_send状态/等待</p> <p>第二次握手：服务端收到SYN报文后，会以自己的SYN作为应答，并指明自己的初始化序列号ISN，同时将客户端的ISN+1作为Ack的值，表示收到客户端的SYN，同时进入SYN_RCVD状态/接收</p> <p>第三次：客户端收到SYN后，发送一个ACK报文，也是将服务端的ISN+1作为ACK的值，表示收到服务端的SYN报文。此时客户端处于established状态，服务端收到ACK后，也处于established状态，此时双方成功建立连接</p> <h2>ISN是固定的吗？</h2> <p>答案：不是固定的，三次握手的一个重要功能就是交换双方的ISN，以便让对方知道接收到的输入如何按序列号进行组装，如果ISN是固定的，攻击者很容易推断出后续的确认号，所以ISN是动态生成的</p> <h2>什么是半连接队列？</h2> <p>服务端第一次收到SYN后，就会处于SYN_RCVD,此时双方还没完全建立连接，服务端会把这种状态放在一个队列中，我们把这这种队列称为半连接队列，等三次握手完毕后，建立的连接就会放在全连接队列中，如果队列满了就会产生丢包的情况。</p> <h2>三次握手可以携带参数吗？</h2> <p>第三次握手时可以携带参数，第一次和第二次不能携带，举例：</p> <p>第一次就可以携带参数的话，假如有人恶意攻击服务器，攻击者根本不在乎服务器的接收、发送能力是否正常，如果每次都在第一次握手中的SYN报文中携带大量数据，重复的发SYN报文的话，那么服务器会花费大量时间、内存空间接收这些报文。所以得出的结论，如果在第一次握手中携带数据，那么服务器更容易收到攻击</p> <p>对于在第三次携带数据的话，此时客户端已经处于established状态，对于客户端来说已经建立连接，并且确定服务端的发送和接收能力时正常的，所以携带参数完全没问题。</p> <h2>四次挥手</h2> <p>第一次挥手：客户端发送一个FIN报文，报文中指定一个序列号，此时客户端进入FIN_WAIT_1状态，表示停止在发送数据</p> <p>第二次挥手：服务端收到FIN报文后，会回应一个ACK报文，把客户端的序列号+1作为ACK的值，此时服务端处于Close_WAIT状态，表示服务端同意关闭请求，客户端进入FIN_WAIT2状态等待服务端发出连接释放报文</p> <p>第三次挥手：如果服务端也想断开连接了，和第一次挥手一样发出FIN报文，此时服务端处于LAST_ACK状态，表示发出连接释放报文，等待客户端确认</p> <p>第四次挥手：客户端收到FIN报文后，一样发送一个ACK报文，且把服务器的序列号+1作为ACK的值。此时客户端进入TIME_WAIT状态，需要经过等待计时器的时间2MSL后仍然没有回复，才会进入closed状态，而服务端收到ACK报文后直接进入Closed状态</p> <p>通俗理解：</p> <p>第一次挥手：小明和小红闹分手，小红说我不爱你了分手吧，</p> <p>第二次挥手：小明说我知道了，让我考虑一下。</p> <p>第三次挥手：小明说我考虑好了分手吧</p> <p>第四次挥手：小红说那就这样吧，再见！这时候小明看到微信直接给小红拉黑了，代表服务端已经关闭了连接，但是这时候小红有点不甘心，又等了一会看看小明会不会回复自己，等了一会没有回复那么小红也给小明拉黑了，这时候四次挥手完成</p> <h1>JS基础部分</h1> <h2>数组常用方法：</h2> <h3>增</h3> <h4>#push()</h4> <p><code>push()</code>方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度</p> <pre><code>let colors = []; // 创建一个数组 let count = colors.push("red", "green"); // 推入两项 console.log(count) // 2 </code></pre> <h4>#unshift()</h4> <p>unshift()在数组开头添加任意多个值，然后返回新的数组长度</p> <pre><code>let colors = new Array(); // 创建一个数组 let count = colors.unshift("red", "green"); // 从数组开头推入两项 alert(count); // 2 </code></pre> <h4>#splice</h4> <p>传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组</p> <pre><code>let colors = ["red", "green", "blue"]; let removed = colors.splice(1, 0, "yellow", "orange") console.log(colors) // red,yellow,orange,green,blue console.log(removed) // [] </code></pre> <h4>#concat()</h4> <p>首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组</p> <pre><code>let colors = ["red", "green", "blue"]; let colors2 = colors.concat("yellow", ["black", "brown"]); console.log(colors); // ["red", "green","blue"] console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"] </code></pre> <h3>删</h3> <h4>pop()</h4> <p><code>pop()</code> 方法用于删除数组的最后一项，同时减少数组的<code>length</code> 值，返回被删除的项</p> <pre><code>let colors = ["red", "green"] let item = colors.pop(); // 取得最后一项 console.log(item) // green console.log(colors.length) // 1 </code></pre> <h4>#shift()</h4> <p><code>shift()</code>方法用于删除数组的第一项，同时减少数组的<code>length</code> 值，返回被删除的项</p> <pre><code>let colors = ["red", "green"] let item = colors.shift(); // 取得第一项 console.log(item) // red console.log(colors.length) // 1 </code></pre> <h4>#splice()</h4> <p>传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组</p> <pre><code>let colors = ["red", "green", "blue"]; let removed = colors.splice(0,1); // 删除第一项 console.log(colors); // green,blue console.log(removed); // red，只有一个元素的数组 </code></pre> <h4>#slice()</h4> <p>slice() 用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组</p> <pre><code>let colors = ["red", "green", "blue", "yellow", "purple"]; let colors2 = colors.slice(1); let colors3 = colors.slice(1, 4); console.log(colors) // red,green,blue,yellow,purple concole.log(colors2); // green,blue,yellow,purple concole.log(colors3); // green,blue,yellow1 </code></pre> <h3>改</h3> <p>即修改原来数组的内容，常用<code>splice</code></p> <h4>splice()</h4> <p>传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响</p> <pre><code>let colors = ["red", "green", "blue"]; let removed = colors.splice(1, 1, "red", "purple"); // 插入两个值，删除一个元素 console.log(colors); // red,red,purple,blue console.log(removed); // green，只有一个元素的数组 </code></pre> <h2>字符串方法：</h2> <h3>增：</h3> <p>concat</p> <h3>删除：</h3> <p>slice() substr() substring()</p> <h3>改：</h3> <ul> <li>trim()、trimLeft()、trimRight()</li> <li>repeat()</li> <li>padStart()、padEnd()</li> <li>toLowerCase()、 toUpperCase()</li> </ul> <h3>查：</h3> <ul> <li>chatAt()</li> <li>indexOf()</li> <li>startWith()</li> <li>includes()</li> </ul> <h1>JS高级</h1> <h2>1、原型、原型链的理解</h2> <p>函数可以有属性，每个函数都有一个特殊的属性叫作原型<code>prototype</code>，也被称为原型对象</p> <p><code>prototype</code>原型对象里的<code>constructor</code>指向构造函数本身</p> <p>对象都有–proto-- 属性，指向当前对象的原型对象，原型对象也是对象也有–proto–属性，指向原型对象的原型对象，着用一层一层的链式关系叫做原型链</p> <p>通过构造函数Person new出来的是实例对象p，p对象有–proto–属性，指向原型对象Person.rototype,原型对象也有–proto–属性，指向原型对象Object.prototype，他也有–proto–属性指向null</p> <p><a href="http://img.e-com-net.com/image/info8/fe516d67606a4194bbbb91ba82158a2c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe516d67606a4194bbbb91ba82158a2c.jpg" alt="react面试题_第5张图片" width="650" height="348" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/7c49e52d03ca4781a7eadf395a3165d9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7c49e52d03ca4781a7eadf395a3165d9.png" alt="react面试题_第6张图片" width="661" height="699" style="border:1px solid black;"></a></p> <h2>2、JS继承方式</h2> <p>作用：可以使子类具有父类的各种属性和方法，而不需要再次编写相同的代码，在继承父类时可以重新定义某些属性，覆盖父类原有的属性和方法，使他获得和父类不同的功能</p> <h3>原型链继承</h3> <p>原型链继承：子原型的父类型的一个实例对象</p> <p>函数都有prototype属性，属性的值的是个对象.被称为原型，对象都有<strong>proto</strong>属性指向它的原型对象…</p> <pre><code> Student.prototype = new Person() // 子类型的原型为父类型的一个实例对象 // 来自原型对象的所有属性被所有实例共享 // 如果需要重新子类属性一定放在替换原型的语句之后 // 父类新增的属性/方法子类都可以访问 // 无法向父类构造函数传参 </code></pre> <h3>构造函数继承</h3> <pre><code>// 在子类型构造函数中通用call()调用父类型构造函数 // 只能继承父类的属性和方法，不能继承父类原型的属性和方法 // 创建实例时可向父类传参 function Parent() { this.name = 'parent1' this.getplay = function () { console.log(121) } } Parent.prototype.getName = function () { return this.name } function Child() { Parent.call(this) this.type = 'child' } let child = new Child() console.log(child) // 没问题 console.log(child.getName()) // 会报错 </code></pre> <h3>组合式继承</h3> <pre><code>// 保留继承父类属性和传参的优点，通过将父类实例作为子类原型 // 可以继承实例属性/方法，也可以继承原型属性/方法 // 缺点：调用了两次父类构造函数，生成了两份实例 </code></pre> <h3>原型式继承</h3> <pre><code>通过 #Object.create()浅拷贝已有的对象创建新的对象，同时还不必因此创建自定义类型。用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了一个可以随意添增属性的实例或对象。缺点：多个实例的引用类型属性指向相同的内存，存在篡改的可能 </code></pre> <h3>寄生式继承</h3> <pre><code>寄生式继承在上面继承基础上进行优化，利用这个浅拷贝的能力再进行增强，添加一些方法 </code></pre> <h3>寄生组合式继承</h3> <pre><code>借助解决普通对象的继承问题的Object.create 方法在前面几种继承方式的优缺点基础上进行改造 </code></pre> <h3>class继承</h3> <pre><code>class可以通过 extends 关键字，只是原型的语法糖，仍然是基于原型实现的。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this </code></pre> <p>[https://juejin.cn/post/6889815642099335181]:</p> <h1>作用域的理解</h1> <p>分为函数作用域、全局作用域、块级作用域</p> <p>任何不在函数内或者大括号内生命的变量都是全局作用域，他声明的变量可以让全局访问</p> <p>函数作用域：就是在函数内部声明的变量只在当前函数内部有效，外部不可以访问这些变量</p> <p>块级作用域比如说if 或者大括号内都算块级作用域、</p> <p>作用域链就是在js中声明一个变量他会在当前作用域中查找如果找不到就会向上层作用域查找直到找到全局作用域如果还是找不到那么控制台回直接报错</p> <h1>手写Promise</h1> <p>Promise内部提供两个方法</p> <pre><code>成功时调用 resolve() 失败调用reject() </code></pre> <p>三个状态：</p> <pre><code>pending 等待中 fulfilled 成功状态 rejected 失败状态 #初始状态pending 调用resolve() 会将当前状态修改为# fulfilled fao非o的调用reject() 会将当前状态修改为 #rejected .then 接收成功后的结果 .catch 接收失败时的结果 .finally 无论成功失败都会执行 </code></pre> <h2>手写开始</h2> <pre><code>1.创建Promise类=>构造函数 2.创建new Promise实例对象传入一个函数=>需要传递两个参数 3.遵循promiseA+ constructor 传入 executor AK在KT 并且立即执行 4.executor中需要两个函数成功/失败 5.在实例中调用resolve() 执行成功信息 / 反之调用resolve或reject时候可传实参，函数本身作为形参接收成功时修改this.state的状态为 fulfilled 并且记录修改后的值this.value = 接收的形参失败时修改this.state的状态为 rejected 并且记录失败原因this.reason = 接受的形参 6.Promise的状态一旦发生变化就会凝固不能再改变只有pending的时候才能改变状态修改判断状态是否为pending 7.此时用.then拿结果是拿不到的还没有.then方法给原型对象添加.then方法 .then语法：传入两个函数参数1 onFulfilled 成功的回调参数2 onrejected 失败后的回调区别：onrejected只会捕获当前实例对象p的失败，而.catch会捕获全部错误包括onFulfilled 全局捕获 8.原型上的.then接收两个参数成功的onFulfilled 失败onRejected 判断当前状态是否为Fulfilled 如果是则调用onFulfilled 如果不是则调用onRejected 将成功的值/失败的值返回出去 9.如果下面的.then想拿到成功或失败的参数需要将当前 this.value给到onFulfilled this.reason给onRejected 10.为了代码健壮性如果执行executor(resolve,reject)报错直接调用reject() '异步处理' 11.此时调用resovle或reject为异步由于调用是异步的而.then并不知道你是异步的所以then先执行而状态永远是pending 所以永远没有返回东西出来 .解决方案定义两个数组 onResolveCallback 用于存放成功时需要执行的函数 onRejectCallback 用于存放失败时需要执行的函数如果当前状态等于 pending的情况下将成功/失败要做的事全部存入相应数组当调用resovle或reject时将对应数组中的函数全部 .遍历执行 </code></pre> <p>同步代码：</p> <pre><code> class Promise { // 遵循prmoiseA+ 传入imd 并且立即执行 constructor(imd) { //记录初始状态 this.state = 'pending' //记录成功初始值给将来.then获取成功结果使用的 this.value = undefined //记录失败的原因/值给将来.catch获取失败原因使用的 this.reason = undefined // 成功函数，成功时修改this.state的状态为 fulfilled let resolve = (value) => { // 如果当前不是pendind状态就不能修改 if (this.state !== 'pending') return // 更新后的状态 this.state = 'fulfilled' //更新成功初始值 this.value = value // console.log('成功信息') } // 失败函数。失败时修改this.state的状态为 rejected let reject = (err) => { if (this.state !== 'pending') return // 更新后的状态 this.state = 'rejected' // 记录失败原因 this.reason = err // console.log('失败信息') } // imd需要传递两个函数成功/失败 // 如果执行imd报错直接返回错误 try { imd(resolve, reject) } catch (err) { reject() } } // 如果此时不加then方法下面获取不到成功信息 // onFu1Fi1led成功时候被调用 // onRejected 失败时调用 then(onFu1Fi1led, onRejected) { // 判断状态如果 fulfilled 状态是调用 onFu1Fi1led // 将成功的值/失败的值返回出去 if (this.state === 'fulfilled') { onFu1Fi1led(this.value) } // 否则 onRejected if (this.state === 'rejected') { onRejected(this.reason) } } } const p1 = new Promise((resolve, reject) => { // console.log(resolve, reject) // console.log('立即执行') // 调用执行成功信息 // resolve('你对了') // 调用执行失败信息 reject('你错了') }) p1.then( (res) => { console.log(res, '成功的回调') }, (err) => { console.log(err, '失败的回调') } ) console.log(p1) </code></pre> <p>处理异步后</p> <pre><code> class Promise { // 遵循prmoiseA+ 传入imd 并且立即执行 constructor(imd) { //记录初始状态 this.state = 'pending' //记录成功初始值给将来.then获取成功结果使用的 this.value = undefined //记录失败的原因/值给将来.catch获取失败原因使用的 this.reason = undefined // 处理异步 //用于存放成功时候需要执行的函数 this.onResolveCallback = [] // 用于存放失败时候需要执行的函数 this.onRejectCallback = [] // 成功函数，成功时修改this.state的状态为 fulfilled let resolve = (value) => { // 如果当前不是pendind状态就不能修改 if (this.state !== 'pending') return // 更新后的状态 this.state = 'fulfilled' //更新成功初始值 this.value = value // console.log('成功信息') // 处理异步 // 遍历成功数组中的每个函数并执行 this.onResolveCallback.forEach((fn) => fn()) console.log('resolve,执行了') } // 失败函数。失败时修改this.state的状态为 rejected let reject = (err) => { if (this.state !== 'pending') return // 更新后的状态 this.state = 'rejected' // 记录失败原因 this.reason = err // console.log('失败信息') this.onRejectCallback.forEach((fn) => fn()) } // imd需要传递两个函数成功/失败 // 如果执行imd报错直接返回错误 try { imd(resolve, reject) } catch (err) { reject(err) } } // 如果此时不加then方法下面获取不到成功信息 // onFu1Fi1led成功时候被调用 // onRejected 失败时调用 then(onFu1Fi1led, onRejected) { // 判断状态如果 fulfilled 状态是调用 onFu1Fi1led // 将成功的值/失败的值返回出去 if (this.state === 'fulfilled') { onFu1Fi1led(this.value) } // 否则 onRejected if (this.state === 'rejected') { onRejected(this.reason) } // 处理异步如果当前状态时pending状态 // 在成功的数组中添加对应的函数 if ((this.state = 'pending')) { // 成功的 this.onResolveCallback.push(() => { onFu1Fi1led(this.value) }) // 失败的 this.onRejectCallback.push(() => { onFu1Fi1led(this.reason) }) } console.log('then', '执行了') } } const p1 = new Promise((resolve, reject) => { // console.log(resolve, reject) // console.log('立即执行') // 调用执行成功信息 setTimeout(() => { resolve('你对了') // reject('你错了') }, 3000) // 调用执行失败信息 // reject('你错了') }) // 此时函数并没有满足调用onFulfilled的条件所以没有结果 // 应该等条件满足时调用只有状态等于 fu1Fi1led 在调用onFulfilled p1.then((res) => { console.log(res, '1') }) p1.then((res) => { console.log(res, '2') }) p1.then((res) => { console.log(res, '3') }) p1.then((res) => { console.log(res, '4') }) p1.then((res) => { console.log(res, '5') }) console.log(p1) </code></pre> <h1>面试题总结</h1> <h2>判断类型</h2> <pre><code>//直接任意判断类型 Object.prototype.toString.call </code></pre> <h2>为什么用hooks</h2> <pre><code> 可以在不编写类组件的情况下使组件容易自己的状态和可以使用react的特性 - 更容易解决状态相关的重用的问题 - 通过自定义hook能够更好的封装组件功能，能解决开发中的大多数问题，拥有代码复用机制 - 可以完全避免使用生命周期方法，编写起来代码整体风格优雅 </code></pre> <h1>JS面试常问</h1> <pre><code> let obj = {} // 判断是不是一个空对象 console.log(JSON.stringify(obj) === '{}') //true // 对象转数组判断数组长度 console.log(Object.keys(obj).length === 0) //true let arr = [] // 判断是不是数组类型 console.log(Object.prototype.toString.call(arr)) //[object Object] // jQuery判断类型 console.log($.type(arr)) //Array // 判断是不是函数/数组类型 function fn() {} console.log(typeof fn) //function console.log(arr instanceof Array) //Array // 数组去重 let arr1 = [1, 3, 4, 5, 5, 5, 4, 4, 4, 4, 7, 8, 0] let res = new Set(arr1) console.log(...res) // 数组降维 1 concat配合扩展运算符 let arr2 = [1, 3, 4, 5, 5, [5, 6, 9], 0] console.log([].concat(...arr2)) // 数组降维 2 里面包裹几层就flat传几 let arr3 = [1, 3, 4, 5, 5, [5, 3, 5, 8, 4, 2, [4, 7], 6, 9], 0] let res2 = arr3.flat(2) </code></pre> <h1>项目亮点</h1> <h2>面试题：无感刷新如何完成</h2> <pre><code>// 无感刷新回答： // 首先发送请求如果后台返回401 那么响应拦截器中处理 => 判断是否是有token // 如果有说明token过期了 => 尝试用refresh_token 如果成功把获取到的新token存仓库并重新发送第一次请求如果失败，说明refresh_token 也过期了则跳转到登录页情况仓库中油管token的信息 // 优化：可以在跳转时记录被拦截前的路径等待用户登录后实现页面回跳 </code></pre> <h2>封装routerV5路由鉴权</h2> <p>原理：在进入需要token请求的页面时，通过封装的路由组件进行一次判断，</p> <p>原理：</p> <pre><code>#接收children传参 component标签传参 ...rest 1.判断本都是否有token，如果有 return children 或者 component传入的路由信息 2.如果没有token 做路由重定向定向到登录页面并且传入被拦截前的路径信息用于登录回跳 import { getToken } from '@/utils/tokenApi' import { Redirect, Route, RouteProps, useLocation } from 'react-router-dom' interface PrivateRouteType extends RouteProps { component: any } // children传入组件 component标签传组件 function PrivateRoute({ children, component: Component, ...rest }: PrivateRouteType) { const location = useLocation() return ( <Route {...rest} render={() => { // 查看本地是否有token 获取token const token = getToken() // 如果有就去传递过来的组件 if (token.token) { return children ? children : <Component></Component> } else { // 没有就去login state/from 记录拦截下来的地址用于回调 return ( <Redirect to={{ pathname: '/login', // state传参 state: { form: location.pathname }, }} ></Redirect> ) } }} /> ) } export default PrivateRoute </code></pre> <h2>使用原生-ahooks防抖</h2> <p>防抖核心： <code>延时执行</code></p> <p>当用户输入关键字时,不会立即触发请求</p> <p>开启延时器在固定时间后发送请求，如果在这期间继续输入了内容，则关闭延时器重新开启新的延时器</p> <p>原生实现：</p> <pre><code>const timer = useRef(0) //关闭延时器 clearTimeout(timer.current) // 开启延时器 timer.current = window.setTimeout(() => { console.log('输入内容,可以发请求了') }, 500) </code></pre> <p>ahooks实现：useDebounceFn自定义hooks</p> <pre><code>使用ahooks中的 #useDebounceFn const { run }=useDebounceFn(()=>{ //执行逻辑 }，{ options 配置防抖时间...等等 }) </code></pre> <h2>使用原生-ahooks节流</h2> <p>立即执行，指定时间范围内只会触发一次</p> <pre><code> const { run } = useThrottleFn( () => { setcount((count) => { return count + 1 }) }, { wait: 2000, } ) </code></pre> <h2>文件上传组件封装</h2> <pre><code>将Antd文件上传组件进行二次封装，保留原有的属性，把用户上传的文件存入数组组件通过props接收数据进行文件类型文件大小进行判断最后决定是否上传 </code></pre> <h3>原理：</h3> <p>分片上传：就是将整个大的文件拆分成多个小的数据块进行分片上传，上传完成之后再由服务器进行数据块组装，整合成原始的文件</p> <pre><code>1.将需要上传的文件按照一定的分割规则，拆分成大小相同的数据块 2.创建一个分片上传任务返回本次分片上传的唯一标识 3.串行或者并行的策略发送每个分片数据块 4.发送完成过服务器判断是否上传完整如果完整则将所有数据块进行组装合成合成完整的文件 </code></pre> <h2>头像上传获取file文件对象</h2> <pre><code>使用：<input type="file" onChange={onChangePhoto} /> 函数：const changePhoto = (e: React.ChangeEvent<HTMLInputElement>) => { // 获取选择的文件 const file = e.target.files![0] // 需要上传这张图片 const fd = new FormData() fd.append('photo', file) // 发送请求 dispatch(.....) } </code></pre> <h2>首屏加载优化</h2> <ol> <li> <p>白屏时的loading动画</p> </li> <li> <p>路由懒加载-React.lazy</p> </li> <li> <p>异步组件React.Suspense- 骨架屏</p> </li> <li> <p>前端请求改为服务器内网请求</p> <pre><code>比如用户信息这类接口本来是前端请求完后拿到用户信息，再拿着用户信息去请求与用户相关的页面数据，但是有些网络不稳定的地方接口串行很容易慢，如果一个超时了还得再请求一遍，所以这类移到服务端去做，直接变成内网调用接口，不受客户端网络环境影响。 </code></pre> </li> <li> <p>部分接口数据做localstorage缓存</p> <pre><code>一进页面先去localstorage中拿数据渲染，然后再动态更新。 </code></pre> </li> <li> <p>服务端渲染首屏不然你这样还是要等js返回才开始渲染页面</p> </li> <li> <p>使用 CDN 加载资源、OSS对象存储</p> </li> <li> <p>App webview只是一个可视化的组件</p> </li> <li> <p>前端代码打包优化</p> <ol> <li>Tree Shaking 是一个术语，在计算机中表示消除死代码</li> </ol> </li> </ol> <h2>性能优化</h2> <h2>webpack</h2> <p>webpack是一个打包的工具它可以解决浏览器兼容问题模块化整合代码的能力</p> <pre><code>//资源打包分析 webpack-bundle-analyzer //反向代理 proxy //首先需要一个中间服务器，webpack中提供服务器的工具为 webpack-dev-server //压缩代码 webpack -p //html压缩 html-webpack-plugin //对图片进行压缩和优化 image-webpack-loader //删除无用的CSS样式 purgecss-webpack-plugin // 开启Tree Shaking // 按需加载&动态加载 plugin-syntax-dynamic-import </code></pre> <h2>路由懒加载 React.lazy</h2> <pre><code>const Login = React.lazy(() => import('./pages/Login')) const Layout = React.lazy(() => import('./pages/Layout')) const NotFound = React.lazy(() => import('./pages/NotFound')) </code></pre> <h2>图片懒加载</h2> <p>优化：</p> <pre><code> // 原理： // 首先不会直接给img设置图片路径，因为直接设置会进入页面就加载 // 通过data-img设置图片路径，使用原生 IntersectionObserver的Api进行监听，当图片进入可视区域后在将data-src图片地址赋值给img的src属性 observe 开启监听 unobserve 结束特定监听 disconnect()组件卸载时触发全部停止监听 </code></pre> <h2>websocket</h2> <p>原理：</p> <ol> <li> <p>客户端与服务器建立连接，成功后，服务器会确认连接建立成功。</p> </li> <li> <p>客户端与服务器建立 WebSocket 长连接</p> <p>适用场景：聊天室、实时推送消息、实时图表、股票</p> </li> <li> <p>这时候服务器就可以主动发请求给客户端。</p> </li> <li> <p>通过<code>yarn add socket.io-client</code>包</p> </li> </ol> <pre><code>//提供了API // 和服务器建立了链接 const client = io('地址', { query: { token: 用户token }, transports: ['websocket'] }) #使用中Api //当和服务器建立连接成功触发 client.on('connect', () => { 在这里可以做提示用户你好...... }) //接收到服务器的消息触发 client.on('message', (data) => { data中是#机器人\客服接口返回来的消息 }) // 主动给服务器发送消息 client.emit('message', 值=>传递类型由后端定制) // 和服务器断开链接，就会触发disconnect client.on('disconnect', () => { //可以做提示是等。。。。 }) // 主动关闭和服务器的链接 client.close() </code></pre> <h2>JWT是什么？</h2> <p>它是由三部分组成：头信息（header）, 消息体（payload）和签名（signature）。</p> <p>用户在前端输入账号信息请求到后端服务器、当验证用户账号和密码正确的时候，给用户颁发一个令牌，这个令牌作为后续用户访问一些接口的凭证，后续访问会根据这个令牌判断用户时候有权限进行访问</p> <h3>header</h3> <p>包含alg 表示算法HS256 和 typ 默认就是JWT 两个属性</p> <p>因为JWT是字符串所以进行需要base64编码编码后就是token</p> <h3>payload</h3> <p>这里存放的是用户的信息，账号，密码，id等等</p> <p>认情况下也会携带令牌的签发时间同样进行Base64编码后</p> <h3>签名是对头部和载荷内容进行签名</h3> <p>对前两个的结果进行<code>HMACSHA25</code>算法</p> <h2>单系统登录</h2> <p>早期实现：单系统登录的核心是cookie用cookie携带会话id</p> <p>在浏览器与服务器之前维护会话状态，但是cookie有限制，</p> <ol> <li>只能在统一个顶级域名中使用，而且用的web服务器必须相同，否则无法维持会话</li> <li>共享cookie的方法也无法实现跨语言技术的平台登录</li> <li>最重要的是cookie本身不安全</li> </ol> <pre><code>早期实现方案核心是通过cookie实现单系统登录但是cookie存在局限性 1.cookie存在域的限制 http请求时只会卸载与该域名匹配的cookie 而不是所有的cookie 2.只能在相同顶级域名下才能实现cookie共享 3.应用群系统使用的技术必须一致最起码需要在统一个服务器环境下 4.共享cookie无法实现跨语言技术平台的登录 5.共享cookie本身不安全 </code></pre> <h2>单点登录 Single Sign On</h2> <p>所以有了sso技术，相对于单系统登录，</p> <h2><a href="http://img.e-com-net.com/image/info8/952a2b578ea143e1ac0b08a0948737e0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/952a2b578ea143e1ac0b08a0948737e0.jpg" alt="react面试题_第7张图片" width="650" height="821" style="border:1px solid black;"></a></h2> <p>说明：多系统应用群中登录一个系统，便可在其他所有系统中得到授权而无需再次登录，包括单点登录与单点注销两部分</p> <p>用途：用户访问web系统的整个应用群与访问单个系统一样，登录/注销只要一次就够了</p> <p>sso需要一个独立的认证中心，只有认证中心能接收到用户的账号密码等信息，子系统接受认证中心的间接受令牌授权，sso认证中心验证用户账号密码没问题，就会生成令牌，在跳转过程中把令牌作为参数发送给每个子系统，子系统拿到令牌后，即得到了授权，可以通过令牌来创建会话，</p> <pre><code>面试回答： 1.sso需要一个独立的认证中心只有sso认证中心能接收用户的账号密码信息 2.sso中心收到的账号密码没问题就会生成令牌创建全局会话 3.在跳转过程中将令牌作为参数分配个每个子系统 4.子系统拿到令牌即授权成功，可以通过令牌建立与用户之间的局部会话 5.当局部会话创建后后续访问子系统将不在通过sso认证中心注意：、局部会话存在那么全局会话一定存在全局会话存在局部会话不一定存在全局会话销毁局部会话必须销毁 </code></pre> <ol> <li>首先用户访问系统1，系统1 发现用户没有登录,则将自己的地址作为参数，跳转至sso认证中心，sso中心发现用户没有登录，将用户引导到登录页。</li> <li>用户账号密码信息后，sso中心来校验账号密码，校验完成后创建用户与sso中心之间的会话，也被称为全局会话，同时创建授权令牌</li> <li>sso中心带着授权令牌跳转回系统1</li> <li>系统1拿到令牌后,去sso中心进行校验</li> <li>校验通过后，系统1使用令牌创建用户会话，被称为局部会话</li> </ol> <h2>React中解析html代码</h2> <p>将后端传递过来的html代码通过属性差异解析成合法的html语句</p> <p>属性差异dangerouslySetInnerHTML</p> <pre><code> // 类似原生的 innerHTLI dangerouslySetInnerHTML={{ _html: highLight(item), }} </code></pre> <h2>XSS跨站脚本攻击</h2> <p>攻击方案：写html或者script脚本被innerHMTL脚本解析</p> <p>解决方案：详解</p> <pre><code>yarn add dompurify yarn add @types/dompurify --安装类型说明文件 import DOMPurify from 'dompurify' dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize( // `<img onLoad={alert(localStorage.getItem('H5_Geek_Token'))} src="https://dgimg-1306779837.cos.ap-shanghai.myqcloud.com/20220210/do3kqL2k.png" alt="ada9eb4d5b62d.png" title="ada9eb4d5b62d.png" />` info.content ), }} <div className="content-html dg-html" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(info.content || '') }} > </div> </code></pre> <h2>快速解析地址栏参数-URLSearchParams</h2> <pre><code> var params = new URLSearchParams(location.search) console.log(params.get('keyword')) </code></pre> <h2>缓存组件-当前页</h2> <p>通过：Tabs.Tab 组件只能解决当前页暂存</p> <pre><code>forceRender 被隐藏时是否渲染 `DOM` 结构 `boolean``false` </code></pre> <h2>缓存组件-封装keep-alive组件</h2> <pre><code>import { Route, RouteProps } from 'react-router-dom' import styles from './index.module.scss' type Props = RouteProps & { activePath: string } // 示例： // 1 需要保留页面的路由地址 activePath: '/home'，浏览器地址栏（当前路由）pathname: '/home' // 1 需要保留页面的路由地址 activePath: '/home'，浏览器地址栏（当前路由）pathname: '/home/index' // 2 需要保留页面的路由地址 activePath: '/home'，浏览器地址栏（当前路由）pathname: '/login' // 使用方法： const KeepAlive = ({ activePath, children, ...rest }: Props) => { return ( <Route {...rest} children={(props) => { const { location: { pathname }, } = props const isMatch = pathname.startsWith(activePath) return ( <div className={styles.root} style={{ display: isMatch ? 'block' : 'none' }} > {children} </div> ) }} /> ) } export defaulet KeepAlive </code></pre> <h2>文章代码高亮 highlight插件</h2> <pre><code>yarn add highlight.js import hljs from 'highlight.js' import 'highlight.js/styles/vs2015.css' useEffect(() => { // 配置 highlight.js hljs.configure({ // 忽略未经转义的 HTML 字符 ignoreUnescapedHTML: true, }) // 获取到内容中所有的code标签 const codes = document.querySelectorAll('.dg-html pre code') codes.forEach((el) => { // 让code进行高亮 hljs.highlightElement(el as HTMLElement) }) }, []) </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1683457803177504768"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(react.js,前端,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> <span class="text-muted">海淀萌狗</span> <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> <span class="text-muted">Q_w7742</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> <span class="text-muted">weixin_47088026</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> <span class="text-muted">暴躁的鱼</span> <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/35.htm" title="JVM StackMapTable 属性的作用及理解" target="_blank">JVM StackMapTable 属性的作用及理解</a> <span class="text-muted">lijingyao8206</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E7%A0%81/1.htm">字节码</a><a class="tag" taget="_blank" href="/search/Class%E6%96%87%E4%BB%B6/1.htm">Class文件</a><a class="tag" taget="_blank" href="/search/StackMapTable/1.htm">StackMapTable</a> <div> 在Java 6版本之后JVM引入了栈图(Stack Map Table)概念。为了提高验证过程的效率，在字节码规范中添加了Stack Map Table属性，以下简称栈图，其方法的code属性中存储了局部变量和操作数的类型验证以及字节码的偏移量。也就是一个method需要且仅对应一个Stack Map Table。在Java 7版</div> </li> <li><a href="/article/162.htm" title="回调函数调用方法" target="_blank">回调函数调用方法</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近在看大神写的代码时,.发现其中使用了很多的回调 ,以前只是在学习的时候经常用到 ,现在写个笔记记录一下代码很简单: MainDemo :调用方法得到方法的返回结果 </div> </li> <li><a href="/article/289.htm" title="[时间机器]制造时间机器需要一些材料" target="_blank">[时间机器]制造时间机器需要一些材料</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a> <div> 根据我的计算和推测,要完全实现制造一台时间机器,需要某些我们这个世界不存在的物质和材料... 甚至可以这样说,这种材料和物质,我们在反应堆中也无法获得...... </div> </li> <li><a href="/article/416.htm" title="开口埋怨不如闭口做事" target="_blank">开口埋怨不如闭口做事</a> <span class="text-muted">邓集海</span> <a class="tag" taget="_blank" href="/search/%E9%82%93%E9%9B%86%E6%B5%B7+%E5%81%9A%E4%BA%BA+%E5%81%9A%E4%BA%8B+%E5%B7%A5%E4%BD%9C/1.htm">邓集海做人做事工作</a> <div>“开口埋怨，不如闭口做事。”不是名人名言，而是一个普通父亲对儿子的训导。但是，因为这句训导，这位普通父亲却造就了一个名人儿子。这位普通父亲造就的名人儿子，叫张明正。　　　　张明正出身贫寒，读书时成绩差，常挨老师批评。高中毕业，张明正连普通大学的分数线都没上。高考成绩出来后，平时开口怨这怨那的张明正，不从自身找原因，而是不停地埋怨自己家庭条件不好、埋怨父母没有给他创造良好的学习环境。　　　　</div> </li> <li><a href="/article/543.htm" title="jQuery插件开发全解析，类级别与对象级别开发" target="_blank">jQuery插件开发全解析，类级别与对象级别开发</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6%E3%80%80/1.htm">插件　</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>jQuery插件的开发包括两种：一种是类级别的插件开发，即给 jQuery添加新的全局函数，相当于给 jQuery类本身添加方法。 jQuery的全局函数就是属于 jQuery命名空间的函数，另一种是对象级别的插件开发，即给 jQuery对象添加方法。下面就两种函数的开发做详细的说明。 1 、类级别的插件开发类级别的插件开发最直接的理解就是给jQuer</div> </li> <li><a href="/article/670.htm" title="Rome解析Rss" target="_blank">Rome解析Rss</a> <span class="text-muted">413277409</span> <a class="tag" taget="_blank" href="/search/Rome%E8%A7%A3%E6%9E%90Rss/1.htm">Rome解析Rss</a> <div>import java.net.URL; import java.util.List; import org.junit.Test; import com.sun.syndication.feed.synd.SyndCategory; import com.sun.syndication.feed.synd.S</div> </li> <li><a href="/article/797.htm" title="RSA加密解密" target="_blank">RSA加密解密</a> <span class="text-muted">无量</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86/1.htm">加密</a><a class="tag" taget="_blank" href="/search/%E8%A7%A3%E5%AF%86/1.htm">解密</a><a class="tag" taget="_blank" href="/search/rsa/1.htm">rsa</a> <div>RSA加密解密代码代码有待整理 package com.tongbanjie.commons.util; import java.security.Key; import java.security.KeyFactory; import java.security.KeyPair; import java.security.KeyPairGenerat</div> </li> <li><a href="/article/924.htm" title="linux 软件安装遇到的问题" target="_blank">linux 软件安装遇到的问题</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98/1.htm">遇到的问题</a><a class="tag" taget="_blank" href="/search/ftp/1.htm">ftp</a> <div>1 ftp配置中遇到的问题 500 OOPS: cannot change directory 出现该问题的原因:是SELinux安装机制的问题.只要disable SELinux就可以了修改方法:1 修改/etc/selinux/config 中SELINUX=disabled 2 source /etc</div> </li> <li><a href="/article/1051.htm" title="面试心得" target="_blank">面试心得</a> <span class="text-muted">alafqq</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>最近面试了好几家公司。记录下；支付宝，面试我的人胖胖的，看着人挺好的；博彦外包的职位，面试失败；阿里金融，面试官人也挺和善，只不过我让他吐血了。。。由于印象比较深，记录下； 1，自我介绍 2，说下八种基本类型；（算上string。楼主才答了3种，哈哈，string其实不是基本类型，是引用类型） 3，什么是包装类，包装类的优点； 4，平时看过什么书？NND，什么书都没看过。。照样</div> </li> <li><a href="/article/1178.htm" title="java的多态性探讨" target="_blank">java的多态性探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java的多态性是指main方法在调用属性的时候类可以对这一属性做出反应的情况 //package 1; class A{ public void test(){ System.out.println("A"); } } class D extends A{ public void test(){ S</div> </li> <li><a href="/article/1305.htm" title="网络编程基础篇之JavaScript-学习笔记" target="_blank">网络编程基础篇之JavaScript-学习笔记</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>1.documentWrite <html> <head> <script language="JavaScript"> document.write("这是电脑网络学校"); document.close(); </script> </h</div> </li> <li><a href="/article/1432.htm" title="探索JUnit4扩展：深入Rule" target="_blank">探索JUnit4扩展：深入Rule</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div> 本文将进一步探究Rule的应用，展示如何使用Rule来替代@BeforeClass，@AfterClass，@Before和@After的功能。在上一篇中提到，可以使用Rule替代现有的大部分Runner扩展，而且也不提倡对Runner中的withBefores()，withAfte</div> </li> <li><a href="/article/1559.htm" title="[CSS]CSS浮动十五条规则" target="_blank">[CSS]CSS浮动十五条规则</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>这些浮动规则，主要是参考CSS权威指南关于浮动规则的总结，然后添加一些简单的例子以验证和理解这些规则。 1. 所有的页面元素都可以浮动 2. 一个元素浮动后，会成为块级元素，比如<span>,a, strong等都会变成块级元素 3.一个元素左浮动，会向最近的块级父元素的左上角移动，直到浮动元素的左外边界碰到块级父元素的左内边界；如果这个块级父元素已经有浮动元素停靠了</div> </li> <li><a href="/article/1686.htm" title="【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景" target="_blank">【Kafka六】Kafka Producer和Consumer多Broker、多Partition场景</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/partition/1.htm">partition</a> <div>0.Kafka服务器配置 3个broker 1个topic，6个partition，副本因子是2 2个consumer，每个consumer三个线程并发读取 1. Producer package kafka.examples.multibrokers.producers; import java.util.Properties; import java.util.</div> </li> <li><a href="/article/1813.htm" title="zabbix_agentd.conf配置文件详解" target="_blank">zabbix_agentd.conf配置文件详解</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/zabbix+%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6/1.htm">zabbix 配置文件</a> <div>Aliaskey的别名，例如 Alias=ttlsa.userid:vfs.file.regexp[/etc/passwd,^ttlsa:.:([0-9]+),,,,\1]，或者ttlsa的用户ID。你可以使用key：vfs.file.regexp[/etc/passwd,^ttlsa:.: ([0-9]+),,,,\1]，也可以使用ttlsa.userid。备注: 别名不能重复，但是可以有多个</div> </li> <li><a href="/article/1940.htm" title="java--19.用矩阵求Fibonacci数列的第N项" target="_blank">java--19.用矩阵求Fibonacci数列的第N项</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/fibonacci/1.htm">fibonacci</a> <div>参考了网上的思路，写了个Java版的： public class Fibonacci { final static int[] A={1,1,1,0}; public static void main(String[] args) { int n=7; for(int i=0;i<=n;i++){ int f=fibonac</div> </li> <li><a href="/article/2067.htm" title="Netty源码学习-LengthFieldBasedFrameDecoder" target="_blank">Netty源码学习-LengthFieldBasedFrameDecoder</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>先看看LengthFieldBasedFrameDecoder的官方API http://docs.jboss.org/netty/3.1/api/org/jboss/netty/handler/codec/frame/LengthFieldBasedFrameDecoder.html API举例说明了LengthFieldBasedFrameDecoder的解析机制，如下：实</div> </li> <li><a href="/article/2194.htm" title="AES加密解密" target="_blank">AES加密解密</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A0%E5%AF%86%E8%A7%A3%E5%AF%86/1.htm">加密解密</a> <div>AES加解密算法，使用Base64做转码以及辅助加密： package com.wintv.common; import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.SecretKeySpec; import sun.misc.BASE64Decod</div> </li> <li><a href="/article/2321.htm" title="文件编码格式转换" target="_blank">文件编码格式转换</a> <span class="text-muted">ctrain</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E6%A0%BC%E5%BC%8F/1.htm">编码格式</a> <div> package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; </div> </li> <li><a href="/article/2448.htm" title="mysql 在linux客户端插入数据中文乱码" target="_blank">mysql 在linux客户端插入数据中文乱码</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a> <div>1、查看系统客户端，数据库，连接层的编码查看方法： http://daizj.iteye.com/blog/2174993 进入mysql，通过如下命令查看数据库编码方式： mysql> show variables like 'character_set_%'; +--------------------------+------</div> </li> <li><a href="/article/2575.htm" title="好代码是廉价的代码" target="_blank">好代码是廉价的代码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6/1.htm">读书</a> <div> 长久以来我一直主张：好代码是廉价的代码。当我跟做开发的同事说出这话时，他们的第一反应是一种惊愕，然后是将近一个星期的嘲笑，把它当作一个笑话来讲。当他们走近看我的表情、知道我是认真的时，才收敛一点。当最初的惊愕消退后，他们会用一些这样的话来反驳： “好代码不廉价，好代码是采用经过数十年计算机科学研究和积累得出的最佳实践设计模式和方法论建立起来的精心制作的程序代码。” 我只</div> </li> <li><a href="/article/2702.htm" title="Android网络请求库——android-async-http" target="_blank">Android网络请求库——android-async-http</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在iOS开发中有大名鼎鼎的ASIHttpRequest库，用来处理网络请求操作，今天要介绍的是一个在Android上同样强大的网络请求库android-async-http，目前非常火的应用Instagram和Pinterest的Android版就是用的这个网络请求库。这个网络请求库是基于Apache HttpClient库之上的一个异步网络请求处理库，网络处理均基于Android的非UI线程，通</div> </li> <li><a href="/article/2829.htm" title="ORACLE 复习笔记之SQL语句的优化" target="_blank">ORACLE 复习笔记之SQL语句的优化</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/SQL%E4%BC%98%E5%8C%96/1.htm">SQL优化</a><a class="tag" taget="_blank" href="/search/Oracle+sql%E8%AF%AD%E5%8F%A5%E4%BC%98%E5%8C%96/1.htm">Oracle sql语句优化</a><a class="tag" taget="_blank" href="/search/SQL%E8%AF%AD%E5%8F%A5%E7%9A%84%E4%BC%98%E5%8C%96/1.htm">SQL语句的优化</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2097999 SQL语句的优化总结如下 sql语句的优化可以按照如下六个步骤进行：合理使用索引避免或者简化排序消除对大表的扫描避免复杂的通配符匹配调整子查询的性能 EXISTS和IN运算符下面我就按照上面这六个步骤分别进行总结： </div> </li> <li><a href="/article/2956.htm" title="浅析：Android 嵌套滑动机制（NestedScrolling）" target="_blank">浅析：Android 嵌套滑动机制（NestedScrolling）</a> <span class="text-muted">gg163</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E6%BB%91%E5%8A%A8%E6%9C%BA%E5%88%B6/1.htm">滑动机制</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%A5%97/1.htm">嵌套</a> <div>谷歌在发布安卓 Lollipop版本之后，为了更好的用户体验，Google为Android的滑动机制提供了NestedScrolling特性 NestedScrolling的特性可以体现在哪里呢？ 比如你使用了Toolbar，下面一个ScrollView，向上滚</div> </li> <li><a href="/article/3083.htm" title="使用hovertree菜单作为后台导航" target="_blank">使用hovertree菜单作为后台导航</a> <span class="text-muted">hvt</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a> <div> hovertree是一个jquery菜单插件，官方网址：http://keleyi.com/jq/hovertree/ ，可以登录该网址体验效果。 0.1.3版本：http://keleyi.com/jq/hovertree/demo/demo.0.1.3.htm hovertree插件包含文件： http://keleyi.com/jq/hovertree/css</div> </li> <li><a href="/article/3210.htm" title="SVG 教程（二）矩形" target="_blank">SVG 教程（二）矩形</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a> <div>SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作：矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> </div> </li> <li><a href="/article/3337.htm" title="一个简单的队列" target="_blank">一个简单的队列</a> <span class="text-muted">luyulong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%98%9F%E5%88%97/1.htm">队列</a> <div> public class MyQueue { private long[] arr; private int front; private int end; // 有效数据的大小 private int elements; public MyQueue() { arr = new long[10]; elements = 0; front </div> </li> <li><a href="/article/3464.htm" title="基础数据结构和算法九：Binary Search Tree" target="_blank">基础数据结构和算法九：Binary Search Tree</a> <span class="text-muted">sunwinner</span> <a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div> A binary search tree (BST) is a binary tree where each node has a Comparable key (and an associated value) and satisfies the restriction that the key in any node is larger than the keys in all</div> </li> <li><a href="/article/3591.htm" title="项目出现的一些问题和体会" target="_blank">项目出现的一些问题和体会</a> <span class="text-muted">Steven-Walker</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div> 第一篇博客不知道要写点什么，就先来点近阶段的感悟吧。这几天学了servlet和数据库等知识，就参照老方的视频写了一个简单的增删改查的，完成了最简单的一些功能，使用了三层架构。 dao层完成的是对数据库具体的功能实现，service层调用了dao层的实现方法，具体对servlet提供支持。 &</div> </li> <li><a href="/article/3718.htm" title="高手问答：Java老A带你全面提升Java单兵作战能力！" target="_blank">高手问答：Java老A带你全面提升Java单兵作战能力！</a> <span class="text-muted">ITeye管理员</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>本期特邀《Java特种兵》作者：谢宇，CSDN论坛ID: xieyuooo 针对JAVA问题给予大家解答，欢迎网友积极提问，与专家一起讨论! 作者简介：淘宝网资深Java工程师，CSDN超人气博主，人称“胖哥”。 CSDN博客地址： http://blog.csdn.net/xieyuooo 作者在进入大学前是一个不折不扣的计算机白痴，曾经被人笑话过不懂鼠标是什么，</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

react面试题

React的理解 有哪些特性

一、什么是虚拟Dom，实现原理，区别，优缺点？

Diff算法说明

Fiber

二、函数组件与类组件区别

类组件

函数组件

三、state和props的区别

总结：

super和super(props)的区别

类组件生命周期函数

挂载阶段：

constructor

getDerivedStateFromProps

render

conponentDidMount

更新阶段：

getDerivedStateFromProps：—

shouComponentUpdate

render：------

getSnpshotBeforeUpdate：

componentDidUpdate

卸载阶段：

componentWillUnmount

四、setState执行机制

五、react事件机制

六、react事件绑定方式class

八、React组件通信

分类：

九、React中refs是什么

十、React中的key作用

11、受控组件、非受控组件

React的理解有哪些特性