如果是兔子-CSDN博客

原创 React Hooks

一、基础的State Hook和Effect Hook第一段代码function Myfunc() { const [count, setCount] = useState(0);//State Hook useEffect(() => {//Effect Hook const interval = setInterval(() => { setCount((c) => c + 1); }, 1000); return () => c

2020-10-28 14:01:07 246 1

原创 CSS3：first-child和first-of-type的区别

如下代码块是一个html结构，接下来将会使用first-child和first-of-type分别进行css操作，从而找出他们的区别。<div id="example"> <p>1</p> <div>2</div> <div>3</div></div>1、first-child#example>div:first-child { background-color:

2020-08-23 22:16:56 360

原创网络请求协议

一、IP协议数据包在传输之前，会被附加上双方主机的IP地址信息。是通过向数据包上附加IP头的方式实现的（IP头中包含双方主机的IP信息和一些其他信息）。二、UDP协议数据包在传输之前，会被附加上双方的端口信息。是通过向数据包上附加UDP头的方式实现的（UDP头中包含双方的端口信息和一些其他信息）。在使用 UDP 发送数据时，有各种因素会导致数据包出错，虽然 UDP 可以校验数据是否正确，但是对于错误的数据包，UDP 并不提供重发机制，只是丢弃当前的包，而且 UDP 在发送之后也无法知道是否能达到目的

2020-08-10 11:20:31 1745

原创从promise到async/await

一、callback回调函数如果一个函数作为另一个函数的参数，则这个函数就是回调函数同步回调在函数结束之前执行回调函数异步回调在函数结束之后执行回调函数绝大多数回调函数采用异步的方式二、Promise① Promise的executor 函数executor控制promise的状态padding、reject、resolve（fulfilled）executor返回值是resolve，则调用than中的回调函数，resolve中的参数会传给遇到的第一个than中的回调

2020-08-09 17:14:37 288

原创在栈中进进出出JavaScript

本文只起到一个提纲挈领的作用一、编译和执行JavaScript代码是先编译后执行的① 编译编译生成执行上下文和可执行代码。执行上下文变量环境var声明的变量，值为undefined（变量提升）函数（把函数整体代码拿过来）词法环境（维护了一个小型的栈结构）let和const声明的变量块级作用域中的let与constouter指向全局上下文this可执行代码函数调用赋值操作……本文只起到一个提纲挈领的作用一、编译和执行JavaScrip

2020-08-07 18:56:19 3085

原创什么是重排、重绘和合成

一、重排如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性，例如改变元素的宽度、高度等，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑，重排需要更新完整的渲染流水线，所以开销也是最大的。如果你修改了几何位置属性，那么会触发：渲染主线程：重构布局树重构图层树重构绘制列表合成线程+GPU进程：生成图块再次光栅化浏览器主进程：重新生成页面重排需要更新完整的渲染流水线，所以开销也是最大的。一、重绘如果修改了元素

2020-08-07 16:12:31 1275

原创从输入URL到页面展示，这中间发生了什么？（二）

一、构建dom树浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。在控制台里面输入“document”后回车，这样你就能看到一个完整的 DOM 树结构也可以通过JavaScript查询或修改dom树二、样式计算1、把 CSS 转换为浏览器能够理解的结构和 HTML 文件一样，浏览器也是无法直接理解这些纯文本的 CSS 样式，所以当渲染引擎接收到 CSS 文本时，会执行一个转换操作，将 CSS 文本转换为浏览器可以理解的结构——styleSheet

2020-08-06 21:57:08 358

原创从输入URL到页面展示，这中间发生了什么？（一）

从输入URL到页面展示，这中间发生了什么？（一）一、浏览器进程发出URL请求给网络进程当用户在地址栏中输入一个查询关键字时，地址栏会判断输入的关键字是搜索内容，还是请求的 URL。如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。如果判断输入内容符合 URL 规则，比如输入的是 time.geekbang.org，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL，如 https://time.geekbang.org。当用户输入关键字并键入回车之

2020-08-06 21:55:55 359

原创 React Router（二）：URL传参和嵌套路由

一、如何通过URL传递参数URL传递参数是传给匹配到的组件，组件可以根据参数渲染不同的内容很简单，所以直接上代码了，结合注释看import React from "react";import { BrowserRouter as Router, Route, Link} from "react-router-dom";//这是一个路由的组件//对于React Router render的组件，会传一个match的props给这个组件const Topic = ({ match

2020-07-31 17:01:34 489

原创 React Router（一）：React Router基本语法

一、路由实现的基本架构① 路由的定义我们会通过一个配置文件或者是一个react标记来定义一些路由//一个路由对应一个组件/topic/:id -> Topic/topics -> List/about -> About② 组件容器通常是页面布局的一部分，就是由路由来控制具体展示哪一个组件。当url发生变化的时候其实只是组件容器发生变化，其他不发生变化。③ Router一个路由的定义通过一个Router的解析会返回不同的组件，放到组件容器中。二、React R

2020-07-31 16:38:01 312 1

原创 Redux（四）：如何操作不可变数据（如何操作state）

一、操作不可变数据的四种方法这是state，我们来操作他const state = { filter: 'completed', todos: [ 'Learn React' ] }下面是操作它的方法① {…}const newState = { ...state, todos: [ ...state.todos, 'Learn Redux' ]}② Object.assignconst newState = Object.assign( {}, state, { todos:[ ...s

2020-07-31 15:53:49 409

原创 Redux（三）：中间件和异步action

一、Redux的Middlewares① 当一个action被dispatch之前，会经过Middleware。② 这个Middleware的作用是去截获某种特殊的类型的action，比方说Ajax请求这种类型的action，会有一个redux-thunk这样一个中间件去处理。当Middleware接收到这个action的时候，不是直接把他丢给dispatch给reducer，而是去访问一个API，当API的返回结果为true，则dispatch一个成功的action，如果为false，就dispatc

2020-07-31 15:24:31 179

原创 Redux（二）：在React中使用Redux

一、使用模型React使用Redux需要用到connect这个概念从react-redux这个package引入以后，就可以使用了但其实connect没有什么好讲的，套用下面这个模型就可以了① Redux连接React的大致模型如下：import { Provider, connect } from 'react-redux'class A extends Component { //这个是想要使用redux的组件}/****需要弄一个store出来**/// 按照组件的

2020-07-30 20:25:34 110

原创 Redux（一）：纯Redux

一、什么是Store① 产生storeconst store = createStore(reducer)② store的方法：getState()：得到状态dispatch(action)：dispatchaction给reducersubscribe(listener)：当store有任何变化的时候都会调用他的回调函数二、什么是actionaction就是一个普普通通的对象，描述了更新state的操作，就像setState一样。但是它只是一个对象，只有描述，没有真正的去更新Store（

2020-07-30 18:03:29 93

原创 React基础篇（五）：受控组件和非受控组件

一、受控组件和非受控组件的介绍HTML表单在React中使用起来有所不同，官方文档是这么说的：在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。要在React里面实现HTML表单，必须做一些特殊处理。官方文档里面有两种方式：受控组件和非受控组件但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交，同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。有时使用受控组

2020-07-30 16:59:00 283

原创 React基础篇（四）：Context API

一、什么是Context API① Context API解决的是一个组件间通信的问题，有一些全局的状态我们需要多个组件都去使用，但是组件如果都是一层层传递会非常麻烦，所以我们可以使用Context API来避免这种层层传递，实现跨层使用state。② 在Context API中，节点有两种类型：provider和consumer。provider就是提供状态的那个组件，consumer是使用状态的那个组件。③ 我们要实现Context API通信，必须把consumer包含在provider层级之下

2020-07-30 11:11:29 707

原创 React基础篇（三）：函数作为子组件

一、什么是函数作为子组件① 函数作为子组件也是一种组件复用的方式，它利用了children这个属性。② children 是 React 组件的一个特殊内置属性，xxx 里的 xxx 部分会作为 children 传递给 Comp 组件，如果 xxx 是函数，那么 Comp 里主动调用它去得到结果。③ 如果xxx是函数，只要在组件内部加上一个children(value)，就会调用这个xxx函数二、具体实例1、下面是xxx 的一个例子，下面两个都是用的AdvancedTabSelector组件，组

2020-07-30 09:33:57 852

原创 React基础篇（二）：React高阶组件（HOC）

一、高阶组件（HOC）1、什么是高阶组件 ① 高阶组件接受一个组件作为参数，返回一个新的组件（就像函数一样，传进来一个值，返回一个新值）。 ② 高阶组件是对某个组件进行的一个封装，形成的一个新组件。当一个组件进到一个高阶组件里面，出去以后他的功能性就变强了（会多出一个属性）。为什么会变强呢？高阶组件会得到这个被封装的组件里面的状态，这个状态会传给跑进来的组件，这个作为参数的组件有了新的状态，作为返回值返回，然后就变强了。 ③ 由此，返回的新组件具有两个数据来源，一个来自于父组件，另一个

2020-07-29 21:33:31 174

原创 React基础篇（一）：React生命周期及其使用场景

1、首先大致一下生命周期三个类型和三个阶段三个类型：创建时、更新时、卸载时三个阶段：“Render”阶段、“Pre-commit”阶段、“Cimmit”阶段2、生命周期方法的调用过程①创建时：一、“Render”阶段先执行构造函数constructor：一个组件首先要创建出来getDerivedStateFromProps：用于从一些外部的属性初始化一些状态，从这个方法返回的状态都可merge到当前的状态上render：描述你的UI的dom结构的地方，这个也是唯一一个必须定义的生命周期方法

2020-07-29 20:08:51 682

zhehoon123的博客