copyer_xyf的博客

1、异步useEffect(自定义hook)// 定义function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) { return useEffect(() => { const cleanupPromise = effect() return () => { cleanupPromise.then(cleanup =&gt

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）​在react中 state 和 props是两个非常重要的属性，并且常用的属性。简单来说：都是用来保存数据状态的。需注意的是state，props的每一次改动都会使页面重新渲染一次。state的解释​ state 意为 状态，组件内部的状态。​ state是一个可变的属性，控制组件内部的状态​ state 一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）前言​ 在前面的项目中敲代码，知道可以用useCallback和 useMemo，但是感觉就是不写，怎么说呢？它们是从哪里进行性能优化的呢？​ 以前的， 我的思维陷入了一个误区， 认为 useCallback是对函数的性能优化。其实并不然。​​ useCallback的性能优化在于： 是否让子组件进行重新渲染上面的都是一些废话，可以不用看；当然最后一句话，还是可以看看，因为最后的.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）参数说明类型summary总结栏(currentData) => ReactNode总结栏的两种情况对表格每页的数据进行总结对表格的整体数据进行总结基础数据的搭建// table 的 columnsconst columns = [ { title: 'Name', dataIndex: 'nam.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）前言​ 在开发项目中，经常使用表单模块，来完成交互的过程。但是我感觉，在以前开发的过程中，就是直接copy，没有仔细的去理解其中的逻辑，只要现象满足就可以。但是最近项目中想封装一个通用的表单组件，还是必要知道其中的逻辑和各个属性。所以，就回头过来仔细的理一下。使用在antd4中，使用form表单，有着三种不同的方式的写法。普通用法 （所以的布局全在表单中）hooks写法 .

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）在react 16.6版本以前，是用的react-loadable来实现异步加载组件的；在16.6版本中已经推出了Suspense来实现异步加载组件分别看看两种方式的实现。react-loadablereact-loadable是一个第三方库，所以需要安装安装npm install react-loadable基本使用//一般的组件的使用import Home from .

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）react的hooks提供了两种state管理的hook：useState 和 useReduceruseState的语法很简单useReducer这个语法也是很简单的，前提是你熟悉redux的reducer。基本用法：接受两个参数import { useReducer } from 'react'//初始化stateconst initState = { count.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）相同点：都是接受一个函数，一个数组作为参数，但数组里面发生变化的时候，才会重新执行函数不同点：useEffect函数是异步执行的，useLayoutEffect是同步执行的useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价。useLayoutEffect.

const path = require('path')const CracoAntDesignPlugin = require('craco-antd')module.exports = { plugins: [ { plugin: CracoAntDesignPlugin, options: { customizeTheme: { '@primary-color': '#ff0000

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）在说redux的性能优化之前，需要先理解 浅层比较 这个概念在react-redux中提供了一个函数，专门用于进行浅层比较的 shallowEqualimport { useSelector, useDispatch, shallowEqual } from 'react-redux'我就去看看这个函数的源码， 突然发现，这不就是 PureComponent处理浅层比较的核心代码嘛，就.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）公司一直用的是mobx，感觉自己好久没有动过redux了，正好自己有点空闲时间，就来回忆一下redux的搭建流程。准备工作安装：npx create-react-app <项目名> --template typescript //创建一个react项目npm install redux react-redux --save //安装 redux.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）目的：useCallback 和 useMemo 是react的hooks中的两个函数，专门用于性能优化的。执行时机：useCallback 和 useMemo 在第一次渲染组件的时候，就会执行，拿到各自的缓存；之后，当它们的依赖发生改变的时候，才会执行。useCallback缓存的是函数useMemo缓存的是值useMemo的使用场景function Example() {.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）重要的事说三遍：可以不用看，推荐不用看， 没得看头瞎对react Fiber的胡乱理解，这篇的目的主要是为了让自己对fiber有点印象而已简单理解：帧数浏览器的帧数是 60HZ页面是一帧一帧的渲染出来，当每秒绘制的帧数（FPS）达到 60 时，页面是流畅的，小于这个值时，用户会感觉到卡顿。简单理解： 就是1秒钟的页面，是由60张图片组成的计算下来：每帧渲染的时间 大致 是1000.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。useState的基本使用import React, { useState } from 'react';import ReactDOM from 'react-dom';function Example() { const [count, set.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）前面： 这篇完全是根据阅读大佬博客写下来的笔记（摘抄笔记）。博客原文：精读《useEffect 完全指南》 (qq.com)理解useEffect，就必须先深入理解 Function Component 的渲染机制。Function Component 是更彻底的状态驱动抽象，甚至没有 Class Component 生命周期的概念，只有一个状态，而 React 负责同步到 DOM。.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）ref的使用场景​ 在react的函数组件中，使用ref有着两种途径使用ref保存一个变量，这个变量在整个的生命周期中都不会发生变化使用ref用来获取一个节点DOMforwardRef的使用场景用官网的专业术语：Ref 转化Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。useImperativeHandle的使用场景在.

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）概念解释它们的本质就是对高频执行代码的一种优化手段。节流（throttle）： n 秒内只运行一次，若在 n 秒内重复触发，只有一次执行防抖（debounce）: n秒后执行该函数，如果在n秒被重复触发，则会重新计时利用技术： 定时器 + 闭包javascript版本节流函数：function throttle(fn, delay = 500) { let timer.

回顾​ 今天刷《JS每日一题》的时候，我看了react jsx渲染成真实DOM的面试题，我看了一遍，我感觉我自己可以很清晰的跟着作者的脚步走。虽然我感觉很清晰逻辑步骤，但是作为菜鸟，多敲敲代码总是好的，也能加深对该知识点的印象。​ 经过前面几次的学习和思考，我知道了 react中的jsx语法会通过babel转化为 js代码，以React.createElement函数形式存在，createElement函数返回一个ReactElement函数，ReactElement函数返回一个的虚拟节点，虚拟节点

前言react项目中，更提倡组件化方案，自然形成了将HTML、CSS、JavaScript集中编写管理的方式，就引出了css in js这种方案。有很多流行的第三方库，比如： styled-components安装npm install styled-componentscss in js的基本使用：import styled from 'styled-components'const BackStyle = styled.div` font-size: 20px; color: re

React.StrictMode包裹组件，然后就会对后代元素触发额外的检查和警告，不会渲染出UI，跟React.fragment是一样的。ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>)什么情况下，开启严格模式，会报起警告呢？设别不安全的生命周期使用过时的ref API (比如字符串形式)检查意外的副作用这个组件的constructor会被调用两次这

​在react的类组件中，修改state的状态，是通过setState这函数来进行修改的。错误的写法：import React, { Component } from 'react'export default class UnderStandSetState extends Component { constructor() { super() this.state = { message: 'james' }

对react的jsx和虚拟DOM的简单理解1、前言​ 作为一个刚入门的前端小白，其中如果有错误，请大神指出来，我虚心求教。​ 前端入门，自己可以快速上手，但是想要理解其中的原理，就需要反复的看官网，或者跟着一个老师的脚步，认真的学习（我目前就是这样的，哈哈）。跟着coderwhy老师，我真的学习到了很多的知识。​ 其中，也有对源码的分析，仅限于表层。2、JSX的本质​ jsx仅仅只是React.createElement(component, props, ...children)函数的