随笔分类 - react
摘要：/** * @param {String} message 错误信息 * @param {String} source 出错文件 * @param {Number} lineno 行号 * @param {Number} colno 列号 * @param {Object} error Error对
阅读全文
摘要：<body> <div id='title'></div> <div id='content'></div> </body> const appState = { title: { text: 'React.js 小书', color: 'red', }, content: { text: 'Rea
阅读全文
摘要：useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 将“创建”函数和依赖项添加到参数上使用备注，它仅会在某个依赖项改变时才重新计算备忘录值。这种优化避免在每次渲染时都进行高开销的计算。 也
阅读全文
摘要：React生命周期图解： 一、旧版图解： 二、新版图解： 从图中，我们可以清楚知道React的生命周期分为三个部分: 实例化、存在期和销毁时。 旧版生命周期如果要开启async rendering，在render函数之前的所有函数，都有可能被执行多次。 旧版的React生命周期看图就可以啦，我们就不
阅读全文
摘要：// 当需要处理useState的时候，可以使用 useReducerimport React, { useReducer } from 'react' import './App.css' import ComponentA from './components/ComponentA' impor
阅读全文
摘要：useMemo和useCallback的调用签名： function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; function useCallback<T extends (...args: any[])
阅读全文
摘要：React 提供三种方式创建 Refs: 字符串 Refs （将被废弃） 回调函数 Refs React.createRef (从React 16.3开始) 第一种方式不推荐使用，原因在此， 并且可能会在之后的版本移除。 class MyComponent extends React.Compone
阅读全文
摘要：useEffect和useLayoutEffect区别 useEffect 基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和
阅读全文
摘要：琐碎的前言 组内需要搭建一个内部组件演示平台，就去研究了下ant-design的源码。意外发现了藏在最下方友情链接栏中的换肤功能。如下图所示： 为了方便演示，我把colorpicker的position改为fixed colorpicker 调用方式 <ColorPicker type="sketc
阅读全文
摘要：1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmount () 2. 更新过程 2.1. componentWillReceiveProps (nextP
阅读全文
摘要：React 16之后有三个生命周期被废弃(但并未删除) componentWillMount componentWillReceiveProps componentWillUpdate 官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应
阅读全文
摘要：设置不同环境的打包，这里区分为三种环境，线上的测试，演示，正式环境1。安装 cross-env。兼容跨平台(window, mac)设置的环境变量的有效性。 npm install npm install --save-dev cross-env npm install npm install --
阅读全文
摘要：1. 添加配置中所配置的前缀可解决报错 @Component({ selector: 'app-image-wrapper', template: ` <div [ngStyle]="style" > <img class="img" [src]="src" [alt]="desc" /> <div
阅读全文
摘要：虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。 问题2：类组件和函数组件之间的区别是啥？ 主题: React 难度: ⭐⭐ 类组件可以使用其他特性，如状态
阅读全文
摘要：Hooks 是 React 16 中的特性，解决函数组件想使用类组件的一些特性。 关于更多 Hooks 介绍，请参考 React 官网[1] useState之前是在类组件中使用状态通过 state 定义，大概代码是这样的。 import React from 'react'; class Coun
阅读全文
摘要：之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0： class Example extends React.Component { constructor(props)
阅读全文
摘要：生成空节点 React.Fragment 官方文档： React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。 Fragments 看起来像空的 JSX 标签： render() { return ( <> <ChildA /
阅读全文
