beifeng11996 - 博客园

2022年10月24日

摘要： 1.虚拟dom 原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了compo 阅读全文

posted @ 2022-10-24 12:05 beifeng11996 阅读(91) 评论(0) 推荐(0) 编辑

阿里前端二面高频react面试题

摘要：当调用setState时，React render 是如何工作的？咱们可以将"render"分为两个步骤：虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用setState()时，render会被再次调用，因为默认情况下shouldComponentU 阅读全文

posted @ 2022-10-24 12:04 beifeng11996 阅读(180) 评论(0) 推荐(0) 编辑

react的jsx和React.createElement是什么关系？面试常问

摘要： 1、JSX 在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？这是因为我们的 JSX 代码会被 Babel 编译为 React.createElement，我们来看一下babel的表示形式。需要注意的是：自定义组件时需要首字母用大写，阅读全文

posted @ 2022-10-24 12:01 beifeng11996 阅读(39) 评论(0) 推荐(0) 编辑

2022年10月19日

React组件之间的通信方式总结（上）

摘要：先来几个术语： | 官方 | 我的说法 | 对应代码 | | | | | | React element | React元素 | let element=<span>A爆了</span> | | Component | 组件 | class App extends React.Component { 阅读全文

posted @ 2022-10-19 08:44 beifeng11996 阅读(17) 评论(0) 推荐(0) 编辑

React面试八股文（第二期）

摘要： React.forwardRef是什么？它有什么作用？ React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：转发 refs 到 DOM 组件在高阶组件中转发 refs ref 阅读全文

posted @ 2022-10-19 08:43 beifeng11996 阅读(141) 评论(0) 推荐(0) 编辑

React组件之间的通信方式总结（下）

摘要：一、写一个时钟用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt 阅读全文

posted @ 2022-10-19 08:41 beifeng11996 阅读(19) 评论(0) 推荐(0) 编辑

2022年10月18日

React循环DOM时为什么需要添加key

摘要：一、React 渲染流程和更新流程 react渲染流程：jsx -> 虚拟dom -> 真实dom react更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树所以阅读全文

posted @ 2022-10-18 08:49 beifeng11996 阅读(3) 评论(0) 推荐(0) 编辑

React面试八股文（第一期）

摘要： react有什么特点 react使用过的虚拟DOM，而不是真实DOM react可以用服务器渲染 react遵循单向数据流或者数据绑定 React 数据持久化有什么实践吗？封装数据持久化组件： let storage={ // 增加 set(key, value){ localStorage.s 阅读全文

posted @ 2022-10-18 08:48 beifeng11996 阅读(63) 评论(0) 推荐(0) 编辑

React的useLayoutEffect和useEffect执行时机有什么不同

摘要：我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作阅读全文

posted @ 2022-10-18 08:46 beifeng11996 阅读(33) 评论(0) 推荐(0) 编辑

2022年10月17日

React-Hooks怎样封装防抖和节流-面试真题

摘要： Debounce debounce 原意消除抖动，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。 const debounce 阅读全文

posted @ 2022-10-17 08:24 beifeng11996 阅读(32) 评论(0) 推荐(0) 编辑

beifeng1996

公告