xuxuii的博客

博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏之前学习了Mobx集中状态管理工具参考文章👉🏻【MobX集中状态管理工具】MobX真的取代了Redux吗今天来学习关于Mobx的一个小案例！感兴趣的小伙伴一起来看看吧~🤞...

一个可以和React良好配合的集中状态管理工具，和Redux解决的问题相似，都可以独立组件进行集中状态管理，mobx和react的关系，相当于vuex和vue。1️⃣初始化mobx的过程是怎样的？声明数据 => 响应式处理 => 定义action函数 => 实例化导出2️⃣mobx如何配合react，需要依赖什么包？mobx-react-lite作为连接包，导出observer方法，包裹组件（只能和函数组件配合）3️⃣模块化解决了什么问题？维护性问题4️⃣如何实现mobx的模块化？......

博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏之前学习了react-router-dom5版本的相关内容参考文章👉🏻React路由组件传参的三种方式和 【React路由】编程式路由导航回顾上篇文章👉🏻【React Router 6 快速上手一】，今天来学习react-router-dom6版本的另一些相关知识！感兴趣的小伙伴一起来看看吧~🤞.........

react-router: 路由的核心库，提供了很多的：组件、钩子。包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等。等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增等。变为等。useParams、、useMatch等。官方明确推荐函数式组件了！！！…......

博主主页👉🏻蜡笔雏田学代码专栏链接👉🏻React专栏接上一篇文章react的扩展知识，今天来学习React的另外一些扩展知识感兴趣的小伙伴一起来看看吧~🤞

对象式的setState是函数式的setState的简写方式(语法糖)使用原则：如果新状态不依赖于原状态 ===>使用对象方式如果新状态依赖于原状态 ===>使用函数方式如果需要在setState()执行后获取最新的状态数据, 要在第二个callback函数中读取。...............

前言参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用。语法规则语法选择代码useEffect - 发送网络请求使用场景语法要求正确写法在，然后把这个函数包装成同步...

React体系里组件分为 和 经过多年的实战，函数组件是一个更加匹配React的设计理念 ，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生.注意点：在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等class组件就像一个厚重的‘战舰’ 一样，大而全，提供

1️⃣定义一个Person组件，和Count组件通过redux共享数据。2️⃣为Person组件编写：reducer、action，配置constant常量。3️⃣重点：Person的reducer和Count的Reducer要使用combineReducers进行合并。合并后的总状态是一个对象！！！4️⃣交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。今天的分享就到这里啦✨\textcolor{red}{今天的分享就到这里啦✨}今天的分享就到这里啦✨。.........

不能使用任何redux的api，只负责页面的呈现、交互等。负责和redux通信，将结果交给UI组件。2️⃣如何创建一个容器组件———依靠react-redux的connect函数connect(mapStateToProps,mapDispatchToProps)(UI组件)mapStateToProps：映射状态，返回值是一个对象mapDispatchToProps：映射操作状态的方法，返回值是一个对象容器组件中的store是靠props传进去的，而不是在容器组件中直接引入。......

今天来学习一个新的react插件库👉🏻感兴趣的小伙帮一起来看看吧~

1️⃣去除Count组件自身的状态2️⃣src下建立-src-redux​-store.js​-count_reducer.js3️⃣。

redux及其工作流程和案例分析感兴趣的小伙伴一起来看看吧~

按照配置主题的要求，自定义主题需要用到less变量覆盖功能。我们可以引入customize-cra中提供的less相关的函数addLessLoader来帮助加载less样式，同时修改config-overrides.js文件。安装less和less-loader想要修改less文件需要安装less。修改完之后编译less文件需要安装less-loader。修改文件//配置具体的修改规则const{{这里利用了less-loader的modifyVars配置主题。......

借助this.props.history对象上的API对操作路由跳转、前进、后退。

当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递params参数（ID，TITLE，CONTENT）信息。在路径后面跟上想要传递的值注册路由时，声明接收params参数这样id，title参数就传递给了Detail组件，Detail组件可以通过拿到参数。🔥向路由组件传递search参数当点击消息1这个导航链接时，展示下方对应的Detail路由组件，并向这个组件传递search参数（ID，TITLE，CONTENT）信息。和params的写法有所不同注册路由时，.

点击Home路由链接，路径为/home/a/b，模糊匹配到路径为/home的Home组件原理:在MyNavLink 中的to属性，会以/作为分隔符，所以就把home、a、b取出来了，并且把取出来的第一个和Route下的path进行比对，匹配上了就显示，匹配不上也不会和后面的a、b进行匹配了，就不会显示组件了。反过来，代码如果是这样的话，Home组件就不会显示了。💥注：路由链接里的 home必须在最前面，不能写成 /a/home/b，否则不能模糊匹配。编写路由链接时的路径必须和注册路由时的路径完全一样，.

