随笔分类 - React
摘要：ReactPortals传送门 React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器，例如对话框、浮动工具栏、提示信息等。 描述 <div> <SomeComponent
阅读全文
摘要：React闭包陷阱 React Hooks是React 16.8引入的一个新特性，其出现让React的函数组件也能够拥有状态和生命周期方法，其优势在于可以让我们在不编写类组件的情况下，更细粒度地复用状态逻辑和副作用代码，但是同时也带来了额外的心智负担，闭包陷阱就是其中之一。 闭包 从React闭包陷
阅读全文
摘要：Hooks与事件绑定 在React中，我们经常需要为组件添加事件处理函数，例如处理表单提交、处理点击事件等。通常情况下，我们需要在类组件中使用this关键字来绑定事件处理函数的上下文，以便在函数中使用组件的实例属性和方法。React Hooks是React 16.8引入的一个新特性，其出现让Reac
阅读全文
摘要：Hooks与普通函数的区别 在这里的Hooks具体指的是自定义Hooks，自定义的Hooks与我们定义的普通函数类似，都可以封装逻辑，以实现逻辑的复用。Hooks实际上是一种特殊的函数，而由于Hooks的特殊实现，他们之间也存在着一定的区别。 描述 在我开始学习React Hooks的时候，我就比较
阅读全文
摘要：Context与Reducer Context是React提供的一种跨组件的通信方案，useContext与useReducer是在React 16.8之后提供的Hooks API，我们可以通过useContext与useReducer来完成全局状态管理例如Redux的轻量级替代方案。 useCon
阅读全文
摘要：Mobx与Redux的异同 Mobx与Redux都是用来管理JavaScript应用的状态的解决方案，用以提供在某个地方保存状态、修改状态和更新状态，使我们的应用在状态与组件上解耦，我们可以从一个地方获得状态，在另一个地方修改，在其他地方得到他们更新后的状态。他们都遵循单一数据源的原则，这让我们更容
阅读全文
摘要：手写useState与useEffect useState与useEffect是驱动React hooks运行的基础，useState用于管理状态，useEffect用以处理副作用，通过手写简单的useState与useEffect来理解其运行原理。 useState 一个简单的useState的使
阅读全文
摘要：setState同步异步场景 React通过this.state来访问state，通过this.setState()方法来更新state，当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI。相比较于在使用Hooks完成组件下所需要的心智负担，setS
阅读全文
摘要：useMemo与useCallback useMemo和useCallback都可缓存函数的引用或值，从更细的角度来说useMemo则返回一个缓存的值，useCallback是返回一个缓存函数的引用。 useMemo useMemo的TS定义可以看出，范型T在useMemo中是一个返回的值类型。 t
阅读全文
摘要：useEffect与useLayoutEffect useEffect与useLayoutEffect可以统称为Effect Hook，Effect Hook可以在函数组件中执行副作用操作，副作用是指函数或者表达式的行为依赖于外部环境，或者在这里可以理解为修改了某状态会对其他的状态造成影响，这个影响
阅读全文
摘要：Hooks中的useState React的数据是自顶向下单向流动的，即从父组件到子组件中，组件的数据存储在props和state中，实际上在任何应用中，数据都是必不可少的，我们需要直接的改变页面上一块的区域来使得视图的刷新，或者间接地改变其他地方的数据，在React中就使用props和state两
阅读全文
摘要：React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM
阅读全文
摘要：React组件复用的方式 现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细
阅读全文
摘要：React中组件间通信的方式 React中组件间通信包括父子组件、兄弟组件、隔代组件、非嵌套组件之间通信。 Props props适用于父子组件的通信，props以单向数据流的形式可以很好的完成父子组件的通信，所谓单向数据流，就是数据只能通过props由父组件流向子组件，而子组件并不能通过修改pro
阅读全文
摘要：ReactRouter的实现 ReactRouter是React的核心组件，主要是作为React的路由管理器，保持UI与URL同步，其拥有简单的API与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理等。 描述 React Router是建立在history对象之上的，简而言之一
阅读全文
摘要：React中的合成事件 React自己实现了一套高效的事件注册、存储、分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大程度地解决了IE等浏览器的不兼容问题。 描述 React的合成事件SyntheticEvent实际上就是React自己在内部实现的一套事件处
阅读全文
摘要：React中refs的理解 Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。 描述 在典型的React数据流中，props是父组件与子组件交互的唯一方式，要修改一个子组件，你需要使用新的props来重新渲染它，但是在某些情况下，你需要在典型数据流之外强制修改
阅读全文
摘要：React中的高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。 描述 高阶组件从名字上就透漏出高级的气息，实际上这个概念应该是源自于Java
阅读全文
摘要：React中的纯组件 React提供了一种基于浅比较模式来确定是否应该重新渲染组件的类React.PureComponent，通常只需要继承React.PureComponent就可以定义一个纯组件。React.PureComponent与React.Component很相似，两者的区别在于Reac
阅读全文
摘要：受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的，在React中表单元素通常会持有一下内部的state，因此它的工作方式与其他HTML元素不一样，而获取表单元素内部state的实现方式的不同，就产生了受控组件和非受控组件。 受控组件 在HTML的表单元素中，它们通常自己
阅读全文