0%

组件系统是Vue中非常重要的一个特性,通过组件的封装,我们可以实现代码的复用以及功能的解耦。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

阅读全文 »

在上一篇博客中,我们回顾了如何实现对象的深度复制,学习过Java、C++等面向对象的语言的同学应该都知道,面向对象的语言最大的特征就是类以及类的封装性、继承性、多态性。JavaScript是一门基于对象的语言,可以说在JavaScript中一切皆对象,它是基于类的动态语言,本身不提供class的实现,虽然在ES6中引入了class,但是它仍然是基于原型的,JavaScript也可以模拟实现类似Java的继承特性。之前也回顾过JavaScript中的原型与原型链,我们知道通过原型链可以实现对象的继承。每个实例对象都有一个属性proto指向它的原型,它的原型作为对象也有一个proto原型对象,一层一层向上,直到一个对象的原型对象为null,null没有原型,并且是原型链上的最后一个环节。

阅读全文 »

我们在面试或者笔试的过程中,对象的深复制问题经常会被问到,说难不难,说简单也不简单,要弄清楚这个问题,我们首先需要明确的是在JavaScript中的数据类型有哪些,通常分为两大类,一类是基本数据类型,包括Boolean、Null、Number、undefined、String、Symbol,还有一类是复杂数据类型,即Object类型。在这篇博客中,我们主要来回顾一下对象的深度复制,也就是如何实现对复杂数据类型的深度复制。在回顾之前,我们先来看看基本数据类型的复制。

阅读全文 »

说到高阶组件,我们是否立刻就能够想起高阶函数,那什么是高阶函数呢?高阶函数就是接受一个函数作为参数或者以一个函数作为返回值的函数,高阶组件的定义跟高阶函数很类似,高阶组件即是接受一个组件作为参数,并返回一个新的组件的组件。这篇博客我想探索一下Vue高阶组件,但是由于Vue高阶组件并不常用,高阶组件在React生态里使用比较广泛,所以在这里我先回顾一下React高阶组件。

阅读全文 »

说到基础知识,其实很重要,在面试的过程中也基本都会被问到。俗话说,万丈高楼平地起。没有足够扎实的基础,是不可能筑起高楼大厦的。所以为了巩固自己的基础知识,我决定对JavaScript的各个知识点进行深入理解和总结,今日要回顾和探索的是原型与原型链。

阅读全文 »

今天写 React 项目的时候,遇到一个比较奇怪的问题,这个问题应该也是大家在开发中经常会遇到的,问题我简单描述一下,我写了一个列表组件,然后这个列表组件引入了另一个PositionedSnackbar 组件, 这个PositionedSnackbar 组件是用于请求数据成功或者失败时给与用户提示的,起初这个PositionedSnackbar 组件是这样写的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from 'react';
import Snackbar from '@material-ui/core/Snackbar';

class PositionedSnackbar extends React.Component {
constructor(props) {
super(props);
this.state= {
open:props.open||false,
message:props.message||'message',
vertical:props.vertical||null, // 水平方向:'left', 'center' or 'right'
horizontal:props.horizontal||null, // 垂直方向:'top' or 'bottom'
}
}

render() {
const { vertical, horizontal, open, message } =this.state;
return (
<div>
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
onClose={this.handleClose}
ContentProps={{
'aria-describedby':'message-id',
}}
message={<spanid="message-id">{message}</span>}
/>
</div>
);
}
}

export default PositionedSnackbar;
阅读全文 »

create-react-app是react官方提供的快速搭建react项目的脚手架工具,它的安装和使用都非常方便,在命令行工具执行以下命令即可完成create-react-app的安装:

1
npm install -g create-react-app

然后执行以下命令即可创建一个react项目:

1
create-react-app helloworld
阅读全文 »

这个项目是我之前利用下班的时间弄的Vue版cNode中文社区,当然,因为我以前的技术栈是React,所以也用React实现了同样的功能,后面学习了angular后,抑制不住自己的好奇心,所以也用angular实现了一遍,后期我会把React和angular版本的分享出来。从三大框架去实现cNode中文社区的过程中,我发现难易程度其实差不多,看完vue/react/angular的官方文档后,就可以动手写代码了,涉及到vuex/vue-router、redux/react-router等的使用的时候,是可以一边查文档一边写代码的,用不同的框架去实现,也能让自己对三大框架各自的设计理念有更直观的感受,由于实现的cNode中文社区功能也还不是很丰富,涉及到的主要知识点也就以下几个,但是对于初学者来说,掌握这些完全够用了:

阅读全文 »