先说明下为什么说好每天一更,周五周六周日都没有更新。因为在周五的时候,上司主动找我谈了转正后的工资4-4.5K。
本来想好是6K的,后来打听了一圈公司的小伙伴,都是5-5.5,我就把自己定到了5K。
万万没想到,只有4-4.5, 估计是4.5然后扣掉各种以后,就4K。
也不是说不能活,就是觉得和周围的小伙伴相比,显得有点低。所以心情有点低落。
这两天也都在玩,就当放松心情了。
自己也去网上找了一圈,发现最近工作机会有点少,加上在公司里搞得杂七杂八,没有什么是精通的了,所以还是先好好待着吧。
既然选择待着,就好好干活吧~ 下班自己再学点其他的,增加就业机会。
然后今天早上依然不太想去上班,就又请假了一天。不过发现在家也没事干,还是学习了React。
因为公司项目未来即将要用到。所以先学习一下。稍后分享就分享react方面的知识。

# react的入门
react就是一个js框架,它采取组件化的结构,实现页面局部的快速加载,而不用每次都刷新整个页面。
简单的说,就是 很好用!
而且适配pc和移动端。一套代码,多地方使用,提升效率。

1. 首先安装npm。
2. `npm init`
2. 使用npm安装webpack(这里的react都是使用webpack来管理的,公司是使用gulp来管理,虽然还没深入研究。明天去研究研究。)
3. `npm install --save react react-dom`
4. 基本就可以开始了,这里不讲文件的分布,就讲下react的大致写法。

1. `import React from 'react' //(`首先是引用react)
2. ```
export default class BodyIndex extends React.Components
render(){
return(
<h1>我是body部分</h1>
)
}
```
// 这里是写一个class部分(ES6的写法,由于越来越流行ES6,所以都采取ES6的写法),继承React的Components
// 里面的render是react的语法,即准备返回什么,return里面是要返回到页面上的内容。
3. 在return中也难免会有一些注释,如果直接使用//来注释,则会造成错误,所以要使用{/* ... */}来注释。
4. 在BodyIndex的父级js中,如果要使用BodyIndex,则需要使用`import BodyIndex from 'bodyIndex的文件路径'`
5. 然后在return中 直接使用`<BodyIndex />`即可完美引用,当然前提bodyindex需要export出去。
6. react有几个加载状态`componentsDidMount`,`componentsBeforeMount`都可以在这里面设置自己需要的事件。
7. 当然,除了几个状态以外,react也有独立的state和props。state即状态,可以在一开始的时候设置`this.state = {id: 111}`
然后在使用的时候,如果要改变state可以使用`this.setState({id: 222})`重新赋值来覆盖掉原来的即可。
8. props是父子页面之间互相传递的方式。在父页面中可以使用`<BodyIndex userid={123}`来将userid=123传给bodyindex页面,
然后在bodyIndex的页面中,使用this.props.userid就能来获取父页面发来的数据了。
9. 在当前页面中写function以后,如果在比如input-button的标签中调用,需要书写如下`onClick={this.functionName.bind(this,[args])}`的形式,
其中args为可选,如果填写会发送给function当做参数,这是ES6的语法,需要记住。
10. 从父页面传来的数据在使用前可以先进行验证,这些都是react里面有现成方法的,比如userid为数字
`BodyIndex.propTypes = {userid : React.PropTypes.number}`,这句话写在bodyindex页面即可进行验证。
11. 从父页面传来的数据如果没有填写,自己页面填写了`this.props.userid`也不会报错,只是输出空数据。
当然,我们也可以写一些默认的值来避免这些尴尬,如果有传过来,就使用传过来的值,没有就使用默认值
`const defaultPrps = {userid : 001}; BodyIndex.defaultProps = defaultProps`.
12. 如果想从父页面(A)向孙子页面(C)传递(隔着一个中间页面(B)传值),不需要很复杂的写好几个`this.props.XX = XXOO`,
可以直接在B页面中,C页面的代码处写`{...this.props}`就能将A的页面传来的数据给C。
13. 后面就是关于CSS部分,明天再来聊,拜拜啦。

昨天请假没去公司,今天就遗留了很多任务,基本就一直在搞。
不过上司一大早过来就推翻了之前两周做的事情,决定用比较底层的部分来写页面,而不是直接使用别人封装好的。然后就是修改,调试。最后因为一点点小问题,就结束了今天的工作。
晚上的时候本来想学`react-router`部分的,但是好像是版本太低还是什么原因,一直提示错误,很烦躁。
就先暂时不学了,明天去公司有时间再自己调试调试。

# js记录
1. for ... of方法,用来取array中的值
2. for ... in方法,用来取object中的'key'
3. && 和 || 在执行时会造成短路
4. switch 判断时采用的是 === 全等于
5. object 可以多次嵌套obj,在存储部分数据时很好用(json格式)
6. `a = [1,2,3]; a[100] = 10001; a.length => 101; a => [1,2,3, undefined X 97, 10001]`
7. 不管function是否带有形参,都可以在函数体中使用arguments来获取实际传进来的参数集合(array形式)
8. 在函数声明时,可以用...args来获取剩余的参数(funciton a (x, ...args){}; a(1,2,3,4) => x => 1,args => [2,3,4])

