火星基地

💡前言最近学习了 Webpack 5 之后，想自己搭建个项目练练手，于是就搭建了一个基于 Webpack 5 的 React 的脚手架。脚手架配置了相关模块，集成了常用功能，便于自己以后 React 新项目的搭建，开箱即用！仓库地址：「Github」🔌模块/功能框架React路由react-router-domTypescript状态管理库redux样式预处理less、sass代码检测eslintgit commit前规范检测commitlint时间库dayjsUI库antd，配

使用 React 时，一般来说，使用函数组件return一个元素时，该元素是被挂载到其最近的 DOM 父节点下，例如：return ( <div> {this.props.children} </div>);挂载了一个新的div元素，其子元素被渲染在此div中。但是，我们需要将子元素挂载到其他的任意 DOM 节点下。例如，最近在实习中遇到一个的问题，要写一个鼠标悬浮时向下弹出选择框的效果。实际效果却是选择框向下弹出，但只显示出了一部分，有一部分不可见。打

1. 实现路由跳转实现了与react-router-dom的5.x版本相同的用法，包括BrowserRouter、Link、Switch、Route等组件，基本用法如下代码所示：<Router> <div> <Link to="/a">组件A</Link> <Link to="/b">组件B</Link> <Link to="/a/c">组件C</Link&g

在 React 中，可以使用useMemo和useCallback来优化无用渲染的性能问题。本文是自己学习useMemo和useCallback的笔记，介绍了它们的使用场景和区别。

本文是自己学习useContext的笔记。1. 两组件通信React 中，父子组件需要通信时，父组件可以将参数写在props中传递给子组件，实现父组件向子组件通信；父组件还可以传递一个函数给子组件，子组件调用这个函数，实现子组件向父组件的通信。这就完成了父子组件的相互通信。但当组件嵌套关系复杂的时候，如下图所示，A组件下有B组件和C组件，B组件下有D组件，C组件下有E组件。当需要在A组件和D组件之间通信时，也可以采取上述的方法，A通过props一层一层传递参数到D组件，D组件再调用函数，一层一.

1. 两组件通信在 React 中，组件之间的通信方式有很多。例如在父子组件中，父组件向子组件通信时，可以将参数写在props传递给子组件；子组件向父组件通信时，可以使用回调函数的方式，父组件传递给子组件一个函数，子组件通过调用这个函数，实现向父组件通信。父子组件通信，具体看这里。但是，假如有这样一些组件，A组件下有B组件和C组件，B组件下有D组件，C组件下有E组件，如图所示：如果需要D组件向E组件通信，即D组件向E组件传值，可以将状态定义在公共的父组件A上，分别向B、C组件传递参数和函数，再依次传

render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop。关于render props的使用场景，我们先来看一段代码：// A组件class A extends Component { state = { count: 0 }; add = () => { this

