- 博客(447)
- 收藏
- 关注
RSS订阅原创 React学习之高级事件系统（二十七）
上一篇博客讲了如何在React使用HTML属性，这次就是函数，但是此篇博客讲述的事件不完备，其他的希望大家自行学习 概念：合成事件（SyntheticEvent）是React事件系统的核心1.概要事件处理程序通过合成事件的实例进行传递，合成事件是浏览器原生事件跨浏览器的封装，SyntheticEvent和浏览器的原生事件一样有stopPropagation，preventDefault()接口
2017-03-24 21:02:41
2589
原创 React学习之高级DOM元素属性（二十六）
React实现了一个独立于浏览器的DOM系统，跨浏览器兼容性特别好。在React中， 所有的DOM属性包括事件绑定都要使用托蜂命名法，比如tabindex在React中就变成了tabIndex，同时需要显示在DOM的属性需要用这两个前缀而且必须是小写，aria-*和data-*1.一些特殊的DOM属性在React中的处理 checked这个属性用在checkbox和radio中，可以使用它检测
2017-03-24 18:45:41
2637
原创 React学习之高级ReactDOMServer（二十五）
1.概述 ReactDOMServer可以让你的组件运行在服务器renderToString()renderToStaticMarkup()2.实现 renderToString()ReactDOMServer.renderToString(element)这个函数用于将一个React组件渲染成一个HTML，在服务器端中，React会将组件处理成一个HTML字符串，然后再浏览器端进行渲
2017-03-24 11:32:51
2793
原创 React学习之高级ReactDOM（二十四）
1.概述react-dom中的顶级APIrender()unmountComponentAtNode()findDOMNode() 浏览器支持情况React支持所有流行的浏览器，包括IE9+2.函数具体 render()ReactDOM.render( element, container, [callback])将React元素插入到被提供的容器中，同时返回一个组件的
2017-03-24 10:18:14
2781
原创 React学习之高级组件巴巴（二十三）
套路语句组件是React提供给广大开发者的福利，一可重用，二可装逼，三可事件，简直逆天1.概述·React.Component·是一个抽象基类,因为是抽象类所以如果直接使用·React.Component·并没有什么卵用，所以，我们需要继承它，也可以说是让子类的原型指向它，产生子类，同时这个子类要包含至少render这个方法最简单的例子class Greeting extends React.Co
2017-03-23 23:03:22
1285
原创 React学习之高级顶配API说明（二十二）
React是React库的对外接口，如果你使用script引入React，你就可以全局使用它，如果你是使用ES6的npm，你则需要用import React from 'react'，如果是使用ES5的npm，则写成var React = require('react') 组件相关React重用代码的方式就是组件，大部分UI要想在React中重用，一般都会写成组件的形式，只要将类继承React
2017-03-23 10:56:07
959
原创 React学习之进阶终临高阶组件（二十一）
HOC高级组件在React是一种比较先进的重用组件的方法，高级组件不是React的API，它是一种从React的组件方式中合并而成的一种模式，所以可以说HOC不是组件，而是一个处理模式准确地来说，HOC组件是一个处理组件并且返回新组件的函数，但是这个函数又是一个纯函数，遵循函数式编程规范。const EnhancedComponent = higherOrderComponent(WrappedCo
2017-03-22 17:04:46
921
原创 React学习之进阶WEB组件（二十）
React和WEB组件React和WEB组件涉及不同领域，分别解决不同的问题，WEB组件提供组件的可复用性，而React确保数据的一致性，你可以在WEB组件中使用React，也可以在React中使用WEB组件。很多人在使用React时都不会使用WEB组件，但是可能你想使用第三方UI组件，极可能进行混用了。1.在React中使用WEB组件class HelloMessage extends Reac
2017-03-21 09:32:54
910
原创 React学习之进阶上下文（十九）
在React中很容易根据组件从而跟踪数据流，当你使用一个组件时，可以通过看props来判断用了哪一些东西。有时候你想直接通过组件树来讲数据传递子元素，而不是通过props一层一层的传递下去，可以使用React提供的contextAPI来处理。1.为什么一般都不使用Context虽然React提供了context来处理以上事件 ，但是一般情况下是不需要使用这个API的。如果你想要你的应用尽可能的稳定的
2017-03-20 21:21:20
2413
原创 React学习之进阶调解器（十八）
React提供给我们声明式的API以至于我们根本不需要关心React内部到底做了什么，这让我们写代码变得轻松，但是我们还是非常有必要了解React内部实现机制，这对我们自己开发一个公司框架以及深入学习React是非常有帮助的。 这一篇博客就是深入的讲解React的更新机制，打开你内心世界React的大门，让我们见识见识diff算法的魅力吧，骚年们！1.算法魅力之前将性能优化的时候已经提到过基本
2017-03-20 19:21:49
761
原创 React学习之进阶非JSX的痛处（十七）
从开始学习React接触到JSX，就知道这个JSX语法就是一个用于简化的代码的方式，React并没有规定你一定要使用这个，你也可以用React.createElement(component,props,...children)纯的javascript语法来处理它JSX语法class Hello extends React.Component { render() { return <d
2017-03-20 11:17:00
1168
原创 React学习之进阶非ES6（十六）
平时我们写React组件的时候一般就是直接用类组件class Greeting extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}现在你可以不使用ES6的类语法，而用React.createClass函数进行处理var Greeting = React.createCla
2017-03-20 10:49:41
1089
原创 React学习之进阶性能优化（十五）
通常，React通常会在渲染到视图中去的时候，会使用几种特殊的技术最小化要更新的DOM节点从而实现性能优化，尽管在大部分的应用中，React为了更快的引导用户使用，而没有做太多的优化工作，然而这些技术的使用性是必要的。1.尽量避免更新在React建立和将内部的数据呈现给视图的过程中，React做了如下的事情：通过在真实DOM和React应用之间建立一个过渡层，这个过渡层有时被称为”虚拟DOM“。虽
2017-03-19 21:07:04
818
原创 React学习之进阶非控制型组件（十四）
1.控制与非控制，何区？非控制型组件知识点非常简单，这里只是为了细分组件功能而增加的模块，对于控制型组件之前我已经说过是由于组件内部通过事件绑定进行控制。其实不然，真正区分控制型组件和非控制型组件的部分是this.state这个状态标记的属性，因为控制型组件实现的是完全控制，不仅单单是事件响应，仅此而已，它们对数据也进行了强行控制此为控制型的组件代码class NameForm extends Re
2017-03-19 12:01:31
735
原创 React学习之进阶ref的必要性（十三）
在一般的数据流中也就是从上而下的单向数据流中，我们一般都是父组件要影响控制子组件必须要通过props来处理，即便是之前讲过this.state，但是那个东西也是针对自己的，而不是增对其它组件的，组件之间的影响到目前为止只能通过props来处理，这会非常的麻烦，所以React提供了一个特殊的接口来处理这种事件。 ref的用处ref用在处理表单空间聚焦，文本选择，媒体播放以及触发动画效果等等官方强
2017-03-19 11:37:29
8127
3
原创 React学习之进阶类型检查（十二）
1.PropTypes类型检测React提供有一套类型检测的自己，通过React.PropTypes来进行控制class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); }}Greeting.propTypes = { na
2017-03-18 21:34:12
2165
原创 React学习之进阶JSX语法（十一）
1.再顾JSX语法从我第一篇博客来看，JSX其实就是提供了一个实现React.createElement(component, props, ...children)函数的便捷方法<MyButton color="blue" shadowSize={2}> Click Me</MyButton>React编译完后就形成了React.createElement( MyButton, {c
2017-03-18 18:49:58
1676
原创 React学习之组合和继承（十）
React自身有一套非常强大的组合模型，官方强烈建议使用组合来代替继承实现组件的重用性1.包容化组件所谓的包容化组件即为不管孩子是什么都可以加进这个容器中作为它的子组件，比如说我们的Dialog弹框，或者是导航栏等等代码如下：function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-'
2017-03-18 09:49:58
3990
原创 React学习之最近公共组件（九）
经常，我们会遇到多个组件使用同一个数据，那时候我们就需要消除掉每一个组件中的数据，而构造出一个公共的祖先组件来处理。我将以一个温度测试组件来进行演示BoilingVerdict组件接受一个摄氏度，输出是否沸腾function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil
2017-03-17 23:10:45
2727
原创 React学习之独特的表单（八）
在众多HTML标签元素中，Form表单在React与HTML中使用是不同，比如如下HTML表单：<form> <label> Name: <input type="text" name="name" /> </label> <input type="submit" value="Submit" /></form>上述代码会在视图中形成一个表单，并让用户提交表单数据，但是
2017-03-17 19:06:14
747
原创 React学习之列表运用（七）
对于列表其实也就是数组，我们可以用数组的map函数对数组集体进行公操作，如下：const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);会对数组中的每一个元素执行乘22操作然后保存在doubled数组中。接下我们就要介绍React数组元素或者说是
2017-03-17 12:20:00
765
原创 React学习之条件视图渲染（六）
1.条件化视图渲染的必要性当你创建不同的组件的时候，可能需要通过你的应用state的数据来显示数据class Creeting extends React.Component{ constructor(props){ super(props); this.state = { isLoggedIn : false };
2017-03-16 22:39:18
1582
4
原创 React学习之事件绑定处理机制（五）
React对于JSX事件处理的方式和DOM元素的事件绑定有点类似，但是有语法上的一些差异。React事件的命名必须是驼峰命名法，不能是小写，和我们写组件是一样的，我们的组件类的首写字母必须大写，不然会出问题,就是说onclick要写成onClick当我们在JSX语句中绑定事件时，我们不能用字符串，必须用大括号包裹一个函数表达式区别如下：//HTML<button onclick="taddl
2017-03-16 21:20:49
9886
原创 React学习之State与生命周期基友情（四）
我先拉拉对React-DOM输出那篇文章的知识点，从那篇文章中得知，至今为止我们只会用ReactDOM.render()去更改覆盖数据来进行视图更新，然而还是在时间的控制下进行变化。现在我们要做的就是让组件自己跑起来 何为state?State是一种类似于props的东西，属于组件元素的属性，但是它是私有的，并且完全被组件所控制，所以State只会存在于组件中，不是组件的话，可以走开了，并且它
2017-03-16 19:17:55
1990
原创 React学习之让组件和属性齐飞（三）
何为组件？组件就是让你可以独立于UI的控件了，从某种意义上来看，组件的开发有点像javascript函数式编程，也就是说组件像是个函数，输入一定的数据，然后处理完输出，将数据展现在视图中。1.函数式组件(又称功能型组件)和类组件看标题大家就知道函数式组件是什么鬼了，也就是组件的开发，简单地说就是写一个函数，如下：function We(props) { return <h1>Hello, {p
2017-03-15 23:02:13
847
原创 React学习之将DOM给展示出来(二)
1.将JSX展现到DOM节点中React中的经常性的元素，我想大家知道JSX(不知道的读者，请看本人博客JSX讲解)，如下所示，言简意赅：const element = <h1>Hello, world</h1>;然而不同于浏览器中页面的DOM，React有自己的DOM，即JSX对象，React的一部分作用就是将JSX对象更新到网页中的DOM节点上，如何将JSX对象更新到DOM节点上就是一个关键性的
2017-03-15 20:06:16
1372
原创 React学习之JSX语法讲解(一)
介绍JSX 什么是JSX？const element = <h1>Hello, world!</h1>;右边这种在javascript中出现的HTML语句就是JSX语法，JSX可以提供给你一个模板语言，快速开发前端UI组件，是javascript前端框架中的利器之一。React通过JSX可以快速的渲染出DOM节点，现在我开始说说JSX语法必备的一些基础知识。 这里重重声明，所谓的JSX一定
2017-03-15 17:50:44
2930
原创 CSU-ACM 1838: Water Pump（单调栈+前缀后缀和）
特记专为某人写的题解，记住哟，要思考思考 题意给你nn个墙壁，墙壁中间是一些房子村庄，然后就是老天开始下雨了，将墙壁之间的空隙给填满了，一句话：就是发洪灾啦，然后呢，政府需要泄洪，于是在这些墙壁之间打通一个下水管，将这里的水给排出去，最后问打通哪里的下水管能够排出去的水最多，输出最终结果 解题思路思路一 如果当前我们选择ii处开通下水管，那么最终的状态就是，左边的水都会满，右边的水都会
2017-03-13 10:44:05
643
原创 NodeJS入门（一）- 基本文件路由实现
使用http和fs模块实现文件路由和基本页面访问【不涉及后台交互】分为三个文件： app.js 应用文件(放在项目根目录) server.js 服务器启动文件(放在server目录) route.js 路由文件(放在route目录)运行node app.js，即可 app.jsvar server = require('./server/server');var router = re
2017-03-10 12:05:32
1917
原创 MP3文件分析之ID3v2.3版本
所有的分析都基于ID3官方网站www.id3.org.同时所有的代码都在我的github中，我将它们用闭包集成在了一起，可以直接使用，非常方便，地址:https://github.com/jslinuxboy/ID3MusicDealerMP3的ID3v2.3版本文件基本分为两部分，一个为标签，其它的为数据。文件标签分为标签头和标签帧11.标签头而标签头有十个字节，即在文件最开始的1010个字节，
2017-02-07 13:29:24
5764
6
原创 X-NUCA(牛咖)联赛9月pwn专题赛赛前--ROP
解题基本思路构造栈溢出，然后通过printfprintf函数泄露地址，通过libc−databaselibc-database确定libclibc的版本，找出相应的偏移地址，确定"bin/sh""bin/sh"字符串的地址，和systemsystem函数地址，接着就是通过systemsystem来获得ShellShell 具体步骤第一步将roprop程序下载到本地，然后通过在linuxlin
2017-01-23 20:10:38
947
原创 GOT表和PLT表知识详解
GOTGOT表和PLTPLT表在程序中的作用非常巨大，接下来的讲解希望大家可以仔细看看我们用一个非常简单的例子来讲解，代码如下: 图1然后我们编译我们直接gdb./a.outgdb ./a.out来进行反编译处理，然后通过disasmaindisas main查看mainmain函数中的反编译代码如下：图3我们可以观察到gets@pltgets@plt和puts@pltputs@plt这两个函数，
2017-01-23 17:11:25
37436
12
原创 CTFCrypto练习之RSA算法
简介RSARSA属于非对称加密算法，因为RSARSA使用了两个不同的密钥分别用于加密和解密，这两个密钥称之为公私钥对，其中公钥用于加密，且公钥是公开的，而私钥用于解密，私钥是私有的。在公开密钥密码体制中，加密密钥（即公开密钥）PKPK是公开信息，而解密密钥（即秘密密钥）SKSK是需要保密的。加密算法EE和解密算法DD也都是公开的。虽然解密密钥SKSK是由公开密钥PKPK决定的，但却不能根据PKPK
2017-01-15 16:38:13
12742
原创 CCF压缩编码和玲珑杯1066 - Buy Candy(平行四边形优化)
玲珑杯1066 - Buy Candy(传送门) 题解就是个简单的石子合并，一般的石子合并问题我们用O(n3)O(n^3)的复杂度解决，通过平行四边形优化可以达到降低一维，实现O(n2)O(n^2)的复杂度，平行四边形优化可以解决满足如下条件的问题： dp[i][j] = min{dp[i][k]+dp[k+1][j]+w[i][j]} 我们用S[i][j]保存当前让dp[i][j]最优的
2016-12-22 14:17:25
1326
原创 CTF实验吧-WEB专题-6
1.PHP大法 题解根据题目提示，备份文件，还有进入页面有个index.php.txt，我不说话，直接进去看，源代码呀，话说这些题目的难度为什么是中级，有趣！ 查看源代码发现了eregi检测是否含有一个字符串，所以尝试编码，但是要编码两次，原因是传送过程中会自动解码一次，如果只进行一次的话，最后到php处理的时候还是原数据，主要是后面有一个urldecode再进行一次解码所以我们进行两次编码
2016-12-22 13:44:49
4455
原创 CTF实验吧-WEB专题-5
1.上传绕过 题解题目说是绕过，那就绕过吧，发现，上传除了php文件外会报需要传php文件，而传php文件则会报必须上传.jpg这些图片文件，那就从上传漏洞开始吧，一般常见的上传漏洞就是截断了，是0x00数据会截断后续数据，当数据为abc.php0x001.jpg时，服务器会处理为abc.php，而0x00后的数据会忽略（产生原因magic_quotes_gpc未打开，同时相关数据没有进行处理
2016-12-22 11:46:34
6036
原创 CTF实验吧-WEB专题-4
1.忘记密码了 题解通过看成step1.php的源代码，发现是通过vim编写的，一般的vim编写可能会产生遗留问题，就是一个备份文件.swp，但是直接用似乎不行，然后我们通过抓包，发送数据发现step2.php中要提交给另外一个submit.php文件，试一试.submit.php.swp是不是存在，OK，发现源代码.接下来，你懂得，源代码都知道了，还有什么好说的，根据源代码提示说不是管理员邮
2016-12-21 11:35:08
3976
3
原创 CTF实验吧-WEB专题-3
1.安女神之名 题解通过题目我们知道，要输入安女神，发现直接输入安女神会报英文，然后就恢复到原页面了，删除cookies后才能看到最开始的原界面，然后就是各种编码了，使用了XEESS来处理，发现可以显示安女神但是得不到flag，基本可以确定是另外一种编码，然后用unicode编码，就可以成功了，成功得到flag.2.思路很重要 题解通过查看源代码，可以发现代码没有删除，所以应该是有备份或
2016-12-21 09:48:23
3166
原创 MD5加密算法详解(c和c++环境下)
MD5MD5加密算法简介MD5MD5消息摘要算法，属Hash算法一类。MD5MD5算法对输入任意长度的消息进行运行，产生一个128128位的消息摘要，也就是产生一个3232个1616进制的数。以下讲解会综合字节和位两个来讲解，同时提醒一下，字典序是小端，即小地址存放低位，高地址存放高位，具体会在后续讲解中说明 数据填充首先针对给出的数据，我们首先要进行数据填充，所谓的数据填充，就是让这个数据
2016-12-20 19:48:30
3697
原创 CTF实验吧-WEB专题-2
1.简单的sql注入之2 题解我们先单引号试一下发现报错，所以基本存在注入，然后我们用空格会爆SQLi detected!因此被过滤了，发现+还是%a0这些编码都会报错，所以只能用万能空格替代/**/,然后测试是否含有flag表，接着测试是否含有flag列，然而并没有什么卵用，因为这货竟然过滤了左右括号，无法用exists判断flag表是否存在，同时由于左右括号不能用，为了让判断flag表存在
2016-12-19 18:45:05
7571
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人