12 2022 档案
摘要：vue 或者react 优化整体优化 虚拟dom 为什么虚拟 dom 会提高性能?(必考) 虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能。 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个
阅读全文
摘要：先来思考一个老生常谈的问题，setState是同步还是异步? 再深入思考一下，useState是同步还是异步呢？ 我们来写几个 demo 试验一下。 先看 useState 同步和异步情况下，连续执行两个 useState 示例 function Component() { const [a, se
阅读全文
摘要：前言：最近接触到一种新的（对我个人而言）状态管理方式，它没有采用现有的开源库，如redux、mobx等，也没有使用传统的useContext，而是用useState + useEffect写了一个发布订阅者模式进行状态管理，这一点对我来说感觉比较新奇，以前从没接触过这种写法，于是决定研究一下目前比较
阅读全文
摘要：前言：最近接触到一种新的（对我个人而言）状态管理方式，它没有采用现有的开源库，如redux、mobx等，也没有使用传统的useContext，而是用useState + useEffect写了一个发布订阅者模式进行状态管理，这一点对我来说感觉比较新奇，以前从没接触过这种写法，于是决定研究一下目前比较
阅读全文
摘要：解释 React 中 render() 的目的。 每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<div> 等。此函数必须保持纯
阅读全文
摘要：第一次发文章 not only（虽然）版式可能有点烂 but also （但是）最后赋有手稿研究 finally看完他你有收获 diff算法：对于update的组件，他会将当前组件与该组件在上次更新是对应的Fiber节点比较，将比较的结果生成新的Fiber节点。 ! 为了防止概念混淆，强调 一个DO
阅读全文
摘要：redux有什么缺点 一个组件所需要的数据，必须由父组件传过来，而不能像flux中直接从store取。 当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新render，可能会有效率影响，或者需要写复杂的shouldComponentUpdate进行判断。 React-Route
阅读全文
摘要：前言 不知道大家有没有过这个疑问，React 中 setState() 为什么是异步的？我一度认为 setState() 是同步的，知道它是异步的之后很是困惑，甚至期待 React 能出一个 setStateSync() 之类的 API。同样有此疑问的还有 MobX 的作者 Michel Wests
阅读全文
摘要：解释 React 中 render() 的目的。 每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<div> 等。此函数必须保持纯
阅读全文
摘要：High Order Component（包装组件，后面简称HOC），是React开发中提高组件复用性的高级技巧。HOC并不是React的API，他是根据React的特性形成的一种开发模式。 HOC具体上就是一个接受组件作为参数并返回一个新的组件的方法 const EnhancedComponent
阅读全文
摘要：Redux 原理及工作流程 （1）原理 Redux源码主要分为以下几个模块文件 compose.js 提供从右到左进行函数式编程 createStore.js 提供作为生成唯一store的函数 combineReducers.js 提供合并多个reducer的函数，保证store的唯一性 bindA
阅读全文
摘要：Redux可是一个大名鼎鼎的库，很多地方都在用，我也用了几年了，今天这篇文章就是自己来实现一个Redux，以便于深入理解他的原理。我们还是老套路，从基本的用法入手，然后自己实现一个Redux来替代源码的NPM包，但是功能保持不变。本文只会实现Redux的核心库，跟其他库的配合使用，比如React-R
阅读全文
摘要：为什么虚拟 dom 会提高性能 虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要 的 dom 操作，从而提高性能 具体实现步骤如下: 用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树， 插到文档
阅读全文
摘要：性能优化 性能优化，永远是面试的重点，性能优化对于 React 更加重要 在页面中使用了setTimout()、addEventListener()等，要及时在componentWillUnmount()中销毁 使用异步组件 使用 React-loadable 动态加载组件 shouldCompon
阅读全文
摘要：调和阶段 setState内部干了什么 当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态 这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新
阅读全文
摘要：提问：react项目中的JSX里，onChange={this.func.bind(this)}的写法，为什么要比非bind的func = () => {}的写法效率高？ 声明: 由于本人水平有限，有考虑不周之处，或者出现错误的，请严格指出，小弟感激不尽。这是小弟第一篇文章，有啥潜规则不懂的，你们就
阅读全文
摘要：在哪个生命周期中你会发出Ajax请求？为什么？ Ajax请求应该写在组件创建期的第五个阶段，即 componentDidMount生命周期方法中。原因如下。 在创建期的其他阶段，组件尚未渲染完成。而在存在期的5个阶段，又不能确保生命周期方法一定会执行（如通过 shouldComponentUpdat
阅读全文
摘要：1.虚拟dom 原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom） 每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了compo
阅读全文
摘要：React组件命名推荐的方式是哪个？ 通过引用而不是使用来命名组件displayName。 使用displayName命名组件： export default React.createClass({ displayName: 'TodoApp', // ...}) React推荐的方法： expor
阅读全文
摘要：1、JSX 在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？ 这是因为我们的 JSX 代码会被 Babel 编译为 React.createElement，我们来看一下babel的表示形式。 需要注意的是： 自定义组件时需要首字母用大写，
阅读全文
摘要：何为 redux Redux 的基本思想是整个应用的 state 保持在一个单一的 store 中。store 就是一个简单的 javascript 对象，而改变应用 state 的唯一方式是在应用中触发 actions，然后为这些 actions 编写 reducers 来修改 state。整个
阅读全文
摘要：先来几个术语： | 官方 | 我的说法 | 对应代码 | | | | | | React element | React元素 | let element=<span>A爆了</span> | | Component | 组件 | class App extends React.Component {
阅读全文
摘要：state 和 props 触发更新的生命周期分别有什么区别？ state 更新流程： 这个过程当中涉及的函数： shouldComponentUpdate: 当组件的 state 或 props 发生改变时，都会首先触发这个生命周期函数。它会接收两个参数：nextProps, nextState—
阅读全文
摘要：一、写一个时钟 用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt
阅读全文
摘要：在调用setState 之后发生了什么 状态合并，触发调和： setState函数之后，会将传入的参数对象与当前的状态合并，然后出发调用过程 根据新的状态构建虚拟dom树 经过调和过程，react会高效的根据新的状态构建虚拟DOM树，准备渲染整个UI页面 计算新老树节点差异，最小化渲染 得倒新的虚拟
阅读全文
摘要：一、React 渲染流程和更新流程 react渲染流程：jsx -> 虚拟dom -> 真实dom react更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树 所以
阅读全文
摘要：React组件的构造函数有什么作用？它是必须的吗？ 构造函数主要用于两个目的： 通过将对象分配给this.state来初始化本地状态 将事件处理程序方法绑定到实例上 所以，当在React class中需要设置state的初始值或者绑定事件时，需要加上构造函数，官方Demo： class LikeBu
阅读全文
摘要：我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作
阅读全文