jiang7701037的博客

以下代码，没有使用模块化的方式，使用的是CDN的方式。如果需要源代码，请从这个地址下载：链接：https://pan.baidu.com/s/1s57mr5AE_ecWBFZ5TJTwqw提取码：f7x2另外，这篇文章，主要是剖析组件的初次渲染和重新渲染。所以，其它部分不要太较劲。一、react类组件和函数式组件重新渲染时的区别1、看现象：1）、代码（demo01）类组件： // 1、类组件 class ComClass extends React.Component {

一、概念和作用​ 写在函数式组件里的 “函数调用代码”。如果函数式组件重新渲染时，每次都会执行“调用函数的代码”。如果不是必须的，那么就是性能的浪费。useMemo就是解决这个问题的。即：useMemo是防止不必要的的函数调用。​ 文字描述总是让你很难理解。很抽象。还是要看代码的。格式： useMemo(函数,数组); //当数组中的其中一个元素，发生变化时，就会调用 函数 。举例：如： const nameStr = useMemo(()=>genNa

react_hooks的useCallback，高阶函数memo一、概念和作用1、memo高阶函数：memo解决的是函数式组件的无效渲染问题，当函数式组件重新渲染时，会先判断数据是否发生了变化。相当于类组件的PureComponent（默认提供ShouldComponentUpdate）2、useCallback：1）、useCallback会返回一个函数的memoized(记忆的)值2）、在依赖不变的情况下,多次定义（如：函数）的时候,返回的值是相同的 。3）、格式：let 新的函数 =

一、作用​ 可以使得你在函数组件中执行一些带有副作用的方法，天哪，“副作用”（大脑中无数个？？？？）。​ 每当 React组件更新之后，就会触发 useEffect，在第一次的render 和每次 update 后的useEffect触发，不用再去考虑“初次挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。​ 你可以把 useEffect Hook 看做 componentDidMount，componentDidU

一、作用：useState让函数式组件也可以处理状态。二、格式：1、定义状态：const [状态名，更新状态的函数] = React.useState(初始值|函数);​如：1）、基本类型的状态声明一个新的叫做 “count” 的 state 变量，初始值为0 。​const [count, setCount] = React.useState(0); //useState函数返回的是数组​​相当于类组件中的this.state={ count :0}​...

不好意思，这是知乎上我写的文章，就不再csdn发布了。如果需要阅读，请为什么react选择了函数式组件（剖析原理）

使用react脚手架搭建的项目，运行时和react-dev-tools工具冲突，不能运行项目，报如下错：Cannot read property 'forEach' of undefinedat Object.injectIntoGlobalHook (react-refresh-runtime.development.js:465)解决方案：1、找到这个文件：../node_modules/@pmmmwh/react-refresh-webpack-plugin/clie...

这篇文章有点晦涩难懂，并且我做了很多的铺垫，就是希望，大家能够用这一篇文章彻底搞懂 useCallBack。所以，希望大家能够静下心来，仔细品，同时，把代码也执行一下。否则，根本看不懂，或者可以多看几遍。一、抛出问题以前写类组件时，经常会写以下（有隐含性能的）代码export default class Parent extends React.Component { tempfn(v){ } render = (...

React面试题整理1、react的生命周期1）、生命周期是什么？react 实例的生命周期，就是react实例从初始化，更新，到销毁的过程2）、react实例生命周期经历三个阶段​ 初始化阶段：完成从react组件创建到首次渲染的过程​ 更新阶段：当调用setState函数时，会引起组件的重新渲染​ 销毁阶段：完成组件的销毁3）、三个阶段分别对应的构造函数有：初始化阶段：​ constructor​ 构造函数里，可以做状态的初始化，接收props的

此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的，如果你有路由基础，可以直接看这篇文章，如果没有路由基础，则建议先看前两篇文章。react路由传参（组件之间传值）_通过queryReact路由传参的三种方式：三、通过state（以GoodsList.js为例） 同q...

此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的，如果你有路由基础，可以直接看这篇文章，如果没有路由基础，则建议先看前两篇文章。react路由传参（组件之间传值）_通过queryReact路由传参的三种方式：二、通过query（以GoodsList.js为例）解释：组件之间传...

此篇文章是基于react路由系列01___ 在react脚手架里使用React-router(简单入门)和react路由系列02___ 二级路由上写的，如果你有路由基础，可以直接看这篇文章，如果没有路由基础，则建议先看前两篇文章。React路由传参的三种方式：一、通过params（以GoodsList.js为例） 解释：组件之间传递参数时，一般都...

一、经过文章“react路由系列01___ 在react脚手架里使用React-router(简单入门)”的学习，进入二级路由的学习二、二级路由：1、在react路由系列01___ 在react脚手架里使用React-router(简单入门)里的 GoodsList.js文件进行修改（这是核心，这里面写着二级路由），变成如下代码：import React, { Componen...

一、搭建脚手架环境1、安装node（使用npm）node版本在6以上npm版本在3以上2、安装react脚手架（使用create-react-app工具）npm i create-react-app -g //脚手架可以简化复杂的配置3、创建项目create-react-app ...

在安装react的脚手架（create-react-app 项目名称）时，提示：Unexpected end of JSON input while parsing near其实，但凡使用npm 时，只要提示这个，都可以按照以下几种方式进行尝试。第一种：删掉package.lock.json第二种：清除cachenpmcacheclean--force第三种...

说到SPA，很多人只是在使用，不知道为什么使用？别人再用，所以，我也再用，流行，听到了，所以，我用。 SPA--------single page application。单页面应用，即一个web项目就只有一个页面（即一个HTML文件），对应传统的做网站或者web应用的人来说，觉这不可以思议------怎么可能，一个项目就一个html页面。那跳转怎么办？页面结构不一样怎么办？等等，...