react框架入门小结

概要

前端框架纷繁复杂且多样的今天,似乎要学习的东西特别多。当然,不得不说,大家的时间都是有限的,而且大多数人是不能够做到大神般的领悟能力,即用极少的时间学到大量的知识。由于本人最先接触的两个框架并实际在工作中应用的是angular 1.x和vue,自然在学习react的时候,我会频繁拿他们来做为对比,毕竟对比学习,是人类常见的一种学习方式。所以在我看来,根据前面的应用框架经验,前端框架的学习主要集中在这几个方面。
* 核心理念
* 语法
* 数据绑定
* 列表渲染
* 条件渲染
* 事件处理
* 组件系统
* 路由系统

react核心理念

react

react在优化web技术性能方面,提出了非常具有革命性意义的方案。简单的说,有三个方面:

  • 虚拟dom技术
  • JSX语法
  • 组件系统

这三个方面很好地解决了web性能、开发效能、代码维护性的问题。当然优化没有绝对完美,这个过程还将持续…

为什么采用JSX语法?

JSX语法,在很多人初次接触时,觉得很不友好,大量的HTML都往js里写,非常让人不适应,有一种原罪感。但是,你如果了解react的组件系统,你就知道,这样做的意义有多大。JSX语法其实是服务于组件编写的。react的组件化野心很大,react提供的组件玩法,如果玩家在拆分组件得当的情况下,后面的玩法就像撘积木一样,组合好就行。而组件的写法,可以用写类的方式来写,妥妥的契合了面向对象的思想,而这种思想,大量的存在于各种软件项目中,是程序员最为熟悉的一种编程思想。

数据绑定

jsx语法其实已经包括了数据如何绑定到你想要绑定的位置上,简单的说jsx语法使用{}花括号的方式,可以将state, props等数据绑定到你想要绑定的位置。{}里面可以是js表达式。如:

import React from 'react';
import ReactDom from 'react-dom';

let data = {
  id: 123,
  text: 'hello world'
};

ReactDom.render(
  <div>{data.text}</div>,
  document.getElementById('root')
);

列表渲染

相比于其他框架,如angular、vue,react没有提供指令系统,自然对于列表渲染的处理方式会有所不同。其实列表渲染的方式,主要还是由先决的jsx语法和组件系统决定的。一个简单的例子可以说明一下其列表渲染的方式(例子来自react官网)。这个方式首先给我留下一个影响,相比于angular和vue来说,不够简洁。虽然并不妨碍什么。

import React from 'react';
import ReactDom from 'react-dom';

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

条件渲染

对于需要条件渲染的部分,我们可以提取出来作为一个组件,这样,在组件里面,我们就可以对其做程序流的处理,如简单的渲染还是不渲染,就可以通过判断,返回还是不返回对应的html片段。当然如果只是渲染文本节点,也可以在jsx语法里面直接使用js表达式来做条件渲染。

事件处理

react事件处理其实还是组件系统中的一部分,其基本语法如下:

import React, {Component} from 'react';

class Test extends Component {
  constructor (props) {
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    // handle code go here
  }
  render() {
    return (
      <button onClick={handleClick}>点击</button>
    );
  }
}

组件系统

借助于jsx语法,react的组件可以很灵活,这也是它的特色之一。组件系统,解决了数据绑定、列表渲染、条件渲染和事件处理等问题。写高可维护性、高可扩展性的组件,是我们追求的一个事,也可以从某种程度上说明一个程序员的经验和能力。一般来说,编写组件需要考虑以下几个问题:

  • 如何做到业务与组件逻辑分离?
  • 组件的细粒度要做到什么程度?
  • 组件的接口是否预留完备?

路由系统

当前越来越多的web应用采用SPA即单页面应用的技术,而单页面应用不得不提到的就是其路由系统。react中,官方也一直在维护其路由解决方案,即react-router。当前,该路由系统已经升级到4.x版本,可谓变化之快。路由的使用,可以参考react-router官方文档,这里就不做介绍了。

(完)

构建一个全栈web应用的骨架

为什么要去做这种尝试?

前端的开发模式已经在这几年发生了翻天覆地的变化了。现在借助于node和行业著名的几个前端框架可以轻松通吃前后端。当然也有不适用的场景,这里就略过。

全栈

于是乎,随着自己技术的成长,必然会去玩儿,一个人搞定一个web应用,也是很酷的事儿,以前后端开发工程师经常干这事儿,而前端人员大多数人技术面较窄,不过这也不是一成不变的,前端人员也开始往其他方向延伸,技术能力也在不断提升,以后的前端工程师,必会出现越来越多懂后端技术的人。

主要技术栈

  • vue
  • webpack
  • element-UI
  • nodeJS
  • mongoDB

项目结构

项目结构

开发思路梳理

虽然是一个人开发,但是也有一个基本的逻辑,就是还是需要大致分为两个部分来做。一个是前端逻辑,一个是后端逻辑。有点废话了,咳咳…

前端部分,这个对于我来说就相当熟悉了,vue-cli工具,基本可以把项目架构起来。而且可以通过node下的express框架可以轻松的做mock数据,开发效率大大增加。不过也感觉是废话,因为在完全的前后端分离的项目,前端肯定会用mock

