十分钟,带你了解React 16.8的useState和useEffect

HooksReact 16.8新增的特性,并且他是向后兼容的,facebook也坦言没有计划会在React中移除class组件。你完全可以不使用hooks,一直使用class组件。

概念

React hooks允许你在非class组件中使用stateReact其他的特性:propscontextrefs 以及生命周期
Hook本质上是一些函数,可以在函数组件中“钩入”其他React的特性,使得你不用使用class也可以使用React。值得注意的是,hooks是不能在class组件中使用的。

阅读更多

走进React——jsx

用React开发时,最具标识性的,估计就是jsx语法了。它并不是HTML,也不是字符串,官方称之为——一个javascript的语法拓展。在用react开发中,个人感觉jsx能极大地提升开发者的开发体验。在传统的开发中,都提倡将视图与逻辑文件分离,而React则是通过一个称之为“组件”的东东来存放视图和逻辑,将业务拆分为一个个的小模块,更多组件的概念在后续的文章中也会放出来跟大家探讨。

开始前先说几句

本次所有示例的代码的html结构都如下

1
<div id="root"></div>

ok,交代完毕,开始步入正题。

阅读更多

走进React——React的样子

React是一个可以快速构建响应式界面的UI库,基于组件化开发,可以让你的数据与界面很大程度的解耦,让你能只专注于数据,而不用去操心界面的展示。同时他也可以通过不同的渲染器来渲染你的react范式的代码,譬如react-native,他可以让用”react范式”写出原生应用,运行在各种移动设备中。

react的样子

其实react代码的样子很纯粹,纯粹到让你惊呼,这不就是html+js吗?是的,没有隔壁vue家的模板和众多的api,熟悉一下jsx,知道组件的生命周期钩子,你就可以用上手写出一下小应用了
一般来说,react组件经常使用jsx来编写,他的样子常常像下面这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// jsx
// 思考题,这里好像没用到“React”,那么可以不用引这个库了吗?只用“Component”行不行?
import React, {Component} from 'react'
import ReactDOM from 'react-dom'

default class Test extends Component{
render(){
return (
<div>{this.props.test}</div>
)
}
}

ReactDOM.render(
<Test test="一串字符" />,
document.querySelector('#root')
);
阅读更多

设计模式——单例模式

开场白

单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点

单例是一种常用的模式,有一些对象我们往往只需要一个,比如线程池全局缓存浏览器中的window对象等。

用js实现单例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 实现并不复杂,核心是利用一个变量来标志当前是否已经为某个类创建了单例
var Singleton = function(name){
this.name = name;
this.instance = null; // 标记和存放单例实例的容器
}
Singleton.prototype.getName = function(){
return this.name;
}
Singleton.getInstance = function(name){
if(!this.instance){ // 如果没有实例就创建并返回它
return this.instance = new Singleton(name);
}
// 如果已经有实例就返回它
return instance;
}
// 创建单例
var obj1 = Singleton.getInstance('william');
var obj2 = Singleton.getInstance('skye');

console.log(obj1===obj2); // true;
阅读更多

设计模式——策略模式

开场白

策略模式的定义就是:定义一系列算法,把他们一个个封装起来,并且使他们可以互相替换。

PS:相互替换这句话很大程度上是相对于静态类型语言而言的,因为静态类型语言中没有类型检查机制,所以各个策略类需要实现同样的接口。当它们的真正类型被隐藏在接口后面时,它们才能被相互替换。
而在 JavaScript 这种“类型模糊”的语言中没有这种困扰,任何对象都可以被替换使用。因此, JavaScript中的“可以相互替换使用”表现为它们具有相同的目标和意图

策略模式在开发中有着广发的应用,下面举一个计算年终奖的例子来一步一步的阐述策略模式。

例如,年终奖发放中,绩效为S的人年终有 4 倍工资,绩效为 A 的人年终奖有 3 倍工资,而绩效为 B 的人年终奖是 2 倍工资。假设财务部要求我们提供一段代码,来方便他们计算员工的年终奖。

阅读更多

ES6语法的新特性

let和const

letconst将变量的的作用域限制在块中,可以避免因在执行JavaScript代码前,变量被提升所带来的问题。

let在同一作用域中只能声明一次,但可以重复赋值
const在同一作用域中只能声明一次,并且初始化的时候必须赋值,随后无法重新赋值

  • 当你打算为变量重新赋值的时候,则使用let
  • 当你不打算为变量重新复制的时候,则使用const
阅读更多

html5的新特性

简述API
API(Application Programming Interface)
是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

Video/Audio-API

video对象的方法

方法名 效果
load() 加载其他视频(如果有的话)
play() 视频开始播放
pause() 视频暂停
addTextTrack() 向音频/视频添加新的文本轨道
canPlayType() 检测浏览器是否能播放指定的音频/视频资源
阅读更多

漫话图片懒加载

开场白

​ 懒加载(lazyload),即延迟加载,是一种对网页图片进行延迟加载处理的技术。说这货之前,先来碎嘴几句传统的网页加载方式。众所周知,浏览网页,经常会看到很多图片。正常情况下,浏览器会从上到下的加载<img src='xxx.jpg'> 的图片标签,将他嵌进它原本应该在的地方。这样会导致什么问题呢?

​ 当用户只是想打开个网页登录一下打个酱油就下了的时候呢,浏览器还在默默的加载着从服务器那端下载回来的页面,即使绝大部分图片是在用户不往下滚动页面就看不到的地方。这样势必就会造成资源的浪费,首先浏览器默默地加载完这些图片,用户看都不看做白工不说,服务器端也是亚历山大啊,尼玛每次一来请求都要发送网页的全部图片过去,用户不心疼流量,我心疼流量啊。特别是淘宝、京东这些图片数量非常巨大的电商,光首页就第一屏就得几十张图片了,如果还用传统的这种方式加载图片的话,那么用户体验是相当差的。所以这里就要说一下懒加载的工作原理了。

阅读更多