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 的项目,那我们项目应该有如下类似的关系: 父 ...
随机推荐
- python学习（二）：基本数据类型：整型，字符型
整型: type():显示数据类型 # 整型,int # python3里,不管数字有多大,都是int类型 # python2里,有大小区分,长整型:long int a = " print ...
- redhat下搭建jdk+tomcat环境
由于redhat自带安装了jdk,我们需要现将其进行卸载 卸载系统自带的jdk版本: 查看自带的jdk: 输入命令:rpm -qa|grep gcj 可能看到如下类似的信息: libgcj-4.1.2 ...
- PID的原理
来源:https://www.cnblogs.com/foxclever/p/8902029.html 在自动控制中,PID及其衍生出来的算法是应用最广的算法之一.各个做自动控制的厂家基本都有会实现这 ...
- hibernate 或jpa 中使用 AliasToBeanResultTransformer 自定义类型转换ResultTransformer 下划线转驼峰
jpa中使用 sql查询时,返回结果直接转为实体bean的实现, 需要自定义一个ResultTransformer,如下, import java.util.Arrays; import org.ap ...
- less04 运算符、命名空间
less //.wp{ // margin: 0 auto; // background: forestgreen; // width: 450px + 450; //有一个有单位就可以 // hei ...
- 51nod-1296: 有限制的排列
[传送门:51nod-1296] 简要题意: 有一个集合,集合中的数为1到n 给出a限制条件,a[i]表示第a[i]位置的数要比相邻位置的数要小 给出b限制条件,b[i]表示第b[i]位置的数要比相邻 ...
- hdoj--2516--取石子游戏(博弈)
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- 用jquery给select加选中事件
select在前端开发过程中很常用,现在我们要实现一个效果,那就是选中select中的某一项,执行事件,本来自己没怎么接触过这些,最后网上找了一些资料,自己研究了一下,把方法分享给大家,大家如果有需要 ...
- CUDA笔记（11）
CUDA提供了一种cudaEvent_t的类型,这种类型Event可以统计GPU上面某一个任务或者代码段的精确运行时间 使用常量内存的光线跟踪器的性能比使用全局内存的性能提升了50% __consta ...
- PostgreSQL Replication之第九章 与pgpool一起工作（2）
9.2 理解pgpool的功能 pgpool提供了如下功能: •连接池 •语句级别的复制 •负载均衡 •限制连接 •内存缓存 •并行查询 [当决定使用那些功能的时候,记住并非所有的功能可以在同一时间使 ...