今天学的有点少~ 玩了几把游戏 明天补上。 拜拜咯。

17-7-25-js记录的更多相关文章

  1. js记录用户在网站的浏览记录和停留时间

    by weber开发者 from http://weber.pub/ 本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html 问题 公司想统计一个用户从进入 ...

  2. js记录用户行为浏览记录和停留时间(转)

    演示地址:http://weber.pub/demo/160902/test.html 测试源码下载:http://pan.baidu.com/s/1nvPKbSP 密码:r147 解决问题所使用的知 ...

  3. 2.25 js处理多窗口

    2.25 js处理多窗口 前言在打开页面上链接的时候,经常会弹出另外一个窗口(多窗口情况前面这篇有讲解:Selenium2+python自动化13-多窗口.句柄(handle)),这样在多个窗口之间来 ...

  4. PSP(5.11——5.17)以及周记录

    1.PSP 5.11 14:30 20:00 130 200 Cordova A Y min 5.12 9:00 14:00 100 200 Cordova A Y min 5.13 13:30 15 ...

  5. js记录用户访问页面和停留时间

    1.setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval(code,millisec[,"lang" ...

  6. js记录重复字母的个数

    var str = "hello"; var obj = {}; for (var i = 0; i < str.length; i++) { var v = str.cha ...

  7. 系列博文-Three.js入门指南(张雯莉)-网格 setInterval方法 requestAnimationFrame方法 使用stat.js记录FPS

    第6章 动画 在本章之前,所有画面都是静止的,本章将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库,用来观测每秒帧数(FPS). CSS3动画那么 ...

  8. jquery/js记录点击事件,单击次数加一,双击清零

    目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下: <%@ page language="java" contentType=&qu ...

  9. Chrome 调用vue.js 记录

    一.今晚遇到一个问题,就是不能直接在 html 直接调用 js 代码的问题 二.会出现如下错误: Refused to execute inline script because it violate ...

  10. MySQL Crash Course #17# Chapter 25. 触发器(Trigger)

    推荐看这篇mysql 利用触发器(Trigger)让代码更简单 以及 23.3.1 Trigger Syntax and Examples 感觉有点像 Spring 里的 AOP 我们为什么需要触发器 ...

随机推荐

  1. windows版本redis下载安装

    官方网站:http://redis.io/ 官方下载:http://redis.io/download 可以根据需要下载不同版本 在官方下载网页中有一个window版本的说明,说redis官方没有wi ...

  2. 【JSP EL】EL表达式获取当前时间(两种方式)

    第一种方式: //先在代码段定义<% long date = new Date().getTime(); request.setAttribute("date", date) ...

  3. [洛谷P3460] [POI2007]TET-Tetris Attack

    洛谷题目链接:[POI2007]TET-Tetris Attack 题目描述 A puzzle called "Tetris Attack" has lately become a ...

  4. [洛谷P1822] 魔法指纹

    洛谷题目连接:魔法指纹 题目描述 对于任意一个至少两位的正整数n,按如下方式定义magic(n):将n按十进制顺序写下来,依次对相邻两个数写下差的绝对值.这样,得到了一个新数,去掉前导0,则定义为ma ...

  5. 彻底找到 Tomcat 启动速度慢的元凶 /dev/random

    参考  http://blog.csdn.net/u013939884/article/details/72860358

  6. EntitySpace 常用语句

    EntitySpace 这个是很早期的ORM框架,最近发现这个破解的也都不能用了.有谁知道能用的,联系我. 1. where带几个条件的 query.Where(query.ProductTempSt ...

  7. Large Class--过大的类--要重构的信号

    如果想利用单个类做太多事情,其内往往就会出现太多实例变量.一旦如此,Duplicated Code也就接踵而至.     解决方法:     1.将类内彼此相关的变量,将它们放在一起.使用Extrac ...

  8. 【BZOJ】2679: [Usaco2012 Open]Balanced Cow Subsets

    [算法]折半搜索+数学计数 [题意]给定n个数(n<=20),定义一种方案为选择若干个数,这些数可以分成两个和相等的集合(不同划分方式算一种),求方案数(数字不同即方案不同). [题解] 考虑直 ...

  9. Transformation(线段树+HDU4578+多种操作+鬼畜的代码)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 题目: 题意:n个数初始值为0,进行四种操作:1.将区间内的数字加c:2.将区间内的数字乘c:3 ...

  10. 【Zigbee技术入门教程-02】一图读懂ZStack协议栈的核心思想与工作机理

    [Zigbee技术入门教程-02]一图读懂ZStack协议栈的核心思想与工作机理 广东职业技术学院  欧浩源   Z-Stack协议栈是一个基于任务轮询方式的操作系统,其任务调度和资源分配由操作系统抽 ...