自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

nan's notes

叁生万物

  • 博客(28)
  • 资源 (1)
  • 收藏
  • 关注

原创 auth

常见的认证方案1. HTTP Auth Authentication这是HTTP提供的一个用于权限控制和认证的通用框架,其中最常用的HTTP认证方案就是HTTP Basic Authentication[ 鉴权流程 ]客户端发送一需要权限验证的请求,服务端返回未授权,需要授权。客户端发送带有认证信息的请求,服务端验证并返回结果。[ 加解密过程 ]// 加密过程let email = 'demo@test.com'let password = '1234455'let auth = `${

2020-11-07 17:09:35 378

原创 06 Fragments

FragmentsFragments可以理解成:多个片段,多个部分(React元素返回的Fragments)在此之前,我们开发的组件 return 的都是单个React元素,想要返回多个元素就必须使用父元素包裹这些子元素,然后返回这个父元素。然而,这并不总是能满足要求的,例如在下述场景中,嵌套div将导致表格不能正常渲染class Table extends React.Component { render() { return ( <table>

2020-11-05 15:05:27 33

原创 04 Error Boundaries

错误边界为什么需要?在React16之前,组件内的JavaScript错误会导致React的内部状态被破坏,并且在下一次渲染时产生无法追踪的错误。这些错误基本上是由其他的非React组件代码错误引起的。但React并没有提供一种优雅的错误处理,也无法从错误中恢复。部分UI的JS错误不应该导致整个应用的崩溃,为了解决这个问题,React引入了一个新的概念——错误边界。错误边界是一种React组件,这种组件可以捕获并打印发生在其子组件数任何位置的JS错误,然后,渲染出备用UI,而非崩溃了的子组件。错误边

2020-11-04 15:21:52 34

原创 03 Context

简要介绍在典型的React应用中,数据是通过props属性自上而下(由父及子)进行传递的但这种做法对于类似地区偏好,UI主题等全局共享的属性而言是极其繁琐的,这类属性在应用中会被许多组件使用Context提供了一种在组件之间共享此类值的方式,而无需逐层传递props何时使用Context的设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主体或者首选语言// Class组件使用Contextconst ThemeContext = React.createCont

2020-11-04 14:03:48 11

原创 02 Code-Splitting

打包大多数React应用都会使用Webpack/Rollup/Browserify这类构建工具来打包文件打包指的是将引入文件合并到一个单独文件的过程,最终形成一个bundle,接着在页面内引入该bundle,就可以一次性载入!如果你在使用 Create React App, Next.js, Gatsby等类似工具,你会拥有一个可以直接使用的Webpack配置来进行打包工作。如果没有使用上述工具,就需要自己进行配置代码分隔尽管打包是个很棒的技术,但随着应用的增长和第三方库的增加,难免会出现页面

2020-11-04 14:02:44 36

原创 12 Thinking in React

Steps to think in React1. 根据UI划分组件层级AppSearchBarProductTableCategoryRowProductRow2. 用React创建一个静态版本(渲染UI)建议:渲染UI和添加交互过程分开通过props传入所需数据, 不推荐使用state构建静态版本state代表了随时间变化而变化的数据, 应当仅在实现交互时使用大型项目自下而上开发, 小型项目自上而下开发(先父后子)3. 确定UI state的最小完整表示(

2020-11-02 14:42:24 8

原创 11 Component Composition

组件组合React有着十分强大的组合模式, 用以实现组件间代码的重用组件间关系决定着组件之前的组合关系包含关系对于例如侧边栏(Sidebar), 对话框(Dialog)这种通用容器来说,我们无法提前知晓其子组件的具体内容1. 使用特殊的prop: children prop来把子组件传递到渲染结果中去。function Sidebar(props) { return ( <div style={{color: props.color}}> {props.chi

2020-10-31 14:39:04 20

原创 10 Lifting State up

状态提升lifting child’s local state up to its parent’s local state当组件A与组件B共同使用相同数据, 数据存储在A与B的state中时可以将共用数据放到其最近的父元素C的state中去, 让C通过props传递给A与B这样, C的state是A与B的唯一数据源, 就保证了数据的一致性示例程序(温度转换)见: myapp>Calculator...

2020-10-30 15:40:30 15 1

原创 09 Forms

受控组件什么是受控组件与非受控组件?Controlled components & Uncontrolled components非受控组件:HTML原生表单元素, 例如input, textarea, select等受控组件React组件内部state成为表单组件的唯一数据源组件控制着/处理用户操作(即管理事件处理)被React以这种方式控制取值的表单输入元素称为"受控组件";与Vue中data作为表单元素唯一数据源、methods处理用户事件是类似的选择受控组件与否的建议:

2020-10-30 14:29:29 73 1

原创 08 Lists and Keys

Array.map()函数const numbers = [1, 2, 3, 4, 5]const doubled = numbers.map(number => number *2)同样地,通过数组的map函数将数组转换成React元素列表1. 组件中渲染列表function NumberList(props) { const numbers = props.numbers const items = numbers.map(number => { <li

2020-10-30 14:28:54 35

原创 07 Conditional Rendering

条件渲染:根据条件渲染不同组件/组件不同元素1. iffunction Usergreeting(props) { return <h1>Welcome back!</h1>}function Guestgreeting(props) { return <h1>Please sign in.</h1>}function Greeting(props) { const isLoggedIn = props.isLoggedIn if

2020-10-30 14:28:22 11

原创 06 Handling Events

1. 事件处理的不同点React事件的命名采用小驼峰camelCase方式,而非纯小写使用JSX语法时传入函数作为时间处理函数,而非字符串<!-- HTML --><button onclick="activateLasers()"> Activate Lasers</button><!-- REACT --><button onClick={activateLasers}> Activate Lasers</bu

2020-10-30 14:27:18 19

原创 05 Component State

1. 使用State更新渲染DOM03 React element 更新渲染一节中提到通过设置定时器重复调用ReactDOM.redner()渲染是不推荐的做法本节将通过State编写有状态的组件完成之前效果class Clock extends React.Component { constructor(props) { super(props) this.state = {date: new Date()} } componentDidMount() {

2020-10-30 09:37:52 8

原创 04 Component & Props

1. 组件定义组件将UI拆分成多个独立可复用的代码片段概念上类似于JS函数,接收任意入参(props),返回React元素2. 组件类型函数组件function Welcome(props) { return <h1> Hello, {props.name} </h1>;}class组件class Welcome extends React.Component { render() { return <h1>Hello, {this.

2020-10-30 09:37:27 6

原创 03 React Element

1. React元素与DOM元素React元素是构成React应用的最小砖块React元素是开销极小的普通对象React组件是由React元素构成的React DOM负责更新DOM来与React元素保持一致2. React元素渲染成DOM元素<div id="root"></div>称上述div节点为根DOM节点,因为该节点内所有内容都将由React DOM管理要将React元素/组件渲染到根DOM节点中,只需要将其传入ReactDOM.render()co

2020-10-30 09:36:33 5

原创 02 JSX Intro

什么是JSX?JSX is short for Javascript Extension, similar to JSP in the follwing ways…JSP页面允许你在HTML页面通过<% %>写Java代码JSX页面允许你在HTML标签内通过{ }写JS代码为什么要使用JSX?怎样使用JSX?在JSX中嵌入变量const name = 'Josh Perez';const element = <h1>Hello, {name}</h1>

2020-10-30 09:36:05 26

原创 01 Concept

React是什么React是一个声明式的用于构建用UI的JavaScript库React特点声明式:命令式?组件化一次学习 随处编写怎样学习入门边学边做:实践教程概念学习:教程文档创建demo的方式CDN方式引入unpkg的包使用集成的工具链推荐的工具链学习/创建一个新的SPA时:使用 Create React App在用Node.js构建SSR网站时:试试Next.js在构建面向内容的静态网站时:试试Gatsby打造组件库/将React集成到现有代码仓库:尝试

2020-10-30 09:35:23 29

原创 common ways to iterate through array

遍历数组的几种方法forconst arr = [1, 2, 3, 4, 5]for(let i = 0; i < arr.length; i++) { console.log(i, arr[i])}for-in// 数组for(let index in arr) { console.log(i, arr[i])}// emumerable objconst obj = { a:1, b:2, c:3, d: 'hello'}for(let prop in obj)

2020-10-29 20:46:45 11

原创 Ubuntu无法进入图形化界面 Oh no! system can‘t recover please logout and try later

场景:Ubuntu更换桌面背景图片,添加使用百度下载某一图片时(文件大小>1M)系统崩溃 无法进入桌面系统提示:oh no! ...system cant recover...please logout and try latter(差不多这个意思 没截图)原因猜测:可能是因为图片太大了系统提示 已经把这个问题发送给Ubuntu了解决办法:#1. logout后,Ctl+Alt+F2(/F3/F4/F5/F6)进入CLI界面,登录后对图形化界面软件进行修复(Ctl+

2020-10-09 17:16:04 52

原创 第6章 HTTP首部-1: 概述

1. 前情提要:previously onHTTP报文信息

2020-09-27 15:58:39 13

原创 第5章 HTTP Web服务器

1. 虚拟主机实现多域名HTTP/1.1规范允许一台HTTP服务器搭建多个Web站点,因此,即使物理层面上只有一台服务器,只要使用虚拟主机的功能,则可以假想已具有多台服务器问:单主机多域名的话,客户端访问不同域名时,DNS返回的都是该物理服务器主机IP,此时服务器怎样判断访问哪个域名/资源?答:没错,由于虚拟主机可以寄存多个不同主机名和域名的Web网站,因此在发送HTTP请求时,必须要在Host首部完整地指定主机名或者域名的URI。2. 通信数据转发程序在进行HTTP通信时,除了客户端和

2020-09-24 15:22:29 12

原创 第4章 HTTP状态码

1234

2020-09-22 15:35:15 20

原创 第3章 HTTP报文信息

HTTP报文结构HTTP内容编码分块传输编码多部分对象集合范围请求内容协商

2020-09-22 14:30:23 15

原创 第2章 HTTP协议基础

请求/相应 报文组成请求报文 由 请求方法(Methods)、请求URI(request-URI)、协议版本、可选的请求首部字段(Headers) 和 内容实体 组成响应报文 由 协议版本、状态码(status code)、原因短语(reason-phrase)、可选的首部字段(Header field) 和 资源实体的主体(entity body) 组成HTTP是无状态的协议(Stateless)HTTP协议自身并不对请求和响应之间的通信状态进行保存,也就是说HTTP协议对于发送过的请求或

2020-09-21 21:04:00 14

原创 第1章 了解Web及网络基础

http诞生CERN(欧洲核子研究组织)的Tim Berners Lee提出了让远隔两地的研究者们共享知识的设想最初设想的基本理念:借助多文档之前相互关联形成的超文本(HyperText),连接成可相互参阅的万维网(WWW)构建WWW万维网的三项技术: HTML + HTTP + URLWeb成长1993年1月,现代浏览器祖先Mosaic问世 研发自NCSA(National Center for Supercomputer Applications)1994年12月,网景通信公司发

2020-09-21 15:16:25 39

原创 配置.gitignore文件 忽略node_modules文件夹更改

1. 问题描述在使用npm install时给项目添加新依赖时Git status/ VS Code显示几十条甚至上百条更改就是因为没有设置.gitignore文件来忽略node_modules文件夹的更改2. 解决办法1. 在项目根目录添加.gitignore文件 Git bash: touch .gitignore 或者直接在根目录下手动新建该文件2. 在.gitignore文件中添加如下行 node_modules/3. 常用配置.

2020-09-18 16:50:22 154

原创 Git warning: LF will be replaced by CRLF in XXX

1. 问题描述waring: xxx2. 概念简介3. 出现原因4. 解决方法5. 问题总结

2020-08-30 22:30:42 28

原创 Centos配置SVN服务器 (Setup SVN Server in Aliyun Centos)

1. 操作步骤yum -y install subversionmkdir /svnrepossvnadmin create /svnrepos/testcd /svnrepos/test/confvi passwdvi authzvi svnserve.conffirewall-cmd --permanent --add-port=3690/tcpfirewall-cmd --reloadsvnserve -d -r /svnrepossvn://yourip

2020-08-29 16:07:02 805

IBM-PC汇编语言程序设计(第二版)-学习札记.pdf

个人的汇编学习札记,共26页,用时1414分钟, 汇编基础知识学习,只能用于学习基础知识,应对考试, 所有内容整理均来自《IBM-PC汇编语言程序设计(第二版)》,只整理到该书第六章 希望能帮到大家快速学完本书,通过考试。

2019-06-21

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除