后端部分,使用express + moongoDB。在后端开发的时候,单独于项目开发,也可以直接在项目中开发。由于是一个人开发,我觉得没必要独立于该项目,新建一个项目。

统筹部署,假设前端部分和后端逻辑,api接口及数据库操作都已实现,如何部署呢?我们知道,前端部分是会在完成开发的时候,打包成一个静态资源的,我们只需要在后端处理时,设置好静态资源所在的目录,同时被请求是返回index.html即可。在项目中,本地查看,可通过node命令,运行后端入口文件,即可启动整个web应用。

(完)

前端知识体系梳理

非常完善的前端知识体系是什么样的?

废话不多说,咱上图! 这是一张相对来说,非常完善的一张关于前端开发知识结构的图,这种图,一般给人的感觉就是,怎么有这么多东西要学啊!!!前端,从入门到放弃 🙁

的确,一个大神级别的前端开发,的确这是必须掌握的知识结构,不仅要求广度,还要求精。作为一个向大神看齐的我,又有超级有能量的好奇心驱使,我已入坑,注定会在coding的世界,越走越远,希望玩得快乐,享受痛苦,不断进步。

我的梳理

首先,我的梳理很个性化,完全是面向自己的,不是面向对象哟,所以,不求严禁,不求完善,只求过得去自己就行。

前端,从代码组成方面来看,主要涉及三种语言HTML,CSS和JavaScript。他们各自的功能为,HTML负责结构化,CSS是表现,JS是行为。随着互联网的发展,为了适应这种发展,前端作为web应用的一个重要组成部分,开始变得越来越重要,因为前端是最贴近用户的,它的性能和表现,直接影响用户的感受。所以,前端的终极目的就是用户的最佳的体验,服务好用户。

  • JavaScript是解释类语言,解析就有效率问题,于是经过竞争,googleV8引擎胜出;
  • JS很灵活,但是对于大型应用,灵活不是一种好事,走在前面的高级JSer们,遇水搭桥,逢山开路,出现了借鉴静态强类型的语言,如C#Java而获得了利器TypeScriptCoffeeScript
  • 随着日益复杂的网页出现,功能要求开始增多,JS操作dom的繁琐,导致开发效率低下,JQuery出现了;
  • web2.0到来,互联网越来越庞大,信息、服务越要越多,技术知道自己需要提前做好准备,于是在这之前,HTML5, css3, ES6到来了;
  • JQuery很锋利,可是随着交互需求升级,JQuery操作dom越来越频繁,导致网页或应用的性能下降,开发效率也开始下降,到了这个口子,优化的需求迫切,于是为了解决这个问题,前端框架实践开始,诞生了很多框架,最后到今天,经过竞争,脱颖而出了Angular, React, Vue三大框架;
  • 开发效率问题,网页或应用性能问题,代码扩展性和维护性问题,问题层出不穷,前辈们理清问题,打造工具,于是grunt, gulp, webpack等工具就问世了;
  • 某位工程师想要开发一款高性能web服务器,经过考虑,比对优缺点,由于JS的特性,V8引擎的性能,node.js诞生;node.js它不仅在web服务器端表现良好,更对前端的开发,起到了很好地辅助作用;
  • 未来的故事,还将继续…

(完)

微信小程序编写经验分享

  1. 微信开发者工具:小程序的开发,需要使用微信开发者工具,小程序需要编译才能执行。注意不要文件保存时自动编译。编译是一个比较耗时的过程。这样非常影响开发效率和体验,还是手动编译好;

  2. 数据绑定:小程序是没有数据双向绑定的概念,是单向绑定。要实现双向绑定,可以利用事件;

  3. 阻止事件冒泡。小程序中有冒泡事件和非冒泡事件的概念。bind开头的事件是冒泡事件,catch开头的事件是非冒泡事件;

  4. 事件绑定:a.事件绑定如何往事件处理函数中传值?小程序在事件处理中会传入一个event对象,可通过event对象找到target(或currentTarget)下面的dataset。dataset对应标签上属性data-*里指向的值;b.event对象下的target和currentTarget的区别。target简单的说是触发事件的源组件;currentTarge是指事件绑定的当前组件。

  5. 跳转:navigateTo跳转是跳转到一个新页面,页面栈的情况是push一个页面入栈,但对上一个页面不做处理。redirectTo跳转到一个新页面,页面栈的情况是push一个页面入栈,但会干掉上一个页面。navigateBack跳转是从当前这个页面在页面栈的位置中回退到上一个页面。reLaunch跳转是把所有页面栈清掉,在push一个新页面入栈。

  6. 组件化(小程序中叫模板):关键字是template标签和引入标签import。

  7. 可以使用parseInt等api吗? 可以使用setTimeout等api吗? 都可以

  8. 如何获取url中的参数?onLoad函数中自带有个options参数,这个options就是处理好的url参数对象。

  9. es6支持度,暂时不支持for of的object.entries方法。

  10. 对于富文本的解析,可以使用wxParse这个开源工具。其原理是将富文本转化为一个json数据格式,再通过模板template进行渲染。

  11. 改变checkbox的大小,需要使用transform来做缩放。