Meskjei的博客

React内置的hooks函数解决了函数组件无法使用state以及在传统写法中生命周期函数混乱和this指向的问题。而hooks所带来的组件复用性的提升则是由自定义hooks来体现的。传统的组件复用多是渲染属性或者是高阶组件这两种方式，缺点除了写起来会相对复杂，还会造成组件层级过多。先来看一个自定义hooks的例子：function useSize(){ const [size. ...

相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。首先来看一下它传统的用法：import React, { useState, useEffect, useMemo, useRef } from 'react';export default function A...

看到“memo”这个字眼，很多人应该会想到memo方法。这是一个高阶函数，它会返回一个函数组件，作用相当于PureComponent。而useMemo的作用也有点像，只不过它不是作用在函数组件上，而是在一段逻辑上，例如：const [count, setCount] = useState(0);const doubleCount = useMemo(() => { retur...

在出现useContext之前，使用context的方式主要是两种，第一种需要使用Consumer：class Component2 extends Component{ render(){ return ( <CountContext.Consumer> { count => <div>{count}&l...

文章目录动态importlazysuspenseError boundariesgetDerivedStateFromErrorcomponentDidCatch动态import在说lazy和suspense之前，还是先说说动态import这种语法。import语句我们使用的很多，通常是import ... from '...'这样的写法，这样的写法也被称作是静态加载。而所谓的动态impo...

文章目录概念APIcreateContext使用注意概念Context可以让数据在组件树中自上而下自由传递，而不需要在树中层层的传递。层层传递不仅在编写代码的时候会十分繁琐，而且中间层级可能根本不关心所要传递的数据，所以也为后期的维护制造理解上的障碍。可以将Context简单理解为一个全局变量。APIcreateContext这是Context的一个核心API，从名字就可以看出，这是用...

文章目录React.map源码阅读React.jsReactChildren.jsmapChildren()mapIntoWithKeyPrefixInternal()getPooledTraverseContext()getPooledTraverseContext()对象池traverseAllChildren()releaseTraverseContext()traverseAllChild...

文章目录React.forwardRef源码React.forwardRef在有些时候我们想要操作子组件中的DOM节点，说到获取DOM节点，可能我们会第一时间想到ref。可是，如果我们是直接在子组件上写ref，获得的只是子组件，而不是子组件下的某个DOM节点。这个时候就可以通过React.forwardRef来实现。例如：子组件：const Child = React.forwardR...

文章目录ref的用法源码ref的用法在使用React的开发过程中，我们经常会需要获取挂载到网页上的DOM节点，为它绑定事件或者是获取它的值（value）。那么这个时候我们就需要用到ref了。ref的用法有三种：第一种是传入一个字符串：<div ref="div"></div>那么当节点渲染到页面上之后，通过this.ref.div就可以获取到这个节点对应的...

文章目录React.createElement源码ReactElementReact.createElement在React中，JSX语法糖都会被转换为React.createElement的形式。例如：<div id='div'>hello</div>会被转换为：React.createElement('div', {id: 'div'}, 'hello')...

可能初次接触React的人会惊讶于为什么可以在JS文件中写HTML的语句，例如return <div>hello</div>。其实这种语法就是JSX，它实际上是一种语法糖。我们想“All-in-JS”，但是无奈HTML那样的标签语法更适合表示界面的结构与层次，于是人们便想出了JSX这种方法，即在JS中写标签，但是实际上最终编译时又会被转换为JavaScript。那么，被...

文章目录概念ProviderconnectmapStateToProps参数stateownProps返回值mapDispatchToProps概念React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据。ProviderReact-redux提供了Provider组件，能够使整个a...

文章目录概念工作流程ActionReducerstorestore的创建概念React作为一个视图层框架，天然是不适合用来管理数据的。因为React框架中，父子组件的通信通过props（父向子传递），或者是回调函数（子向父传递）两种方式实现。若是只是父子组件之间的通信，实现起来还不算太麻烦，若是跨层级的通信，则需要多个组件之间层层通信，实现起来不仅麻烦而且性能也不好。还有我们知道React...

文章目录propTypesPropTypes的验证器基本的JS类型任何可以被渲染的元素react元素某个类的实例枚举类型指定多个类型指定某个类型的数组指定类型为对象且对象的属性是特定类型指定类型为对象且规定哪些属性必须有，哪些可以没有defaultPropspropTypespropTypes是React中组件的一个特殊属性。设置它，可以为组件的props属性进行类型的检查。要设置组件的pr...

文章目录合成事件的绑定方式合成事件的实现机制事件委托自动绑定在React中使用原生事件原生事件和合成事件的混用React基于Virtual DOM实现了一个合成事件层，我们所定义的时间处理器会接受到一个合成事件对象的实例，它完全符合W3C标准，因此不会存在兼容性问题。同样支持事件的冒泡机制，所有的事件都自动绑定到最外层上（document）。如果需要访问原生事件对象，可以使用nativeEve...

在React组件构建的过程中，常常会有一类功能需要不同的组件公用的情况。此时就涉及到了抽象的问题。文章目录mixin封装mixin方法在React中使用mixinmixin的问题命名冲突增加复杂性高阶组件属性代理反向继承mixin所谓Mixin，就是讲一个模块混入到另一个模块之中，或是一个类中。事实上mixin就类似于多重继承。封装mixin方法function mixin(obj, ...

文章目录父组件向子组件通信子组件向父组件通信回调函数利用自定义事件机制父组件向子组件通信React中数据的流动是单向的，父组件向子组件的通信是最常见的组件间通信形式，即父组件通过props传递子组件信息。例如：class App extends Component{ render(){ return ( <div> <Cont...

文章目录受控组件更新state的流程例子非受控组件例子受控组件所谓受控组件就是每当表单的状态发生变化时，都会被写入到组件的state中，这种组件就被称为受控组件。在受控组件中，组件渲染出的状态与它的value或checked prop相对应。React通过这种方式消除了组件的局部状态。更新state的流程可以通过在初始state中设置表单的默认值每当表单的值发生变化，调用onChan...