01 2023 档案
摘要：什么是上下文Context Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。 用法：在父组件上定义getChildContext方法，返回一个对象，然后它的子组件就可以通过this.context属性来获取 import React,{Comp
阅读全文
摘要：1.虚拟dom 原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom） 每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了compo
阅读全文
摘要：createElement和 cloneElement有什么区别？ createElement是JSX被转载得到的，在 React中用来创建 React元素（即虚拟DOM）的内容。cloneElement用于复制元素并传递新的 props。 区分状态和 props | 条件 | State | Pr
阅读全文
摘要：1、JSX 在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？ 这是因为我们的 JSX 代码会被 Babel 编译为 React.createElement，我们来看一下babel的表示形式。 需要注意的是： 自定义组件时需要首字母用大写，
阅读全文
摘要：state 和 props 触发更新的生命周期分别有什么区别？ state 更新流程： 这个过程当中涉及的函数： shouldComponentUpdate: 当组件的 state 或 props 发生改变时，都会首先触发这个生命周期函数。它会接收两个参数：nextProps, nextState—
阅读全文
摘要：先来几个术语： | 官方 | 我的说法 | 对应代码 | | | | | | React element | React元素 | let element=<span>A爆了</span> | | Component | 组件 | class App extends React.Component {
阅读全文
摘要：redux与mobx的区别？ 两者对⽐： redux将数据保存在单⼀的store中，mobx将数据保存在分散的多个store中 redux使⽤plain object保存数据，需要⼿动处理变化后的操作；mobx适⽤observable保存数据，数据变化后⾃动处理响应的操作 redux使⽤不可变状态，
阅读全文
摘要：一、写一个时钟 用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt
阅读全文
摘要：类组件(Class component)和函数式组件(Functional component)之间有何不同 类组件不仅允许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态 当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态
阅读全文
摘要：一、React 渲染流程和更新流程 react渲染流程：jsx -> 虚拟dom -> 真实dom react更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树 所以
阅读全文
摘要：高阶组件 高阶函数：如果一个函数接受一个或多个函数作为参数或者返回一个函数就可称之为高阶函数。 高阶组件：如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。 react 中的高阶组件 React 中的高阶组件主要有两种形式：属性代理和反向继承。 属性代理 Proxy 操
阅读全文
摘要：我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作
阅读全文
摘要：怎么用 React.createElement 重写下面的代码 Question： const element = ( <h1 className="greeting"> Hello, rdhub.cn! </h1> ); Answer： const element = React.createEl
阅读全文
摘要：Debounce debounce 原意消除抖动，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。 防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。 const debounce
阅读全文
摘要：调用 setState 之后发生了什么 在代码中调用 setState 函数之后，React 会将传入的参数与之前的状态进行合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。
阅读全文
摘要：Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使
阅读全文
摘要：非嵌套关系组件的通信方式？ 即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。 可以使用自定义事件通信（发布订阅模式） 可以通过redux等进行全局状态管理 如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。 react hooks，它带来了
阅读全文
摘要：mixin Mixin 设计模式 Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，可以拷贝多个属性到一个对象上，为了解决代码复用问题。 常用的方法：JQuery 的 extend 方法。 var LogMixin = { log: function(
阅读全文
摘要：React 中 keys 的作用是什么？ Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。 在 React 中渲染集合时，向每个重复的元素添加关键字对于帮助React跟踪元素与数据之间的关联非常重要。key 应该是唯一ID，最好是 UUID 或收集项中的其他唯一字
阅读全文
摘要：前言 所谓同构，简而言之就是，第一次访问后台服务时，后台直接把前端要显示的界面全部返回，而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。 同构概念并不复杂，它也非项目必需品，但是探索它的原
阅读全文
摘要：何为 JSX JSX 是 JavaScript 语法的一种语法扩展，并拥有 JavaScript 的全部功能。JSX 生产 React "元素"，你可以将任何的 JavaScript 表达式封装在花括号里，然后将其嵌入到 JSX 中。在编译完成之后，JSX 表达式就变成了常规的 JavaScript
阅读全文
摘要：开发者普遍认为状态是组件的一部分, 但是同时却又在剥离状态上不停的造轮子, 这不是很矛盾么? 对于一个最简单的文本组件而言 function Text(){ const [text, setText] = useState('载入') return (){ <p>{text}</p> } } 你觉得
阅读全文
摘要：React.forwardRef是什么？它有什么作用？ React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用： 转发 refs 到 DOM 组件 在高阶组件中转发 refs 跨级组
阅读全文
摘要：前言 最近一直在学习关于React方面的知识，并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式，将我在学习和开发（React）过程中遇到的问题记录下来。 这两天遇到了关于组件不必要的重复渲染问题，看了很多遍官方文档以及网上各位大大们的介绍，下面我会通过一些demo结合自己的理解进
阅读全文