react1
1、方法用() 里面的每个参数之间用,分隔
2、对象(函数、数组)用{}
3、{/*注释...*/}
4 组件的生命周期可分成三个状态:
Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM
5、.bind(this) 让函数里的this指向函数外面的对象
在这里指的是当前的组件对象
6 多个标签要用<div>包起来
7 绑定事件:onClick(驼峰式命名) (原生html中用全小写)
8 ref="box" , 给子组件起名字,通过
9 React.findDOMNode(this.refs.属性名) 这个方法用了获取真实的dom节点
10组件:封装起来具有独立功能的ui控件,高度可重用(许多方法的集合)
11React. createClass({这是一个许多方法组成的对象});
12 组件
(1)React自有方法(组件生命周期里的方法) render componentWillUpdate componentDidMount
(2)自定义方法 handleClick handleChange handleMouseover
这是一个带有事件处理函数的组件,它一共有4个方法
var Content=React.createClass({
getInitialState:function(){
这是react自有方法
},
handleChange:function(event){
这是一个事件处理函数
},
handleSubmit:function(){
这是一个事件处理函数
},
render:function(){
这是react自有方法
},
});
onClick是一个组件或者子组件的属性,用=来赋值,this指向的是组件这个对象,handleClick指的是函数(即对象的方法),如果handleClick()指的就是函数返回的方法。
onClick={this.handleClick}
13 实例
var HelloWorld=React.creactClass({
handleChange:function(event){
console.log(event.target.value);
},
render:function(){ //当input值改变时,就执行handleChange函数
return <div>
<input onChange={this.handleChange}></input>
</div>;
},
});
React.render( 把组件渲染到body中
<HelloWorld></HelloWorld>,
document.body
);
react1的更多相关文章
- react-1 react需要的环境配置
一.nodeJs简介和安装 1. 官网 https://nodejs.org/en/ NPM https://www.npmjs.com/ 2.检查安装成功的命令 node -v np ...
- react-1
react 创建方法 首先确定你的电脑上面已经安装了node和npm 检查方法:window键 输入cmd 输入node -v 或者 npm -v 在全局安装create-react-app这条命令 ...
- 如何选择前端框架:ANGULAR VS EMBER VS REACT
最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...
- React 学习资源分享 菜鸟刚学5天 博客写的不多 不懂写博客的套路
http://www.ruanyifeng.com/blog/2015/03/react.html 首先个人强烈推荐 阮一峰的React基础 细细过一遍,看得出大师的用心良苦 然后就开始看书般的过ht ...
- Demo1
<!DOCTYPE html> <html lang="zh"> <header> <meta charset="utf-8&q ...
- 利用Webpack+React(antd)+ES6+python(flask)实现代码转换
之前的几篇博客是将flask 结合 antd本地化,但是这样使得antd无法按需加载(也不支持ES6的语法),而且在写的过程中还需要把每个组件都用antd对象,这样的做法虽然是实现了antd的本地化, ...
- 20.react库 入门
vue插件: 使用方式:Vue.use(插件名称); {}/function 1.对象 export default { install(Vue,options){ } } 2.函数 export d ...
- [webpack]深入学习webpack核心模块tapable
一.手动实现同步钩子函数 1.SyncHook class SyncHook { // 钩子是同步的 constructor(args){ this.tasks = []; } tap(name,ta ...
- npm加载包报错 :syscall access
$ npm install --save-dev babel-plugin-syntax-dynamic-import npm WARN checkPermissions Missing write ...
随机推荐
- 使用Python统计深圳市公租房申请人省份年龄统计
使用Python,HtmlParser来统计深圳市保障房申请人的原籍省份分布,年龄分布等.从侧面可以反映鹏城人的地域分布.以下python代码增大了每一次获取的记录数,从而少提交几次请求.如果按照WE ...
- 存储过程中的output跟return区别及实例说明
存储过程return,表示该存储过程执行到当当前return位置,不再向下执行: 存储过程写法:set ANSI_NULLS ON set QUOTED_IDENTIFIER ON GO ALTER ...
- 非常强大的table根据表头排序,点击表头名称,对其内容排序
js代码: /** * 通过表头对表列进行排序 * * @param sTableID * 要处理的表ID<table id=''> * @param iCol * 字段列id eg: 0 ...
- 在Excel表格中输入一大段文字
1.有时为了注释的需要,在excel中需要输入一大段文字,这时候可以使用—视图-工具-绘图,然后选择下面的文本框,即可自定义文本框大小,如需要文本框和表格边框完全重合,在鼠标画文本框时按住 Alt键.
- js中进行金额计算parseFloat
在js中进行以元为单位进行金额计算时 使用parseFloat会产生精度问题var price = 10.99;var quantity = 7;var needPay = parseFloat(pr ...
- HTTP标头
HTTP头信息 头信息由“键:值”组成.它们描述客户端或者服务器的属性.被传输的资源以及应该实现连接. 四种不同类型的头标 通用头标:即可用于请求,也可用于响应,是作为一个整体而不是特定资源与事务相关 ...
- [linux系统]--搭建ftp服务器并且 创建用户 设置密码
下面例子演示创建ftpuser 并且设置密码为ftpuser,ftpuser的目录为/root/ftpuser #!/bin/bash rpm -ivh vsftpd-2.2.2-21.el6.x86 ...
- [转]html5音乐播放器
http://files.cnblogs.com/files/xjyggd/html5music.rar import java.io.File;import java.util.ArrayList; ...
- Centos7搭建需要mysql的网站
1.在centos7上安装好http.php.php-mysql服务 php-mysql是用来链接的工具 2.在centos5上yum安装mysql 注意在搭建本地yum源时把校验关闭,不然安装不上 ...
- javascript中怎样区分元素和节点?
1.所谓元素,即html文档里面,所有的标签都可以称之为元素,比如说<p>.<tr>等,也就是说元素是个统称,一个文档里面有很多的元素.2.所谓节点,是js为了对html文档进 ...