React路由原理不同的路由渲染不同的组件有两种实现方法HashRouter:利用hash实现路由切换BrowserRouter：实现h5Api实现路由的切换HashRouterhash地址切换的时候页面不会刷新，使用window.location.hash读写hash地址，可以给浏览器造成一个跳转的假象。比如我在#/a跳到了

主要的技术点：    1、利用Canvas的lineTo方法和stroke方式绘制连续填充的线；    2、利用canvasContext的strokeStyle更改画笔颜色；    3、利用canvasContext的lineWidth更改画笔宽度；一、支持的功能：    1、调整画笔的颜色；    2、调整

语法规则location[=|~|~*|^~|!~|!~*]/uri/{…}模式含义location=/uri=表示精确匹配location^~/uri^进行前缀匹配，~表示区分大小写location~pattern~区分大小写的匹配location~*pattern~*不区分大小写的匹配location/uri不带任何修饰

react+flexible适配布局（1）npmilib-flexible--save（2）npmipostcss-px2rem--save（3）在node_moduleseact-scripts/config/webpack.config.js下做如下配置constpx2rem=require('postcss-px2rem'); px2rem({remUnit:75})        //px2rem({r

ReactFiber是对核心算法的一次重新实现把一个耗时长的任务分成很多小片react协调diff算法memoy原理functionmemoize(fn){varcachedArg;varcachedResult;returnfunction(arg){if(cachedArg===arg){returncachedResult;}cachedArg

cssloader;npminstall--save-devcss-loaderstyle-loadermini-css-extract-plugincss-loader：解析@import这种语法style-loader：把css插入到head标签中mini-css-extract-plugin:抽离css样式让index.html里面的css样式变成link引入urlloader;图片等资源处理npminstall-

React1.React核心概念1.React使用单页面调试代码<scriptsrc="https://unpkg.comeact@16/umdeact.development.js"></script><scriptsrc="https://unpkg.comeact-dom@16/umdeact-dom.development.js"></script><

因为做了几次了，然后都忘了列表渲染具体怎么写的了，所以自己写一个随笔记录一下，加深一下记忆。react的列表渲染，就是在你有一个数组数据需要对它进行遍历单个组件并进行赋值的过程。示例：对普通标签的列表渲染。render(){letlistData=[1,2,3,4]return(

constqueue={pending:null};functiondispatchAction(action,queue){constupdate={action:action,next:null};if(queue.pending==null){update.next=update;}else{update.next=queue.pending.next;queue.pending.next=

浅比较就是只比较第一级，对于基本数据类型，只比较值；对于引用数据类型值，直接比较地址是否相同，不管里面内容变不变，只要地址一样，我们就认为没变。所以在这种情况下，我们以后用的时候，对于引用类型值修改状态或修改属性时候，对于它赋值的时候，我们尽可能把之前值拿过来克隆一份，赋给它新的

本文内容如下webpack中的概念和文件结构如果你都有了答案，可以忽略本文章，或去webpack学习导图寻找更多答案配置打包html在上一篇，已经配置过了，内容包括：自动引入JS，修改title，html代码压缩在这里，再安装clean-webpack-plugin，用于每次打包时删除旧有的打包文件//安装：yarn

show.jsximportReact,{useContext}from"react";import{Colorcontext}from"../App.js"functionA(){constcount=useContext(Colorcontext)return(<divstyle={{color:count}}>我是文字，我现在变成了{count}</div>

项目场景：我们在使用a标签时，href属性可以用于指定超链接目标的URL，其值可以使任何有效文档的相对的或绝对的URL，包括片段标识符和JavaScript代码段。用户选择了a标签中的内容，浏览器会尝试检索并展示href属性指定的url所表示的文档，或者执行JavaScript表达式、方

安装Node.js使用npm-v检查安装成功目前的node中都会自带npm所以不需要重新下载直接切换至淘宝镜像即可1.临时使用：npm--registryhttps:/egistry.npm.taobao.orginstallexpress2.(推荐)持久使用：npmconfigsetregistryhttps:/egistry.npm.taobao.org3.检

自2019年首次发布以来，小巧轻便的JavaScript引擎Hermes在社区中的名气越来越高，很多的框架也开始支持Hermes。作为ReactNative领域高人气元框架的缔造者，Expo团队此前公布了对Hermes的实验性支持。另外，流行移动数据库Realm团队近期也决定为Hermes提供alpha支

react的路由使用也太太太复杂了吧，有各种各样的的花式，主要是有太多的配置项可以选择了，接下来就写一下我自己学到的。路由的下载react的路由需要额外下载，然后有三种，分别是供web，软件，两种都能用的any。然后我们主要用的是web，下载命令：npmireact-router-dom--save然后在使用的地方

一、原因Ant-design官方文档中已经提到了这一问题的原因，如下：二、解决方案通过form.setFieldsValue动态更新表格值通过父组件传参的方式传入initialValues

react-router-domhttps://github.comemix-runeact-router/blob/main/docs/getting-startedutorial.md对于location的变化，不论是hashtag方式，或者是通过pushstate改变urlpath的方式，这种情况下，只有使用Route方式的引用的组件，才能感知路径变化（location对象），加载

遇到一个十分奇怪的问题，希望有大佬能给解惑：使用qiankun进行微前端改造，主应用是vuehash模式，微应用是reacthash模式；react微应用单独测试没有任何问题；通过主应用菜单切换路由跳转的时候，微应用无法响应，不会跳转；通过浏览器前进后退操作，微应用可以响应对应的路由；将主应用和微应

 *CREATE-ELEMENT：创建JSX对象 * 参数：至少两个TYPE/PROPS，CHILDREN这个部分可能没有可能有多个functioncreateElement(type,props,...childrens){letref,key;if('ref'inprops){ref=props['ref'];props['ref']=undef

 组件的数据挂载方式属性(props)props是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props需要更多教程，微信扫码即可 

文章目录ReactHooksHooks简介Hook函数（9种）自定义HooksReactHooksHooks简介介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件

文本框和富文本框.下拉框和复选框都是onchange监听事件变化props是只读属性.可以传任意值.子字符串.数组.函数.甚至是jsx片段如果是类组件来接收props.写了构造函数.应该吧props传递给super().否则构造函数中无法获取props. 父向子传值直接在标签上传递子向父传值.首先父组

一、React-hooksuseReducer和useContext封装和使用userReducer.ts数据存储文件/***userReducer.ts*数据封装：reducer*/typeActions='updateUserId'|'updateToken';exportinterfaceTAction{type:Actions;data:any;}exportinterfaceTState{

const[count,setCount]=useState(0)console.log('redner...');constcuRef=useRef({timer:null,count:0})constprintBtnClick=()=>{cuRef.current.count=count+1console.log('printBtnClick1&

曾经一度以为React已经是前端框架的极致，直到看到了Stencil。给人的感觉不亚于用惯了jQuery之后突然看到React。这就是所谓的降维打击，或者说玩法不同吧。直接操作DOM的框架里面，jQuery做到了极致，然而React搞了个虚拟Dom。Stencil干脆用起了WebComponent，浏览器原生功能，直接跳过了

1、先在src目录下创建一个目录 1）storageUtils.js文件/***此模块是用于local数据存储管理的工具模块*/importstorefrom'store'constUSER_KEY='user_key'conststorage={/***存储user*/saveUser(user){store.set(USER_KEY,user)},

index.jsimportReactfrom'react'importReactDOMfrom'react-dom'importCartSimplefrom'./CartSimple'constjsx=(<div><h1>ReactStudy</h1><CartSimple/></div>);//渲染组件ReactDO

vite概念和设计思想esm和webpack的对比在html以module(esm)的方式引入js模块在html项目中引入第三方lodash-es库，yarnaddlodash-es，然后使用：（如何找到入口文件：node_modules/库名/package.json的main字段就是入口文件）引入lodash.js的时候把其他模块引入了，其他模块又

umiumiJs是一个类Next.JS的react开发框架它基于一个约定，即pages目录下的文件即路由，而文件则导出react组件。然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各个场景里面初始化项目npmiumi-gumigpageindexdev也是基于webpack-d