react

How to fetch data with React Hooks? 在这篇教程中，我将通过React Hooks中的useState、useEffect来展示如何获取后端数据。您也可以实现一个自定义的Hook在您应用程序中的任何地方进行复用，或者亦可单独作为一个独立的node package发到npm。 如何使用React Hook与后端数据交互 先看一段代码，我们使用了useEffect hook，在它里面通过axios获取后端数据，然后通过setData更新数据。看起来一切很正常。 import React, { useState, useEffect } from 'react' import axios from 'axios' import './App.css' function App ( ) { const [data, setData] = useState({ hits : []}) useEffect( async () => { const result = await axios( "https://hn.algolia.com/api/v1/search?query=redux" ) setData(result.data) }) return ( < ul > {data.hits.map(item => ( < li key = {item

李熠：【译文】【前端架构鉴赏 01】：Angular 架构模式与最佳实践 ​ zhuanlan.zhihu.com 原文 https:// blog.strongbrew.io/A-sc alable-angular2-architecture/ 序 这篇文章或许看上去仅和 Angular2 开发者相关，但我相信它也适用于其它的框架。这只是一份关于编写具有可拓展性和可维护性单页面应用的指南。需要指出的非常重要的是，这并不是达成目标的唯一方式，但是对我个人而言它们在不少的场景中都行之有效 编写可拓展性的单页面应用 许多开发者在编写大型的具有可拓展性和可维护性的单页面应用时都遇到困难。导致在开发早期就留下了技术债，修复 bug 时举步维艰，编写测试和创建复用代码时也踌躇不前 最大的一个挑战是：在一个拧巴的基础之上拓展现有逻辑和编写新的功能 对于那些能允许你用100种不同方式设计一个应用，没有结构和封装可言，一切东西都紧紧的耦合在一起的旧时框架，单页面应用是全新的概念 大部分时候在项目的开发的初始阶段都希望快速迭代。但是经过一些开发者，几轮功能迭代和重构之后，代码变得越来越难以维护。它开始看上去像意大利面了。虽然目前框架成熟了很多，但重要的是你编写的软件架构也要与时俱进 2016 年的单页面应用（甚至更早之前） 为了解释这篇文章谈到的架构，有必要回顾一下2016年的web应用长什么样子

初次看到原文我是有一些震撼的，原来作为开发人员，闲暇时间还算可以做这么多有趣程序的开发。阅读时暂且抛弃你所使用的语言的限制，你是否也能够在“无聊”之时找到一个开发者的乐趣。 阅读以下内容时重点关注项目的创意性，并结合自己的独特经历进行拓展，你一定也能够找到编程的乐趣所在。很多项目都可以通过不同的技术栈来进行尝试。以下为原文内容： 正文 经过1000天的培训，你能够成为一位初学者。经过10000天的练习，你将成为一位大师。 这是出自Mas Oyama的话，对学习新事物做了很好的总结。成为出色的开发人员的秘诀在于肯下功夫。要想成为一名开发人员，你需要花大量的时间在键盘上，并且需要亲手实践。 下面有7个项目可以帮助你提高开发水平。选择自己的技术栈，随心所欲的写代码吧。 项目一：吃豆人 构建吃豆人是一个很好的可以从基础角度来了解游戏开发的途径。可以通过像React或Vue这样的JavaScript框架来实现。 通过该项目你可以学到： 实体的运动 检测按键是否被按下 碰撞检测 你可以通过给幽灵添加转向行来做更多的事情 GitHub示例地址： https://github.com/mbfassnacht/pacman-react 项目二：用户管理 开发一个基于用户管理的CRUD项目，可以教会你很多关于开发的基础知识。这对刚入门的开发人员特别有用。 通过该项目你可以学到： 路由（Routing）

今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个offer。（开心.png），但还是挂了两次，有点遗憾。 面试题总结 面试完之后，赶紧总结了一波，前端这个岗位，这两家大厂的面试思路和面试问题其实都差不多： 1. JS底层： 说一说js的原型与继承。 分析一下优秀的前端框架源码，这么写的优缺点在哪。 this指向问题，this的深拷贝如何实现，这个也是高频率被问到的问题。 js事件流是怎么样体现的。 柯里化函数。 2. 数据层： 写过中间件么？ 了解koa么？ 数据安全是怎么处理的。 axios 与 fetch的实现。 3. HTTP相关： 跨域问题的产生与解决。 http1.1时如何复用tcp连接。 http2.0新的变化。 http报文的请求分成几个部分？ 前端与后台交互的时候会产生几次握手，分别做了什么？ 4. 框架： 说一说vue的源码的响应式与数据驱动，主要是问原理。 Vue与react的区别在哪，这个也是问底层实现。 虚拟dom、diff算法等等，基本没问到过怎么去使用。 像组件传值啥的没提过。还有就是路由的管理 有没有封装过组件库， dev-server是怎么跑起来的。 5. 服务端与工具 主要是Node的问题，有没有拿node做过中间层。 Node的线程处理、事件循环。 这个主要就是 webpack 与 babel 的配置

L1-032 Left-pad (20分) 根据新浪微博上的消息，有一位开发者不满 \(NPM（Node\) \(Package\) \(Manager）\) 的做法，收回了自己的开源代码，其中包括一个叫 \(left-pad\) 的模块，就是这个模块把 \(javascript\) 里面的 \(React/Babel\) 干瘫痪了。这是个什么样的模块？就是在字符串前填充一些东西到一定的长度。例如用 * 去填充字符串 GPLT ，使之长度为 \(10\) ，调用 \(left-pad\) 的结果就应该是 ******GPLT 。 \(Node\) 社区曾经对 \(left-pad\) 紧急发布了一个替代，被严重吐槽。下面就请你来实现一下这个模块。 输入格式： 输入在第一行给出一个正整数 \(N(\leqslant 10^4)\) 和一个字符，分别是填充结果字符串的长度和用于填充的字符，中间以 \(1\) 个空格分开。第二行给出原始的非空字符串，以回车结束。 输出格式： 在一行中输出结果字符串。 输入样例1： 15 _ I love GPLT 输出样例1： ____I love GPLT 输入样例2： 4 * this is a sample for cut 输出样例2： cut 代码： #include<bits/stdc++.h> using namespace std; int

一、业务场景 　　公司的样本检测报告以React页面的形式生成，已调整为A4大小的样式并已实现分页，业务上需要将这个网页生成PDF文件，并上传到服务器，后续会将这个文件发送给客户（这里不考虑）。 二、原来的实现形式 　　浏览器原生方法： window.print()可以将网页保存为PDF文件 ，由于检测报告的网页已经调整为A4的样式，所以保存下来后即是一个标准的PDF文档，然后将保存下来的PDF文件上传到服务器，即可实现需求。 三、存在的问题 　　调用window.print()方法后 需要手动保存PDF到本地，然后手动上传到服务器。 所以本文的目的是点击上传PDF后 自动 将网页生成PDF，然后自动上传到服务器， 省略操作者手动保存、手动上传这两个步骤 。 四、解决方法 　　根据“自动”这个需求，找到了两种实现方式： 纯前端方式 ，前端生成pdf后通过接口上传到服务器 后端（node）方式 ，通过另起一个node服务来生成pdf并上传（ 推荐，以后介绍 ） 四、纯前端方法 　　前端采用了 React 框架。另需要 html2canvas , jspdf 两个库。 　　1、场景1-上传一个尚未打开的React页面，这种情况下需要将需要上传的页面通过iframe以visiblity：hidden的形式打开或者被遮挡在看不到的地方，不可以display：none

Vue.js（一） 准备知识 什么是vue？ ​ | vue.js是前段主流框架之一（还有Angular.js React.js） ​ |一套构造用户界面的框架，只关注视图层，主要和界面打交道，便于与第三方库或既有的项目整合（vue有配套的第三方库） 框架和库的区别 ​ | 框架：完整的解决方案， 只需要使用框架提供的类或函数，即可实现全部功能 ，对项目的入侵性很大，中途不能轻易更换框架否则需要重新架构整个项目 ​ | 库：提供某一个小功能， 库为我们提供了很多封装好的函数，我们就取所需的某部分 ，其他没有用上的我们自己来实现 ，对项目的入侵性小，如果某个库无法完成某些需求，可以切换到其他库 MVVM ​ | MVVM前端的分层开发思想，把每个页面分成了M,V,VM；VM是MVVM核心（VM是M和V之间的调度者） ​ |M： 数据模型 。保存每个页面单独的数据 ​ |VM： 修改数据 & 自动渲染 。对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型 （ 包括 视图的状态和行为 ），而 Model 层的数据模型是只包含状态的。比如页面的这一块展示什么，那一块展示什么 => 视图状态(展示)，而页面加载进来时发生什么，点击这一块发生什么 =>视图行为（交互）。 ​ |V： 带 特殊属性 的 html 模板

React生命周期 「 16版本以前的： 」 生命周期流程图 组件从生成到被挂在到页面上的一系列过程 根据流程图打印的执行顺序图： 流程讲解： 初始化流程 start 开始创建组件 在这个周期中做的事情 检查 检查组件中是否有默认的属性、是否有属性校验 constructor 开始执行constructor构造函数 （👩‍🏫讲解：constructor是生命周期的一部分。react.component就是一个抽象类，官方文档就是这么定义的。） 构造类。在这里可以写一些状态 可以进行ajax数据请求 componentWillMount 执行componentWillMount生命周期函数。此时组件即将挂载到页面上。 （类似vue的beforeMounte） 会有关于componentWillMount更名的信息提示 可以进行ajax请求 「 （但是react官方不建议。因为可能后期会使用react Native时会与之发生冲突。而且官方特强硬的把这个周期函数给移除了。16.3版本以后移除了） 」 也可以setState一下 render 执行render函数渲染页面。 没必要进行ajax请求 「 不能调用setState，否则会死循环。因为setState会触发shouldComponentUpdate，触发后如果返回true，又会走到render里。所以

以上均为个人汇总，如有不对欢迎指出！ 小程序个人看法 可能今天在很多人眼中，小程序已经成为别人印象中的app，功能齐全，且可以完成各种功能以及业务。但是个人从小程序的诞生使用至今，在我眼中他依然是个轻量级应用，虽逐步的壮大，一些功能还是有所限制，但是从功能上的角度却无法与app相媲美。以微信小程序为例，也许今天大小限制8M，页面栈已经是15层，大小可开发约50~70个页面，的确已经很好的支持业务的开发以及功能的扩张。但是在小程序开始之初，页面栈仅为5，包大小限制1M，很多业务的确无法扩展。小程序也因业务的扩展，逐步逐渐支持工程化，如当前支持npm包。但我们从小程序的产品整体设计上，还是不能忘记这个限制，无止境的叠加页面以及业务。 小程序的编译原理 简单的借助大神的思路，描述一下小程序的编译原理。 我们都知道，小程序页面由View（视图层）,App Service(逻辑层)组成。它们在两个线程中运行（我们传统的h5,是单线程运行）。他们之间是由系统的JSBridage（常用于原生与h5交互的工具，可自行百度）进行交互的。 视图层使用 WebView 渲染，iOS 中使用自带 WKWebView，在 Android 使用腾讯的 x5 内核（基于 Blink）运行。 逻辑层使用在 iOS 中使用自带的 JSCore 运行，在 Android 中使用腾讯的 x5 内核（基于 Blink

博客园添加live2d看板娘 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 配置 添加代码到 博客园侧边栏公告 代码 <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model": { jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json", "scale": 1 }, "display": { "position": "right", "width": 75, "height": 150, "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 }, "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 } }); </script> 选择人物 在上面jsonPath切换就可以啦 黑猫：https://unpkg