1. 两个setState，调用几次？如下代码所示，state中有一个count。对按钮绑定了点击事件，事件中执行了两次setState，每次都将count的值加1。当点击按钮时，setState会执行几次？render()会执行几次？答案：都是1次。state = { count: 0 };handleClick = () => { this.setState({ count: this.state.count + 1 }); this.setState({ count:

1. setState同步？异步？在 React 的类式组件中，我们可以使用setState方法更新state状态。但有些时候使用setState之后，得不到最新的数据。其实 React 中setState本身执行的过程和代码是同步的，只是因为 React 框架本身的性能优化机制而导致的。React 中合成事件和生命周期函数的调用顺序在更新之前，导致在合成事件和生命周期函数中无法立刻得到更新后的值，形成了异步的形式。假如在一个合成事件中，循环调用了setState方法n次，如果 React 没有优化，

在 React 中，父子组件的通信是常见的问题，除了使用状态管理工具（如redux）以外，也可以实现父子组件的相互通信。其中，父组件可以通过props、原型方法向子组件通信，子组件可以通过回调函数、事件冒泡向父组件通信。1. 父组件向子组件通信1. props如下代码，name作为props由父组件传递给子组件，子组件拿到name后，渲染在页面上。参数name由父组件传递给了子组件。import { useState } from 'react';const Son = ({ name })

1. 前言之前我使用hexo搭建过个人博客。hexo很强大，渲染页面速度快，支持markdown语法，可以一键部署，还可以扩展各种插件。但hexo搭建的是静态页面，每次更新文章，都要重新生成静态页面，再部署页面。hexo也没有后台管理，想要修改发布的文章，只能修改源代码，再重新生成页面。所以很早之前就想写一个自己的博客系统，由博客展示页面和后台管理页面构成，通过后台管理页面，可以实时更新、发布文章，非常方便。但在当时还没有能力写出这样一个系统，就一直没有去做。后来学习了React之后，想尝试下写自己的

1. 前言最近在用React写一个小项目时，遇到了这样的需求：在某个组件中引入外部js文件，也就是引用一个或多个script标签。这些script标签仅供某个组件使用，所以不想在html页面中直接引进来，想就在相应的React的函数组件中引入，查阅了相关资料，找到了以下可行办法。2. 动态创建script标签并执行在组件挂载时，动态创建script标签，并设置标签的src属性，若不是外部文件，还可以设置innerHTML，然后追加到body标签的最下面。在组件即将卸载时，移除这个标签。❗❗❗注意

1. 实现效果最近在用React写一个博客管理系统，有一个功能是添加新文章。在新建文章的页面，我希望做到像优快云这样，左边是编辑区（markdown格式），右边是预览区。实时更新，编辑文本的同时，在预览区就能看到效果。就自己动手实现了一个这样的组件，markdown实时预览编辑器！具体效果如下：2. 实现过程使用React实现，做成单独的一个组件。首先HTML结构如下：<header>基于React的markdown实时编辑器</header><div cl

1. 实现效果input输入框显示的是state中的数据，state改变，input输入框中的值也跟着改变：手动更改输入框的值，state也会相应改变：2. 实现过程使用React-Hook，首先定义渲染input输入框值的state，初始值为空：const [inputValue, setInputValue] = useState('');然后在input输入框中添加value属性，属性值为inputValue，由inputValue决定显示的内容。<input type="t

无状态组件更适合函数组件负责展示无状态，复用度高有状态组件函数组件 + hooks或类组件useState或声明stateuseEffect或使用生命周期容器组件子组件状态提升到此，统一管理异步操作，如数据请求等提高子组件的复用度高阶组件接收组件，返回组件为原有组件增加新功能和行为代替mixins，避免状态污染回调组件高阶组件的另一种形式将组件本身，通过props.children或prop属性传递给子组件适合不能确定或不关心传给子组件数据的场景，如路由，加载组件的实.

1. Hook 简介Hook 是 React 16.8.0 版本增加的新特性，可以在函数组件中使用 state 以及其他的 React 特性。✌️Hook 使用规则：Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook，不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 自定义 Hook）下面介绍几个常用的 Hook。

1. 前言最近和后端同学I’M渣渣一起完成了一个Demo级的多人聊天室应用，实现了聊天室的基本功能。采用前后端分离方案，我负责前端代码的编写，I’M渣渣实现了后端的接口。预览地址：多人聊天室源码仓库：[GitHub]2. 应用简介主要功能用户注册用户登录发送、接收消息退出功能主要用到的技术前端：React脚手架Create-React-App状态管理redux + react-redux等前端路由 React-Router、路由鉴权少量使用 AntD 组件库 （Ic

1. 前言最近写了一款基于React脚手架开发的 TodoList 网页应用，主要记录自己的代办事务，方便查看、管理、安排时间，提升效率。PC Web端 + 移动端 + 黑暗模式，可日常使用。没有复杂的界面，没有繁琐的设置，开箱即用，专注于任务管理。应用网址：TodoList2. 应用简介1. 主要功能邮箱注册、登录注册邮箱地址、密码的验证邮箱登录后，可绑定用户名，选择使用用户名登录同一账号退出功能页脚显示一句诗词（今日诗词）实时时间显示黑暗模式、白天模式切换，下次登录自动切换上

1. 实现效果上面是Count组件，下面是Flag组件。Count组件中，点击点击+1按钮，数值加一，点击清零按钮，数值清零，同时数值传递给Flag组件同步显示。Flag组件中，点击login可以切换为true，点击logout切换为false，同时将状态传递给Count组件同步显示。2. 安装依赖包npm install react-redux redux redux-thunk redux-devtools-extension3. 文件结构使用了redux，需要在UI组件外套一层容器

1. 为何使用 react_router_config在 React 中使用路由，一般使用react-router-dom中的NavLink和Route，使用NavLink编写路由链接，使用Route注册路由：import { NavLink, Route } from 'react-router-dom';...{/* 路由链接 */}<NavLink to="/home">Home</NavLink><NavLink to="/about">About&

文章目录1. `setState`1. 对象式2. 函数式2. 路由组件的`lazyLoad`3. `Hooks`1. State Hook2. Effect Hook3. Ref Hook4. `Fragment`5. `Context`1. setState使用setState更新状态有2种写法。对象式是函数式的简写方式（语法糖）。使用原则（非必须）：新状态不依赖于原状态 ===> 使用对象式新状态依赖于原状态 ===> 使用函数式如果需要在setState()执行后获取最新

1. params路由链接（携带参数）：<Link to="/demo/test/tom/18">详情</Link><Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} /><Route

1. 路由的基本使用明确好界面中的导航区、展示区导航区的a标签改为Link标签<Link to="/xxxxx">Demo</Link><Link to="/home">Home</Link><Link to="/about">About</Link>展示区写Route标签进行路径的匹配<Route path='/xxxx' component={Demo}/><Route path="/

1. 安装并引入模块npm install pubsub-jsimport PubSub from 'pubsub-js';// or when using CommonJSconst PubSub = require('pubsub-js');2. 基本使用先订阅，再发布适用于任意组件间通信要在组件的componentWillUnmount中取消订阅// 创建订阅的回调函数var mySubscriber = function (msg, data) { console

方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二创建代理配置文件，在src下创建配置文件： src/setupProxy.js编写setupProxy.js配置具体代理规则： const proxy = requi

1. 虚拟DOM中key的作用key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。当状态中的数据发生变化时，react会根据新数据生成新的虚拟DOM, 随后React进行新虚拟DOM与旧虚拟DOM的diff比较，比较规则如下：旧虚拟DOM中找到了与新虚拟DOM相同的key若虚拟DOM中内容没变, 直接使用之前的真实DOM若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM旧虚拟DOM中未找到与新虚拟DOM相同的key根据数据创建新的真实DO

与旧版生命周期相比，React生命周期即将废弃componentWillMount()、componentWillReceiveProps()、componentWillUpdate()三个钩子，现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。新版增加了两个钩子：getDerivedStateFromProps()和getSnapshotBeforeUpdate()。1. 初始化阶段由ReactDOM.render()触发—初次渲染const

1. 初始化阶段由ReactDOM.render()触发constructor()componentWillMount()组件即将挂载时、挂载之前触发render()componentDidMount()组件挂载后触发一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息2. 更新阶段由组件内部this.setSate()或父组件render()触发componentWillReceiveProps()组件即将接收到参数时触发shou

1. 非受控组件class Login extends React.Component { handleSubmit = event => { event.preventDefault(); //阻止表单提交 const { username, password } = this; alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`); }; render() { return ( <form o

1. state<div id="test"></div><script type="text/babel"> //1.创建组件 class Weather extends React.Component { //构造器调用几次？ ———— 1次 constructor(props) { console.log('constructor'); super(props); //初始化状态 this.state = { isHot: f

1. 函数式组件<div id="test"></div><script type="text/babel"> //1.创建函数式组件 function MyComponent() { console.log(this); // 此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件</h2>; } //2.渲染组件到页面 ReactDOM.render(<My

1. 使用js创建虚拟DOM<div id="test"></div><script type="text/javascript"> //1.创建虚拟DOM const VDOM = React.createElement( 'h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React') ); //2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, do