11 2022 档案
摘要：React-Router怎么设置重定向？ 使用<Redirect>组件实现路由的重定向： <Switch> <Redirect from='/users/:id' to='/users/profile/:id'/> <Route path='/users/profile/:id' component
阅读全文
摘要：Debounce debounce 原意消除抖动，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。 防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。 const debounce
阅读全文
摘要：react 的虚拟dom是怎么实现的 首先说说为什么要使用Virturl DOM，因为操作真实DOM的耗费的性能代价太高，所以react内部使用js实现了一套dom结构，在每次操作在和真实dom之前，使用实现好的diff算法，对虚拟dom进行比较，递归找出有变化的dom节点，然后对其进行更新操作。为
阅读全文
摘要：Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使
阅读全文
摘要：什么是 React的refs？为什么它们很重要 refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。 如果该属性的值是一个回调函数，它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。 export class App extends C
阅读全文
摘要：mixin Mixin 设计模式 Mixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，可以拷贝多个属性到一个对象上，为了解决代码复用问题。 常用的方法：JQuery 的 extend 方法。 var LogMixin = { log: function(
阅读全文
摘要：什么是 React Fiber? Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。 React Fib
阅读全文
摘要：前言 所谓同构，简而言之就是，第一次访问后台服务时，后台直接把前端要显示的界面全部返回，而不是像 SPA 项目只渲染一个 <div id="root"></div> 剩下的都是靠 JavaScript 脚本去加载。这样一来可以大大减少首屏等待时间。 同构概念并不复杂，它也非项目必需品，但是探索它的原
阅读全文
摘要：如何在React中使用innerHTML 增加dangerouslySetInnerHTML属性，并且传入对象的属性名叫_html function Component(props){ return <div dangerouslySetInnerHTML={{_html:'<span>你好</sp
阅读全文
摘要：开发者普遍认为状态是组件的一部分, 但是同时却又在剥离状态上不停的造轮子, 这不是很矛盾么? 对于一个最简单的文本组件而言 function Text(){ const [text, setText] = useState('载入') return (){ <p>{text}</p> } } 你觉得
阅读全文
摘要：shouldComponentUpdate有什么用？为什么它很重要？ 组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。在生命周期方法 should ComponentUpdate中，允许选择退出某些组件（和它们的子组件）的和解过程。 和解的最终目标是根据新的状态，以最有效的
阅读全文
摘要：前言 最近一直在学习关于React方面的知识，并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式，将我在学习和开发（React）过程中遇到的问题记录下来。 这两天遇到了关于组件不必要的重复渲染问题，看了很多遍官方文档以及网上各位大大们的介绍，下面我会通过一些demo结合自己的理解进
阅读全文
摘要：fetch封装 npm install whatwg-fetch --save // 适配其他浏览器 npm install es6-promise export const handleResponse = (response) => { if (response.status 403 || re
阅读全文
摘要：先来思考一个老生常谈的问题，setState是同步还是异步? 再深入思考一下，useState是同步还是异步呢？ 我们来写几个 demo 试验一下。 先看 useState 同步和异步情况下，连续执行两个 useState 示例 function Component() { const [a, se
阅读全文
摘要：react和vue的区别 相同点： 数据驱动页面，提供响应式的试图组件 都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范 数据流动单向，都支持服务器的渲染SSR 都有支持native的方法，react有React nativ
阅读全文
摘要：前言：最近接触到一种新的（对我个人而言）状态管理方式，它没有采用现有的开源库，如redux、mobx等，也没有使用传统的useContext，而是用useState + useEffect写了一个发布订阅者模式进行状态管理，这一点对我来说感觉比较新奇，以前从没接触过这种写法，于是决定研究一下目前比较
阅读全文
摘要：描述事件在 React中的处理方式。 为了解决跨浏览器兼容性问题， React中的事件处理程序将传递 SyntheticEvent的实例，它是跨浏览器事件的包装器。这些 SyntheticEvent与你习惯的原生事件具有相同的接口，它们在所有浏览器中都兼容。 React实际上并没有将事件附加到子节点
阅读全文
摘要：第一次发文章 not only（虽然）版式可能有点烂 but also （但是）最后赋有手稿研究 finally看完他你有收获 diff算法：对于update的组件，他会将当前组件与该组件在上次更新是对应的Fiber节点比较，将比较的结果生成新的Fiber节点。 ! 为了防止概念混淆，强调 一个DO
阅读全文
摘要：hooks 为什么不能放在条件判断里 以 setState 为例，在 react 内部，每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中 update 阶段，每次调用 setState，链表就会执行 next 向后移动一步。如果将 setState 写在条
阅读全文
摘要：前言 不知道大家有没有过这个疑问，React 中 setState() 为什么是异步的？我一度认为 setState() 是同步的，知道它是异步的之后很是困惑，甚至期待 React 能出一个 setStateSync() 之类的 API。同样有此疑问的还有 MobX 的作者 Michel Wests
阅读全文
摘要：为什么调用 setState 而不是直接改变 state？ 解答 如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。 另外，您还可以谈谈如何不保证状态更新是同步的。如果需要基于另一个状态（或属性）更新组件的状态，
阅读全文
摘要：High Order Component（包装组件，后面简称HOC），是React开发中提高组件复用性的高级技巧。HOC并不是React的API，他是根据React的特性形成的一种开发模式。 HOC具体上就是一个接受组件作为参数并返回一个新的组件的方法 const EnhancedComponent
阅读全文
摘要：你理解“在React中，一切都是组件”这句话。 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。 约束性组件（ controlled component）与非约束性组件（ uncontrolled compo
阅读全文
摘要：Redux可是一个大名鼎鼎的库，很多地方都在用，我也用了几年了，今天这篇文章就是自己来实现一个Redux，以便于深入理解他的原理。我们还是老套路，从基本的用法入手，然后自己实现一个Redux来替代源码的NPM包，但是功能保持不变。本文只会实现Redux的核心库，跟其他库的配合使用，比如React-R
阅读全文
摘要：Component, Element, Instance 之间有什么区别和联系？ 元素： 一个元素element是一个普通对象(plain object)，描述了对于一个DOM节点或者其他组件component，你想让它在屏幕上呈现成什么样子。元素element可以在它的属性props中包含其他元素
阅读全文
摘要：性能优化 性能优化，永远是面试的重点，性能优化对于 React 更加重要 在页面中使用了setTimout()、addEventListener()等，要及时在componentWillUnmount()中销毁 使用异步组件 使用 React-loadable 动态加载组件 shouldCompon
阅读全文
摘要：什么是 React Fiber? Fiber 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。React Fiber 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。 React Fib
阅读全文
摘要：提问：react项目中的JSX里，onChange={this.func.bind(this)}的写法，为什么要比非bind的func = () => {}的写法效率高？ 声明: 由于本人水平有限，有考虑不周之处，或者出现错误的，请严格指出，小弟感激不尽。这是小弟第一篇文章，有啥潜规则不懂的，你们就
阅读全文
摘要：除了在构造函数中绑定 this，还有其它方式吗 你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。 一般可以用哪些值作为key 最好使用每一
阅读全文
摘要：1.虚拟dom 原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom） 每次数据更新后，重新计算虚拟Dom，并和上一次生成的虚拟dom进行对比，对发生变化的部分作批量更新。在此其中，React提供了compo
阅读全文
摘要：setState 是同步的还是异步的 有时表现出同步，有时表现出异步 setState 只有在 React 自身的合成事件和钩子函数中是异步的，在原生事件和 setTimeout 中都是同步的 setState 的异步并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子
阅读全文
摘要：1、JSX 在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？ 这是因为我们的 JSX 代码会被 Babel 编译为 React.createElement，我们来看一下babel的表示形式。 需要注意的是： 自定义组件时需要首字母用大写，
阅读全文
摘要：componentWillReceiveProps调用时机 已经被废弃掉 当props改变的时候才调用，子组件第二次接收到props的时候 在调用setState 之后发生了什么 状态合并，触发调和： setState函数之后，会将传入的参数对象与当前的状态合并，然后出发调用过程 根据新的状态构建虚
阅读全文
摘要：先来几个术语： | 官方 | 我的说法 | 对应代码 | | | | | | React element | React元素 | let element=<span>A爆了</span> | | Component | 组件 | class App extends React.Component {
阅读全文
摘要：react和vue的区别 相同点： 数据驱动页面，提供响应式的试图组件 都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范 数据流动单向，都支持服务器的渲染SSR 都有支持native的方法，react有React nativ
阅读全文
摘要：一、写一个时钟 用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt
阅读全文
摘要：react中这两个生命周期会触发死循环 componentWillUpdate生命周期在shouldComponentUpdate返回true后被触发。在这两个生命周期只要视图更新就会触发，因此不能再这两个生命周期中使用setState。否则会导致死循环 react性能优化是在哪个生命周期函数中 在
阅读全文
摘要：一、React 渲染流程和更新流程 react渲染流程：jsx -> 虚拟dom -> 真实dom react更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树 所以
阅读全文
摘要：组件之间传值 父组件给子组件传值 在父组件中用标签属性的=形式传值 在子组件中使用props来获取值 子组件给父组件传值 在组件中传递一个函数 在子组件中用props来获取传递的函数，然后执行该函数 在执行函数的时候把需要传递的值当成函数的实参进行传递 兄弟组件之间传值 利用父组件 先把数据通过 【
阅读全文
摘要：我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作
阅读全文
摘要：redux中间件 中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能 redux-logger
阅读全文
摘要：Debounce debounce 原意消除抖动，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。 防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。 const debounce
阅读全文
摘要：如何配置 React-Router 实现路由切换 （1）使用<Route> 组件 路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹
阅读全文
摘要：Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。有一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使
阅读全文