- 博客(328)
- 资源 (12)
- 收藏
- 关注
RSS订阅原创 GitLab 的具体步骤
安装操作系统：选择适合的操作系统，如Linux、Windows等。 配置服务器：安装必要的软件和服务，如 Web 服务器、数据库等。 安装 GitLab：使用官方安装包或自行编译安装，根据提示进行安装。 配置数据库：选择适合的数据库，如MySQL、PostgreSQL等，并进行配置。 配置 Web 服务器：配置 Web 服务器，如Apache、Nginx等，使其能够处理 GitLab 的请求。 配置邮件服务器：配置邮件服务器，如 Sendmail、Postfix等，使其能够发送通知邮
2024-03-07 17:18:07
424
原创 企业项目常见环境及其发布部署方式总结
开发环境：开发环境是开发人员用于编写、测试和调试代码的环境。开发环境通常由开发人员自己管理，并且不对外开放。开发人员可以在开发环境中使用开发工具（如 IDE ）、版本控制系统（如Git）等。 测试环境：测试环境是用于进行集成测试和系统测试的环境。测试环境通常由测试人员管理，并且不对外开放。测试人员可以在测试环境中使用测试工具（如自动化测试工具、性能测试工具等）来进行测试。 预生产环境：预生产环境是用于进行用户验收测试和上线前测试的环境。预生产环境通常由项目团队管理，并且不对外开放。项目团队可以在预生
2024-03-07 17:16:51
303
原创 响应式设计和自适应设计的区别
总的来说，响应式设计更适合需要在不同的设备和屏幕大小上提供良好用户体验的网站，而自适应设计更适合需要在特定设备和屏幕大小上提供最佳用户体验的网站。响应式设计和自适应设计都是为了使网站能够在不同的设备和屏幕大小上自适应地显示，但它们之间存在一些区别。
2024-03-07 17:03:56
231
原创 Java Web 拦截器和过滤器的差异总结
Java Web 中的拦截器和过滤器都是用于处理 HTTP 请求的工具，但它们之间存在一些差异，包括：
2024-03-07 16:55:31
184
原创 前端性能优化的几个要点
性能优化是一个持续的过程，需要综合考虑各个方面，并根据实际情况选择合适的优化策略。通过不断优化，可以提高 Web 应用的性能和用户体验。
2024-03-07 16:50:23
187
原创 为什么0.1+0.2 ! == 0.3，如何让其相等
计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。由于JavaScript的数字是双精度数，这里就以双精度数为例，它的指数部分为11位，能表示的范围就是0~2047，IEEE固定双精度数的偏移量为1023。
2023-11-17 11:30:22
1904
原创 typeof null的结果为什么是Object？
在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。如果最低位是 0，则类型标签标志位的长度占三位，为存储其他四种数据类型提供了额外两个 bit 的长度。也就是说null的类型标签也是000，和Object的类型标签一样，所以会被判定为Object。undefined的值是(-2)的30次方，一个超出整数范围的数字；null的值是机器码NULL指针（null的值全是0);
2023-11-17 11:11:46
1860
原创 super() 和 super(props) 有什么区别？
在上面的例子中，可以看到通过 super 关键字实现调用父类，super 代替的是父类的构建函数，使用 super(name) 相当于调用 sup.prototype.constructor.call(this,name)这时候，在调用 super() 的时候，我们一般都需要传入 props 作为参数，如果不传进去，React 内部也会将其定义在组件实例中。而 super() 就是将父类中的 this 对象继承给子类的，没有 super() 子类就得不到 this 对象。
2023-11-10 17:00:39
418
原创 说说你在使用React 过程中遇到的常见问题？如何解决?
使用key是react性能优化的手段，在一系列数据最前面插入元素，如果没有key的值，则所有的元素都需要进行更换，而有key的情况只需要将最新元素插入到前面，不涉及删除操作。如今一般都是前两种方式，对于一些无状态的组件创建，建议使用函数式创建的方式，再比如hooks的机制下，函数式组件能做类组件对应的事情，所以建议都使用函数式的方式来创建组件。一个组件改变了 store 里的数据内容，其他组件就能感知到 store的变化，再来取数据，从而间接的实现了这些数据传递的功能。
2023-11-10 16:57:57
135
原创 state 和 props 有什么区别？
在子组件中，props 在内部不可变的，如果想要改变它看，只能通过外部组件传入新的 props 来重新渲染子组件，否则子组件的 props 和展示形式不会改变。setState 还可以接受第二个参数，它是一个函数，会在 setState 调用完成并且组件开始重新渲染时被调用，可以用来监听渲染是否完成。组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是 props，所以可以把 props 理解为从外部传入组件内部的数据。
2023-11-10 16:56:27
85
原创 说说 React中的setState执行机制
通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新。从上面可以看到setState第一个参数可以是一个对象，或者是一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据。从上面可以看到，最终打印结果为Hello world，并不能在执行完setState之后立马拿到最新的state的结果。对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果。
2023-11-10 16:53:33
304
原创 说说React服务端渲染怎么做？原理是什么？
node server 接收客户端请求，得到当前的请求url 路径，然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props、context或者store 形式传入组件。但是像一些事件处理的方法，是无法在服务端完成，因此需要将组件代码在浏览器中再执行一遍，这种服务器端和客户端共用一套代码的方式就称之为。指由服务侧完成页面的 HTML 结构拼接的页面处理技术，发送到浏览器，然后为其绑定状态与事件，成为完全可交互页面的过程。然后再服务器中编写react代码，在app.js中进行应引用。
2023-11-10 16:53:02
227
原创 说说React render方法的原理？在什么时候会被触发？
在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树。所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染。在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render。
2023-11-10 16:50:18
259
原创 说说你对Redux的理解？其工作原理？
根据流程图，可以想象，React Components 是借书的用户， Action Creactor 是借书时说的话(借什么书)， Store 是图书馆管理员，Reducer 是记录本(借什么书，还什么书，在哪儿，需要查一下)， state 是书籍信息。整个流程就是借书的用户需要先存在，然后需要借书，需要一句话来描述借什么书，图书馆管理员听到后需要查一下记录本，了解图书的位置，最后图书馆管理员会把这本书给到这个借书人。注意的是，redux并不是只应用在react中，还与其他界面库一起使用，如Vue。
2023-11-10 16:49:45
198
原创 说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。redux-thunk中间件会判断你当前传进来的数据类型，如果是一个函数，将会给函数传入参数值（dispatch，getState）在上篇文章中，了解到了Redux整个工作流程，当action发出之后，reducer立即算出state，整个过程是一个同步的操作。在上面的学习中，我们了解到了redux-thunk的基本使用。
2023-11-10 16:49:12
872
原创 说说 Real DOM 和 Virtual DOM 的区别？优缺点？
而通过 VNode，同样更新 10 个 DOM 节点，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地的一个 js 对象中，最终将这个 js 对象一次性 attach 到 DOM 树上，避免大量的无谓计算。当你在一次操作时，需要更新 10 个 DOM 节点，浏览器没这么智能，收到第一个更新 DOM 请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程。// 把创建的 h1 标签渲染到 root 节点上。
2023-11-10 16:48:42
51
原创 说说你对React Router的理解？常用的Router组件有哪些？
例如将path在Route匹配时写成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到该Route。通过Route作为顶层组件包裹其他组件后,页面组件就可以接收到一些路由相关的东西，比如props.history。路由的本质就是页面的URL发生改变时，页面的显示结果可以根据URL的变化而变化，但是页面不会刷新。swich组件的作用适用于当匹配到第一个组件的时候，后面的组件就不应该继续匹配。Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件。
2023-11-10 16:48:09
253
原创 说说React Router有几种模式？实现原理？
Router组件主要做的是通过BrowserRouter传过来的当前值，通过props传进来的path与context传进来的pathname进行匹配，然后决定是否执行渲染组件。路由描述了 URL 与 UI之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）下面以hash模式为例子，改变hash值并不会导致浏览器向服务器发送请求，浏览器不发出请求，也就不会刷新页面。这两个组件的使用都十分的简单，作为最顶层组件包裹其他组件，如下所示。// 该组件下Api提供给子组件使用。
2023-11-10 16:47:27
303
原创 说说对React refs 的理解？应用场景？
本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。上述三种情况都是ref属性用于原生HTML元素上，如果ref设置的组件为一个类组件的时候，ref对象接收到的是组件的挂载实例。当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中访问。当ref传入为一个函数的时候，在渲染过程中，回调函数参数会传入一个元素对象，然后通过实例将对象进行保存。只需要在对应元素或组件中ref属性。
2023-11-09 11:52:08
180
原创 说说对React Hooks的理解？解决了什么问题？
上述传入第二个参数后，如果 count 的值是 5，而且我们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比较，如果是相等则跳过effects执行。hooks的出现，使函数组件的功能得到了扩充，拥有了类组件相似的功能，在我们日常使用中，使用hooks能够解决大多数问题，并且还拥有代码复用机制，因此优先考虑hooks。因此，现在的函数组件也可以是有状态的组件，内部也可以维护自身的状态以及做一些逻辑方面的处理。
2023-11-09 11:51:06
204
原创 说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？
在每次render方法前调用，第一个参数为即将更新的props，第二个参数为上一个状态的state，可以比较props 和 state来加一些限制条件，防止无用的state更新。此方法的目的在于获取组件更新前的一些信息，比如组件的滚动位置之类的，在组件更新后可以根据这些信息恢复一些UI视觉上的状态。在该方法中，可以根据前后的props和state的变化做相应的操作，如获取数据，修改DOM样式等。该方法是新增的生命周期方法，是一个静态的方法，因此不能访问到组件的实例。
2023-11-09 11:48:25
54
原创 React中的key有什么作用？
跟Vue一样，React 也存在 Diff算法，而元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的元素渲染。前面的元素在diff算法中，前面的元素由于是完全相同的，并不会产生删除创建操作，在最后一个比较的时候，则需要插入到新的DOM树中。而写key则涉及到了节点的增和删，发现旧key不存在了，则将其删除，新key在之前没有，则插入，这就增加性能的开销。同样，并不是拥有key值代表性能越高，如果说只是文本内容改变了，不写key反而性能和效率更高。
2023-11-09 11:38:04
212
原创 React中的key有什么作用？
跟Vue一样，React 也存在 Diff算法，而元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的元素渲染。前面的元素在diff算法中，前面的元素由于是完全相同的，并不会产生删除创建操作，在最后一个比较的时候，则需要插入到新的DOM树中。而写key则涉及到了节点的增和删，发现旧key不存在了，则将其删除，新key在之前没有，则插入，这就增加性能的开销。同样，并不是拥有key值代表性能越高，如果说只是文本内容改变了，不写key反而性能和效率更高。
2023-11-09 11:35:46
226
原创 说说React Jsx转换成真实DOM过程？
当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 diff算法进行高效的更新。react通过将组件编写的JSX映射到屏幕，以及组件中的状态发生了变化之后 React会将这些「变化」更新到屏幕上。<ClassComponent name="类组件" color="red" />如果提供了可选的回调函数callback，该回调将在组件被渲染或更新之后被执行。这些类别最终都会被转化成React.createElement这种形式。先实例化，再执行render。
2023-11-09 11:35:07
266
原创 说说你是如何提高组件的渲染效率的？在React中如何避免不必要的render？
在之前文章中，我们了解到render的触发时机，简单来讲就是类组件通过调用setState方法， 就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染。除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染。react 基于虚拟 DOM 和高效 Diff算法的完美配合，实现了对 DOM最小粒度的更新，大多数情况下，React对 DOM的渲染效率足以我们的业务日常。
2023-11-09 11:32:47
59
原创 说说 React 性能优化的手段有哪些？
服务端渲染，需要起一个node服务，可以使用express、koa等，调用react的renderToString方法，将根组件渲染成字符串，再输出到响应中。在前面文章中，我们了解到类组件通过调用setState方法， 就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染。从性能方面考虑，在render方法中使用bind和render方法中使用箭头函数这两种形式在每次组件render的时候都会生成新的方法实例，性能欠缺。用户创建新组件时，每个组件应具有单个父标签。
2023-11-09 11:31:03
266
原创 说说react中引入css的方式有哪几种？区别？
将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。这种方式是webpack特工的方案，只需要配置webpack配置文件中modules:true即可。CSS-in-JS， 是指一种模式，其中CSS由 JavaScript生成而不是在外部文件中定义。至于使用react用哪种方案引入css，并没有一个绝对的答案，可以根据各自情况选择合适的方案。而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊。将css单独写在一个css文件中，然后在组件中直接引入。
2023-11-09 11:30:18
343
原创 说说你对immutable的理解？如何应用在react项目中？
也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deepCopy把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享）在使用redux过程中也可以结合Immutable，不使用Immutable前修改一个数据需要做一个深拷贝。使用 Immutable可以给 React 应用带来性能的优化，主要体现在减少渲染的次数。Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据。将数据转化成immutable。
2023-11-09 11:29:09
54
原创 你在React项目中是如何使用Redux的? 项目结构是如何划分的？
在redux中存在一个store用于存储state，如果将这个store存放在顶层元素中，其他组件都被包裹在顶层元素之上。使用redux使用功能组织项目，也就是把完成同一应用功能的代码放在一个目录下，一个应用功能包含多个角色的代码。Redux中，不同的角色就是reducer、actions和视图，而应用功能对应的就是用户界面的交互模块。那么所有的组件都能够受到redux的控制，都能够获取到redux中的数据。将redux中的dispatch映射到组件内部的props中。
2023-11-09 11:28:06
209
原创 说说对高阶组件的理解？应用场景?
通过对传入的原始组件 WrappedComponent 做一些你想要的操作（比如操作 props，提取 state，给原始组件包裹其他元素等），从而加工出想要的组件 EnhancedComponent。通过上面的了解，高阶组件能够提高代码的复用性和灵活性，在实际应用中，常常用于与核心业务无关但又在多个模块使用的功能，如权限控制、日志记录、数据校验、异常处理、统计上报等。在React中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件。
2023-11-09 11:25:14
63
原创 说说React diff的原理是什么？
通过key可以准确地发现新旧集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将旧集合中节点的位置进行移动，更新为新集合中节点的位置。跟Vue一致，React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，使我们的页面的构建效率提到了极大的提升。如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的。当ABCD节点比较完成后，diff过程还没完，还会整体遍历老集合中节点，看有没有没用到的节点，有的话，就删除。
2023-11-09 11:24:01
148
原创 说说对受控组件和非受控组件的理解？应用场景？
当用户输入新的内容时，this.state.username并不会自动更新，这样的话input内的内容也就不会变了。如果想要解除被控制，可以为input标签设置onChange事件，输入的时候触发事件函数，在函数内部实现state的更新，从而导致input框的内容页发现改变。这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是input标签是一个可读的状态。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。非受控组件，简单来讲，就是不受我们控制的组件。
2023-11-08 15:26:26
125
原创 React中组件之间如何通信？
由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值。父组件在调用子组件的时候，只需要在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数。子组件向父组件通信的基本思路是，父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值。如果是兄弟组件之间的传递，则父组件作为中间层来实现数据的互通，通过使用父组件传递。由于React的数据流动为单向的，父组件向子组件传递是最常见的方式。
2023-11-08 15:22:37
270
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人