react

软件环境 macOS Big Sur 11.1 React 16.12.0 Ant Design 4.10.0 实际效果 现有一个需求，是上传文件，点击浏览文件按钮，选中文件后，在按钮的上方显示，上传的文件列表，如下图所示 当前效果 目前使用阿里的Ant UI组件库，使用其中的上传组件，官方提供的示例，如下图如示 本地使用后，如下图所示 如何才能实现，我们需要的效果呢，Google了好多文章，找到了一种方式，就是重写itemRender方法，自定义文件列表的展示，使用这个方法，需要重写多个action。 后来查看公司前端人员写的代码，看到另一种解决方法。 主要使用两个Upload组件，第一个Upload组件主要是展示文件列表，第二个Upload组件是选择文件上传的这个操作，不过，选择文件后，把文件列表在下方展示隐藏起来。 showUploadList: false, //不显示上传的列表 把得到的文件列表，赋值给第一个Upload组件中，大概如下： beforeUpload(file: any, fileList: any) { setFileList(fileList); //设置文件列表 return false; //不要调用上传文件接口 }, <!--第一个Upload组件--> <Upload fileList={fileList}></Upload> 部分代码如下：

前言 前端校招面试题主要内容包括 html，css，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，设计模式，项目等等。 （本文资料 适合0-2年） 包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。 文章中所列主要为大纲部分，详细内容可以在文末自行获取哈！ 第一章 HTML 1.浏览器页面有哪三层构成，分别是什么，作用是什么? 2.HTML5的优点与缺点？ 3.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义? 4.HTML5有哪些新特性、移除了哪些元素？ 5.你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么? 6.每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 7.说说你对HTML5认识?（是什么,为什么） 8.对WEB标准以及W3C的理解与认识? 9.HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些? 10.什么是WebGL,它有什么优点? 11.请你描述一下 cookies，sessionStorage 和 localStorage 的区别? 12.说说你对HTML语义化的理解? 13. link 和@import的区别? 14.说说你对SVG理解? 15.HTML全局属性(global attribute

文：徐超，《React进阶之路》作者 授权发布，转载请注明作者及出处 ###React 深入系列5：事件处理 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 Web应用中，事件处理是重要的一环，事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中，处理事件响应的方式有多种，本文将详细介绍每一种处理方式的用法、使用场景和优缺点。 使用匿名函数 先上代码： //代码1 class MyComponent extends React.Component { render() { return ( <button onClick={()=>{console.log('button clicked');}}> Click </button> ); } } 点击Button的事件响应函数是一个匿名函数，这应该是最常见的处理事件响应的方式了。这种方式的好处是，简单直接。哪里需要处理事件响应，就在哪里定义一个匿名函数处理。代码1中的匿名函数使用的是箭头函数，我们也可以不使用箭头函数： //代码2 class MyComponent extends React.Component { render() { return ( <button onClick={function()

前言 本人二本大学科班出身，首次面试美团一面凉了。先分享一下美团的凉经，希望大家做好避坑准备： 一面： 1.http和https的区别，非对称加密和对称加密的原理，还有http2和http1的区别（多路复用、数据通过字节流传输） 2.tcp和udp的区别，TCP如何实现数据的可靠性传输（滑动窗口和拥塞控制） 3.说明一下tcp的三次握手和三次挥手，为什们一定要这样子 5.循环对象的方法有哪几种以及它们的区别（Object.keys() 、for of 、for in） 4.如何实现对象的深拷贝，考虑对象嵌套问题代码实现对象深拷贝（手撕失败，） 5.检测数据类型的方法有哪几种（typeOf 、instanceof、constructor、Object.prototype.toString.apply()） 6.说明一下防抖和节流，代码实现他们 7.了解过css动画吗？说一下transition和animation的区别以及transition的触发条件 8.html文件中script标签引入标签的defer属性和async属性以及它们与在head标签内引入的区别 9.给你一个数组根据时间按顺序每秒钟输出一个元素以及其下标 10.对css3的剪切属性有了解吗 11.html页面中为何会出现浮动以及如何清楚浮动（该开始理解成了float浮动，后面知道是BFC） 12.如何实现垂直居中

文章目录 第一部分：Java基础 变量、控制结构、OOP（封装，继承，多态）、数组、Java API、异常和处理、集合、泛型、IO、反射、网络通信 第二部分：Java高级 1. Java多线程/高并发 1.1 并发基础 互斥同步、非阻塞同步、指令重排、synchronized、 volatile 1.2 线程 1.3 锁 自动锁、偏向锁、可重入锁 1.4 线程池 1.5 并发容器 1.6 JUC executor、collections、locks、alomic（原子类）、tools 2. 数据结构和算法 2.1 数据结构 数组（数组问题）、队列、栈、链表、树、散列、堆、图 2.2 算法 排序（8种）、查找、分治、动态规划（背包问题）、回溯（骑士周游问题）、贪心算法、KMP、Prim、kuskal、flovd-最短路径、（Dij...）最短路径 3. 设计模式（23种） 单例模式、观察者模式、工厂模式、适配器模式、装饰者模式、代理模式、模版模式、职责链模式、其他（组合模式、桥接模式...） 4. JVM JVM体系、类加载机制、双亲委派机制/沙箱安全机制、JMM（Java内存模型）、字节码执行过程、GC（垃圾回收算法）、JVM性能监控和故障定位、JVM调优 第三部分：Java web 1. 前端基础 html、css、JavaScript、ajax、jquery 2. 前端框架

环境搭建步骤 1：不要把项目放在中文目录下，不然会曝出一些很奇怪的问题，例如转码失败等 2：当我们在Android真机上运行项目时，想要热加载的话，我们需要摇晃手机，并选取enable live Reload选项 React Native的升级与降级 1：React Native现在版本迭代更新速度较快，我们需要不断进行升级（升级前需先备份），那详细步骤是怎么样的呢？首先我们先查看本地版本 确认好后，我们查看react-native现有版本，可以看到现在现在最新的版本也是0.60.4 如果我们版本过旧，想要升级就可以使用以下指令 升级完后，常见的错误就是依赖模块版本不统一，我们根据提示升级React相关模块即可。我们运行以下命令： 至此，升级操作完成。 2：假如我们升级到最新版本后，程序不是特别稳定，想回到旧版本，我们该怎么办呢？第一种是修改package.json文件；第二种是执行命令npm install --save react-native@版本号，之后更新相关依赖文件即可。如果降级之后报错，建议删除node-modules后，然后再使用npm install命令重新下载依赖文件。 来源： oschina 链接： https://my.oschina.net/u/4271255/blog/3450151

一、函数式组件创建 function HelloComponent(props, /* context */ ) { return <div>Hello {props.name}</div> } ReactDOM.render( <HelloComponent name="Sebastian" />,document.getElementById("mountNode")) 这里我们可以知道该组件中并没有自己的状态,但实际开发中往往需要内部的状态实现一系列的交互和展示功能.所以我们用class创建组件更多一点.但是,纯函数的组件式创建更符合react的思想,于是为了解决状态问题,完善的函数式组件创建模式出现:react-hook 首先需要明确的一点是,hook中没有this指针,所以相关的api都需要改变才. 二、常用HOOK API 结合class式组件进行对比 1.组件申明 class: export default class Text extends React.Component {} Hook const Text = {} export default Text 2.state (1)初始化 class constructor(props) { super(props); this.state = { name: '小明', age:1 }; } Hook const

Docker 是一个供软件开发人员和系统管理员使用容器构建、运行和与分享应用程序的平台。容器是在独立环境中运行的进程，它运行在自己的文件系统上，该文件系统是使用 docker 镜像构建的。镜像中包含运行应用程序所需的一切（编译后的代码、依赖项、库等等）。镜像使用 Dockerfile 文件定义。 术语 dockerization 或 containerization 通常用于定义创建 Docker 容器的过程。 因为容器具备如下优点，所以很受欢迎： 灵活性：即使是最复杂的应用程序也可以容器化。 轻量化：容器共享主机内核，使得它们远比虚拟机高效。 便携性：可以做到本地编译，到处运行。 松耦合：容器自我封装，一个容器被替换或升级不会打断别的容器。 安全性：容器对进程进行了严格的限制和隔离，而无需用户进行任何配置。 在这篇文章中，我将重点讨论如何优化 Docker 镜像以使其轻量化。 让我们从一个示例开始，在该示例中，我们构建了一个 React 应用程序并将其容器化。运行 npx 命令并创建 Dockerfile 之后，我们得到了如图 1 所示的文件结构。 npx create-react-app app --template typescript 图 1：文件结构 如果我们构建一个基础的 Dockerfile（如下所示），我们最终会得到一个 1.16 GB 的镜像： FROM node

2019年第13期 React组件内部的状态是在渲染之间保持不变的封装数据。 useState() 是React钩子，负责管理功能组件内部的状态。 我喜欢 useState() 确实使状态处理变得非常容易。但是我经常遇到类似的问题： 我应该将组件的状态划分为小状态，还是保持复合状态？ 如果状态管理变得复杂，我应该从组件中提取它吗？怎么做？ 如果 useState() 用法是如此简单，那么何时需要 useReducer() ？ 这篇文章介绍了3条简单的规则，可以回答上述问题并帮助您设计组件的状态。 一个关注点 高效状态管理的首要原则是： 让一个状态变量负责一个关注点。 让一个状态变量负责一个关注点使它符合单一责任原则。让我们来看一个复合状态的例子，即一个包含多个状态值的状态。 状态由一个普通的JavaScript对象组成，该对象具有属性 on 和 count 。 第一个属性 state.on 包含一个布尔值，表示开关。 state.count 保存一个表示计数器的数字，例如，用户单击按钮的次数。 然后，假设您要将计数器增加1： 您必须将整个状态保持在附近才能更新计数。这是一个需要调用的大型构造来简单地增加一个计数器：因为一个状态变量负责两个关注点：开关和计数器。 解决方案是将复合状态分成2个原子状态并计数： on 状态变量仅负责存储开关状态。同样的方法， count 变量仅负责计数器

3 个 React 状态管理的规则 疯狂的技术宅 前端先锋 翻译：疯狂的技术宅 作者：Dmitri Pavlutin 来源：dmitripavlutin 正文共：2630 字 预计阅读时间：8 分钟 React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook，负责管理功能组件内部的状态。 我喜欢 useState() ，它确实使状态处理变得非常容易。但是我经常遇到类似的问题： 我应该将组件的状态划分为小状态，还是保持复合状态？ 如果状态管理变得复杂，我应该从组件中提取它吗？该怎么做？ 如果 useState() 的用法是如此简单，那么什么时候需要 useReducer()？ 本文介绍了 3 条简单的规则，可以回答上述问题，并帮助你设计组件的状态。 No.1 一个关注点 有效状态管理的第一个规则是： 使状态变量负责一个问题。 使状态变量负责一个问题使其符合单一责任原则。 让我们来看一个复合状态的示例，即一种包含多个状态值的状态。 1const [state, setState] = useState({ 2 on: true, 3 count: 0 4}); 5 6state.on // => true 7state.count // => 0 状态由一个普通的 JavaScript 对象组成，该对象具有 on 和 count 属性。