react 组件使用的小记第一天
//定义一个子组件 var Child = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick:function(){ this.setState({liked: !this.state.liked}); }, render:function(){ var text = "111"; if(this.state.liked){ text = "222"; }else{ text = "111"; } return <div onClick={this.handleClick}>{text}</div> } }) //自定义一个父组件 var Parent = React.createClass({ render:function(){ return <div> <Child name={this.props.name}/> </div> } }) //定义要传递的数据 var arr01 = "我是定义大数据--hellow wrod!!!"; //实例化render ReactDOM.render( <div> <Parent name={arr01}/> </div>, document.getElementById('page') )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="page"></div> <script type="text/babel" src="demo1.js"></script> </body> </html>
react 组件使用的小记第一天的更多相关文章
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- React组件性能优化
转自:https://segmentfault.com/a/1190000006100489 React: 一个用于构建用户界面的JAVASCRIPT库. React仅仅专注于UI层:它使用虚拟DOM ...
- React组件
React组件 组件是React中的基本单位,在每个组件里面又封装了程序逻辑,通过reader标出界面片段或者回传一段描述,组件再通过React.renderComponent将组件展示在浏览器中.每 ...
- react 组件的生命周期
组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...
- 从性能角度看react组件拆分的重要性
React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...
- 如何优雅的设计 React 组件
作者:晓冬 本文原创,转载请注明作者及出处 如今的 Web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家 ...
- 如何优雅的设计React组件
如何优雅的设计 React 组件 如今的 web 前端已被 React.Vue 和 Angular 三分天下,一统江山十几年的 jQuery 显然已经很难满足现在的开发模式.那么,为什么大家会觉得 j ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- React 组件间通讯
React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...
随机推荐
- 【codeforces 404D】Minesweeper 1D
[题目链接]:http://codeforces.com/problemset/problem/404/D [题意] 让你玩一个1维的扫雷游戏; 游戏的描述由数字0..2以及符号*表示; 分别表示这个 ...
- [转载]深入Java单例模式
在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下. 所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在 ...
- POJ 3254 Corn Fields 状态压缩DP (C++/Java)
id=3254">http://poj.org/problem? id=3254 题目大意: 一个农民有n行m列的地方,每一个格子用1代表能够种草地,而0不能够.放牛仅仅能在有草地的. ...
- POJ 2516 Minimum Cost (最小费用最大流)
POJ 2516 Minimum Cost 链接:http://poj.org/problem?id=2516 题意:有M个仓库.N个商人.K种物品.先输入N,M.K.然后输入N行K个数,每一行代表一 ...
- hdu_3308 区间合并
一两个月没写代码的确是手生的厉害,debug的好艰辛,,不过看到accept时的那种满足感真的就是爽 #include<iostream> #include<cstdio> # ...
- How to Download Windows 10 Spotlight/Lock Screen Images
http://www.online-tech-tips.com/windows-10/download-windows-10-spotlight-lock-screen-images/ 图片位置 C: ...
- Xshell高级后门完整分析报告
Xshell高级后门完整分析报告 from:https://security.tencent.com/index.php/blog/msg/120 1. 前言 近日,Xshell官方发布公告称其软件中 ...
- [转]Zen Cart官网屏蔽中国用户访问的真正原因
近需要到 zen cart 的官方网站查询一些资料,却发现无法访问!在网上搜索一番以后,原来如此. Zen Cart官网屏蔽中国用户访问的真正原因 作者:[鹏程万里] 日期:2011-03-26 准备 ...
- Adobe 2015 CC update (Windows/Mac OS) 独立升级包下载 Adobe Photoshop CC (Windows 32bit)
Adobe CC 2015 Product Updates/Downloads for Windows ** = To access these updates, please first follo ...
- XML字符串解析实体类方法
/// <summary> /// XML字符串解析实体类方法 /// </summary> public class StringXML { public StringXML ...