1️⃣ 单页Web应用（single page web application，SPA）。2️⃣ 整个应用只有（单页面，多组件）。3️⃣ 点击页面中的链接页面，只会做页面的。4️⃣ 数据都需要通过 ajax 请求获取，并在前端异步展现。⭐什么是路由？⭐路由分类：1️⃣后端路由：2️⃣前端路由：⭐前端路由的原理前端路由的实现是依靠 。程序员不直接自己去操作BOM里的history，因为原生的API不好用，所以借助来操作。引入history.js库：创建history对象：如何阻止a标签的跳转？点击a

该方法可以假设A组件想给B组件发送消息（数据），A组件发布消息，B组件（接收数据）就要订阅该消息，这样B就能收到A组件传过来的数据了。下载PubSubJS：引入PubSubJS：📢订阅消息🔊发布消息📝实现步骤1️⃣分别在Search组件和List组件中引入PubSubJS2️⃣List组件订阅消息：当组件挂载完毕时订阅消息3️⃣Search组件使用axios发送请求获取数据并发布消息：4️⃣List组件将要卸载时，取消订阅：📌扩展—fetch发送请求利用fetch()方法发...

使用create-react-app脚手架搭建的项目，拆分组件：最外层App父组件，里面分别为Search和List子组件。💥总结在一个React项目中，组件之间的通信是非常重要的环节。父组件在展示子组件，可能会传递一些数据给子组件：子组件向父组件传递消息：...

1️⃣首先需要在vscode安装axios2️⃣然后使用搭建一个服务器：由于浏览器地址栏默认发送的就是get请求，我们可以在地址栏输入：按下回车键，查看服务是否可以成功返回数据：3️⃣发送请求获取数据：当点击按钮时，控制台显示报错：No ‘Access-Control-Allow-Origin’ header：说明跨域了，违背了同源策略…由于react脚手架运行在3000端口，但是发送请求的服务器在5000端口，形成了跨端口访问的问题，违背了同源策略，所以访问失败。如何解决呢？在react脚手架里通过来

子组件List接收父组件传过来的todos，遍历todos，将拿到的每一项的属性传给Item组件。子组件Item接收List传过来的信息，实现是否选中以及动态更新名称的功能实现添加一个todo：在App组件里自定义一个函数，传给Header组件，Header组件调用这个函数，将准备好的todoObj参数传给App组件，放到状态里，从而引起App组件状态的更新，调用render重新渲染，由于List是子组件，从而引起子组件重新渲染。此Demo整体的代码如下：今天

效果如下：如果您也是react初学者，可以拿起手中的电脑跟着敲一敲哦~

第一步，在cmd全局安装：第二步，切换到想创项目的目录，使用命令：第三步，进入项目文件夹：第四步，启动项目：当出现此页面表示项目以及创建成功了！！！🎉页面效果显示的流程📝：index.js（入口文件，引入React需要的一些核心库和组件，渲染App组件，根据写的root自动到index.html文件下）　＝> index.html（在此文件下找到root节点，App组件就渲染到页面上了）

文章目录🥇 虚拟DOM与DOM Diffing算法📌 案例📕 基本原理图🔑 虚拟DOM中的key的作用🔐用index作为key可能会引发的问题：🔓开发中如何选择key?🥇 虚拟DOM与DOM Diffing算法首先来个案例验证一下Diffing算法的存在以及工作原理📌 案例需求：验证虚拟DOM Diffing算法的存在效果：📕 基本原理图代码如下：<script type="text/babel"> class Time extends React.Componen

文章目录📌组件的生命周期1️⃣ 理解2️⃣ 案例3️⃣生命周期流程图（旧）A. 实现setState 和 forceUpdate 流程B. 实现组件之间传值流程4️⃣ 对比新旧生命周期5️⃣ 生命周期流程图（新）A. getDerivedStateFromProps（几乎用不到，使用场景及其罕见）B. getSnapshotBeforeUpdateC.getSnapshotBeforeUpdate使用场景6️⃣ 重要的三个钩子7️⃣ 即将废弃的钩子📌组件的生命周期先来看个例子引出生命周期理...

React面向组件编程文章目录React面向组件编程1.1基本理解和使用1.1.1 使用React开发者工具调试1.1.2 定义组件的方式Ⅰ.函数式组件：Ⅱ.类式组件：1.1.3 注意1.1.4 渲染类组件标签的基本流程1.2 组件实例的三大核心属性之一：state1.2.1 理解1.2.2 案例1.2.3 在类式组件使用state：1.2.4 在类式组件使用state的简写方式：1.2.3 强烈注意1.3 组件实例的三大核心属性之一：props1.3.1 理解1.3.2 案例1.3.3 作用1.3.4

React简介与入门文章目录React简介与入门Ⅰ.React简介1.1 什么是React全家桶？1.2 React是什么？1.3 谁开发的？1.4 为什么要学？1.5 React的特点1.6 学习React之前要掌握的JavaScript基础知识Ⅱ. React入门1.1 React的基本使用1.1.1 相关库1.1.2 创建虚拟DOM的两种方式1.1.3 虚拟DOM与真实DOM1.2 React JSX1.2.1 jsx定义及作用1.2.2 jsx语法规则1.3 模块与组件,模块化与组件化的理解1.3