04 2022 档案
摘要：列表渲染优化 由于 diff 算法在比较的时候默认情况下只会进行同层同位置的比较 所以在渲染列表时可能会存在性能问题 往后添加元素 往前添加元素 让 diff 算法递归比较同层所有元素 给列表元素添加 key, 告诉 React 除了和同层同位置比, 还需要和同层其它位置比 官方文档：https:/
阅读全文
摘要：React 渲染流程 执行 render 方法 <div> <div><p>我是段落</p></div> <div><span>我是span</span></div> </div> 将 JSX 转换成 createElement React.createElement("div", null, Re
阅读全文
摘要：constructor 生命周期方法中做什么 通过 props 接收父组件传递过来的数据 通过 this.state 初始化内部的数据 通过 bind 为事件绑定实例 (this) render 生命周期方法中做什么 返回组件的网页结构 componentDidMount 生命周期方法中做什么 依赖
阅读全文
摘要：打开之前 React 的生命周期文档网页，点击展开不常用的生命周期如下： getDerivedStateFromProps 函数：组件在被挂载或者更新时 (映射数据)，就会回调 shouldComponentUpdate 函数：组件在更新时，决定是否要更新UI，就会回调 getSnapshotBef
阅读全文
摘要：生命周期概述 事物从生到死的过程, 我们称之为生命周期 什么是生命周期方法 事物在从生到死过程中, 在特定时间节点调用的方法, 我们称之为生命周期方法 例如像我们人类，从生到死的过程有这么几个特定的时间点，就是上，幼儿园，小学，中学... React 组件生命周期方法 组件从生到死的过程, 在特定的
阅读全文
摘要：你们有没有一段这样经历，就是在入驻了博客园之后，在编写文章的时候，发现，文章当中的图片，不知道怎么进行存储，我们一般在编写博客园当中的文章时，一般都会使用 markdown 的编辑器进行编写文章，至于其它的博主这里不进行介绍，在使用 markdown 编辑器编写，在本地粘贴图片的时候发现，是上传到本
阅读全文
摘要：setState 是如何给 state 赋值的 通过 Object.assign() import React from 'react'; class Home extends React.Component { constructor(props) { super(props); this.sta
阅读全文
摘要：props 和 state 的区别 props 和 state 都是用来存储数据的 props 存储的是父组件传递归来的数据 state 存储的是自己的数据 props 是只读的, 也就是说只可以进行使用，不可以进行修改 import React from 'react'; class Home e
阅读全文
摘要：面试题内容为：setState 是同步的还是异步的： 默认情况下 setState 是异步的，如果想要验证一下默认情况是异步的可以先来看如下这么一个栗子 import React from 'react'; class Home extends React.Component { construct
阅读全文
摘要：跨组件事件通讯 通过 context 我们已经能够实现跨组件通讯 但是通过 context 我们只能实现 从上往下 传递 不能实现 从下往上 传递或者 同级 之间的传递的问题 经过博主前面的介绍我们知道, 子父组件之间通讯, 是通过回调函数的方式实现的，兄弟组件之间通讯, 也是通过父组件, 通过回调
阅读全文
摘要：在之前的通讯代码当中，发现一个问题，如果传递数据层次太深, 一层一层的传递比较麻烦, 所以 React 也提供了其它的解决方案： 通过 context 上下文传递 通过 Redux 传递 (相当于 Vuex) 通过 Hooks 传递 (相当牛X) 通过 context 上下文传递数据 调用创建上下文
阅读全文
摘要：这里就不在介绍 VSCode 的安装方式了，主要介绍的是用 VSCode 搭建一下 C 语言的运行环境，然后基于 VSCode 编写 C 程序。 首先需要搭建一下 MinGW 的环境配置下载地址：https://sourceforge.net/projects/mingw-w64/files/ 下载
阅读全文
摘要：首先介绍一下跨组件通讯的之间的关系，如下图： 父子通讯 如果我们想在爷爷组件当中给儿子进行通讯，那么该如何进行实现呢，首先来看第一种方式就是一层一层的传递，为了方便观察这里博主就直接都定义在一个文件当中, 先来看从爷爷给到儿子方法的这么一个过程： App.js: import React from
阅读全文
摘要：父子组件通讯 父组件将方法传递给子组件，在 React 当中也会将父组件传递的，数据和函数信息直接存放在子组件当中，的 Props 属性对象当中 React 的父子组件通讯的实现其实就是利用，函数的互相调用进行实现完成的 Header.js: import React from 'react'; i
阅读全文
摘要：本文是延续上一篇文章继续的 类组件的参数传递和函数式组件都是同一个世界同一个梦想的没有区别 类子组件接收参数相比有点不一样 首先将 Header.js 改造为类组件： import React from 'react'; import './Header.css'; class Header ext
阅读全文
摘要：在了解父子组件通讯这个知识点的时候，首先要说明清楚一点内容就是什么是父组件什么是子组件，在上一篇 React-组件开篇 当中我们在 App.js 类组件当中使用到了其它的一些组件，那么 App 就是父组件，被 App 所使用的就是子组件，了解了什么是父子组件之后，介绍要来介绍一下它们之间该如何进行通
阅读全文
摘要：通过 create-react-app 生成的项目结构解读 ├── README.md // 说明文档 ├── node_modules // 依赖包 ├── package.json // 对应用程序的描述 ├── .gitignore // 不通过git管理的文件描述 ├── public │
阅读全文
摘要：组件化开发 组件化开发其实就是分而治之的思想 我们可以将一个完整的界面拆分成多个小的界面, 每个小的界面就是一个组件 每个组件管理自己的状态(数据)和业务逻辑 这样做的既可以提高每个组件的复用性, 又可能降低每个组件的开发难度 定义组件 通过构造函数定义(函数组件, 无状态组件, 展示型组件) 通过
阅读全文
摘要：什么是脚手架 脚手架是一种能快速帮助我们生成项目结构和依赖的工具 每个项目完成的效果不同，但是它们的基本工程化结构是相似的 既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生成基本的项目模板 那么这个帮助我们生成项目模板的工具我们就称之为 '脚手架' create-react-
阅读全文
摘要：这里基于上一篇文章 JSX-绑定事件 主要介绍的就是最后一种，基于普通方法，和箭头函数的方法调用过程当中进行传参，其它的方式自行去进行传参，反正都是没有我博主这里介绍的最后一种方式简单，灵活方便的，那么废话不多说直接上代码来看一下吧。 <!doctype html> <html lang="en">
阅读全文
摘要：JSX 事件参数 和原生 JS 一样, React 在执行监听方法会传递一个事件对象给我们 但是 React 传递给我们的并不是原生的事件对象, 而是一个 React 自己合成的事件对象(也就是React包裹的一个新的事件对象) 什么是合成事件 合成事件是 React 在浏览器事件基础上做的一层包装
阅读全文
摘要：JSX 绑定事件 JSX 中绑定事件必须使用 驼峰命名 <button onClick={this.btnClick}>按钮</button> 事件监听方法中的 this, 默认情况下 React 在调用事件监听方法的时候, 是通过 apply 来调用的, 并且在调用的时候将监听方法中的 this
阅读全文
摘要：JSX 书写规范 JSX 的顶层只能有一个根元素 错误写法： render() { return ( <p></p> <div> </div> ) } 正确写法： render() { return ( <div> <p>BNTang</p> </div> ) } JSX 中的标签可以是 单标签 也
阅读全文
摘要：JSX 嵌入表达式 只要是合法的表达式, 都可以嵌入到 JSX 中 任何合法的 JS 表达式都可以嵌入到 {} 中 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content
阅读全文
摘要：JSX 灵活性 JSX 使我们在 JS 中拥有了直接编写 XML 代码的能力 所以在 JS 中能干的事, 在 JSX 中都能干 例如有如下这么一个需求：通过按钮控制界面上 p 标签的显示和隐藏： <!doctype html> <html lang="en"> <head> <meta charse
阅读全文
摘要：新建业务包 ├─config # 配置文件 ├─controller # 控制器 ├─entity # 实体映射 │ └─response # 响应实体 └─service # 相关业务 在 response 包下，新建两个类，分别是 ResultCode(interface), ResponseR
阅读全文
摘要：创建 Config 包 在包当中新建一个：ElasticSearchConfig.java，内容如下，主要的大致内容就是配置 ES 服务器的连接超时时长与请求相关的时长配置还有就是配置了 ES 服务器的地址： /** * @author BNTang * @version V1.0 * @proje
阅读全文
