react初识
如下是在研究中记录的笔记:
1,作用:局部的更新dom结构;虚拟dom保证性能
2,和mvc不同,mvc是对于技术上的分离(分类),而react是组件上的分离,每个视图模块分离,复用,以视图模块为单位
3,2的说法确实有所体现,而且,我感觉好像模板引擎啊,难道是我幼稚?
4,浅析语法:
html : <div id='box'></div>
jsx
<script type='text/babel'>
js code...
ReactDOM.render(html_jsx_deal,document.getElementById('box'));
</script>
5,还可以将jsx代码放在js文件中,然后引入,<script type='text/babel' src='..'></script>,这样引入,后面的引入的模块错了,
运行也不会受到影响的
6.自设定的属性要加data-mine在标签中
7.没有if else ,用三目运算符
8,js表达式写在{}中,注释也写在花括号中
9,var show = {
fontSize:30,
color:'red',
background:'black'
}
ReactDOM.render(
//html标签后面是逗号
<h2 style={show}>hello world this is my first react js</h2>,
document.getElementById('show')
)
内联样式的写法,而且是推荐内联样式的
10,感觉jsx不可以遍历对象我日诸如for()方法都不可用
11,browser.js上线后,要放到服务器完成,否则很耗时间?????????????????有转码工具进行转码
12****important
遍历的表达式外层要有父标签的包裹,否则会报错,如:而且还证明了对象是可以处理的
var you = [{name:'me'},{name:'zhongyaji'}];
ReactDOM.render(
<h3></h3>
//如这种回报错
//{
// you.map(function(e){
// return <h2>{e.name}</h2>
// })
//}
//这种就ok,循环loop处有h2的包裹
<h2>
{
you.map(function(e){
return <h2>{e.name}</h2>
})
}
</h2>
,
document.getElementById('one')
)
13,这里研究是否可以用for和单纯的对象:
这里是不能够这么写的:
var lover= {name:'zhongyaji',age:'21',position:'princess',emotion:'deep and would not give up'};
ReactDOM.render(
<h1><strong>Introduce my wife</strong></h1>
<ul>
{
for(var i in lover){
<h3>{i}:{lover[i]}</h3>
}
}
</ul>,
document.getElementById('two')
)
14,关于组件有如下亲笔栗子:---important组件开头名必须
组件调用了不能在有其他代码了,
而且,要拼接组件,只能在调用之前拼接好(符合组件:如下)
<!--组件化-->
<div id="two"></div>
<script type="text/babel">
var ModleChase = React.createClass({
render:function(){
return <h2>我的爱人组件:{this.props.lover}<h4>只能有一个顶级的元素,这个费顶级,就是只有一个父亲h2</h4></h2>
}
});
ReactDOM.render(
//果然只能有一个父元素,一女不容2男
// <h1>我的爱人是</h1>
<ModleChase lover='zhongyaji'/>,
document.getElementById('two')
)
</script>
15,组件的拼接:符合组件
<!--符合组件-->
<div id="three"></div>
<script type="text/babel">
var Wuruijie = React.createClass({
render:function(){
return (<strong>emotion to zhongyaji:{this.props.say}</strong>)
}
})
var Zhongyaji = React.createClass({
render:function(){
//return后面要加小括号 坑爹啊
return (<strong>emotion to wuruijie :{this.props.say}</strong>)
}
})
var Makelove = React.createClass({
render:function(){
//这个return 有无括号无所谓
return (
<div>
{this.props.love}
<Wuruijie say='我爱仙女'/>
<Zhongyaji say='我爱吴师傅'/>
</div>)
}
})
ReactDOM.render(
//这个斜线必须加
<Makelove love='爱的构造'/>,
document.getElementById('three')
)
</script>
注.this.props.children是它的不可自定义
16,状态的改变
寄托于组件
var ChangeState = function(){
getInitialState:function(){
return {flag:true}
},
changeHandle:function(event){
//event事件对象
//设置为相反的状态,然判断这个来給dom
this.setState:({flag:!this.state.flag});
},
render:function(){
var text = this.state.flag?'true':'false';
return (
<p onClick={this.changeHandle}>{text}{this.props.jj}</p>
);
}
}
17,在react中的交互靠的就是状态,对的,所以state很重要,,而且,this.state...可以得到状态,要改变,需要this.setState,只要状态改变了,
自动调用this.render来渲染
18,渐渐体会到了react的精髓,暴露的仅仅是有着不同属性的html自定义标签,然后,属性和动态的,都由React.createClass({中的方法})
来进行控制,变化,主要靠state,对于一个组件是全局的,还有props,对于一个组件的属性也是全局的
19,react在state改变之后,自动调用render来进行渲染,关于如何渲染?触发改变?规定方法,时间触发了就改变.移除更新也是
20,style的写法应该是 <div style={{color:red;background:blue}}></div>
21,不应将转化放在客户端靠browser.js,很慢,而应当在服务端时候,用工具,就转化编译好,npm install -g react-tools
然后,jsx --watch origin/ use/来监听和转化!
如下时候亲手亲测代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script type="text/javascript" src='../lazyload/jquery-2.1.4.min.js'></script>
<script type="text/javascript" src='react.min.js'></script><!--核心库-->
<script type="text/javascript" src='react-dom.min.js'></script><!--dom操作-->
<script type="text/javascript" src='browser.js'></script><!--jsx转化为js-->
</head>
<body>
<div id="show"></div>
<div id="list"></div>
<div id='love'></div>
<div id='hate'></div>
<div id='hated'></div>
<!--这里是jsx-->
<script type="text/babel" src='react_out.js'></script>
<script type="text/babel"> //是小括号
//ReactDOM外部写js,内部写ReactDOM.render();
var name = ['wuruijie','zhongyaji'];
console.log(name);
//遍历数组的
ReactDOM.render(
<ul>
{
name.map(function(each){
return <li>lovers:{each}</li>
})
}
</ul>,
document.getElementById('list')
);
//数组的
var arr = [<h1>我要加油为了钟亚姬</h1>,<h2>一定要等我</h2>];
ReactDOM.render(
<div>我的感觉{arr}我的感觉</div>,
document.getElementById('love')
)
</script>
<!--对象的测试-->
<div id="one"></div>
<script type="text/babel">
var you = [{name:'me'},{name:'zhongyaji'}];
ReactDOM.render(
<h3>
{
you.map(function(e){
return <h2>{e.name}</h2>
})
}
</h3>
,
document.getElementById('one')
)
</script> <!--组件化-->
<div id="two"></div>
<script type="text/babel">
var ModleChase = React.createClass({
render:function(){
return (<h2>我的爱人组件:{this.props.lover}<h4>只能有一个顶级的元素,这个费顶级,就是只有一个父亲h2</h4></h2>)
}
});
var Angle = React.createClass({
render:function(){
return (<h3>hahahahhahahhah{this.props.say}</h3>) }
})
ReactDOM.render(
// <h1>我的爱人是</h1>s
// <Angle say='i love you zhongyaji'/>
<ModleChase lover='zhongyaji'/>,
document.getElementById('two')
)
</script>
<!--符合组件-->
<div id="three"></div>
<script type="text/babel">
var Wuruijie = React.createClass({
render:function(){
return (<strong>emotion to zhongyaji:{this.props.say}</strong>)
}
})
var Zhongyaji = React.createClass({
render:function(){
//return后面要加小括号 坑爹啊
return (<strong>emotion to wuruijie :{this.props.say}</strong>)
}
})
var Makelove = React.createClass({
render:function(){
return (
<div>
{this.props.love}
<Wuruijie say='我爱仙女'/>
<Zhongyaji say='我爱吴师傅'/>
</div>)
}
})
ReactDOM.render(
<Makelove love='爱的构造'/>,
document.getElementById('three')
)
</script> <!--状态,的改变-->
<div id="fairy"></div>
<script type="text/babel">
var Changeemotion = React.createClass({
//初始化状态,用true和false来赋值,普遍的,这个函数固定的-亲测如此
getInitialState:function(){
//这个函数一般都是返回一个初始状态
return {emotion:true};
},
//这个函数是自定义的
changHandler:function(event){
//event是事件对象,固定的setState
// this.setState({emotion:!this.state.emotion});
//两个一样和上面的写法
this.setState(function(state){
return {emotion:!state.emotion}
})
},
//设定默认的props,不指定时候默认 getDefaultProps
getDefaultProps:function(){
return {
other:'<em>hahah</em>'
};
},
//拼接
render:function(){
var text = this.state.emotion?'我真的爱你':'我有苦衷,但是还是爱你';
return (
<strong data-hello='you' onClick={this.changHandler}>这个情感是:{this.props.other}{text}</strong>
)
}
}) ReactDOM.render(
//此处就算不写other,也有默认的
<Changeemotion />,
document.getElementById('fairy')
)
</script> <!--联动狂-->
<div id="all_move"></div>
<script type="text/babel">
var Content = React.createClass({ render:function(){
return (
<div>
<input value={this.props.emotion} type='text' onChange={this.props.deal_fun}/>
<h1 >{this.props.emotion}</h1>
</div>
)
}
})
var Show = React.createClass({
getInitialState:function(){
return {emotion:'We love toghether!'};
},
inputHandler:function(event){
this.setState({emotion:event.target.value});
},
render:function(){
return (
<div>
<Content emotion={this.state.emotion} deal_fun={this.inputHandler}></Content>
</div>
)
}
});
ReactDOM.render(
<Show></Show>,
document.getElementById('all_move')
)
</script>
<!--ajax实现-->
<div id="ajax"></div>
<script type="text/babel">
//建立一个ajax功能的标签
var Ajax_label = React.createClass({
//一般都由的初始化state,贯穿一条线
getInitialState:function(){
return {
modle:{
name:'modle',
express:'the protector of princess'
},
lover:{
name:'she',
age:'16',
emotion:'deep and deep'
}
}
},
//这里的bind是为了保证this的指向始终指向实体元素(我们所构造的)
componentDidMount:function(){
this.serverRequest = $.get(this.props.path,function(data){
console.log(data);
this.setState({
lover:data
})
}.bind(this),'json');
},
//当组件移除时候,应当销毁的操作
componentWillUnmount:function(){
this.serverRequest.abort();
},
render:function(){
return (
<div>
<h2>modle_msg:{this.state.modle.name} and duty on {this.state.modle.express}</h2>
<h1>fairy_msg:{this.state.lover.name} and age is {this.state.lover.age} and {this.state.lover.emotion}</h1>
</div>
)
}
}) setTimeout(function(){
ReactDOM.render(
<Ajax_label path='lover.json'/>,
document.getElementById('ajax')
)
},10000)
</script> </body>
</html>
react初识的更多相关文章
- React初识（按钮点击+输入绑定）
简单按钮点击事件: <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- React学习-React初识
一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...
- React 初识
React We built React to solve one problem: building large applications with data that changes over t ...
- React初识整理（五）--Redux和Flux（解决状态传递问题）
Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...
- React初识整理（四）--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- React初识整理（二）--生命周期的方法
React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...
- React初识整理（一）
一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...
- React初识整理（三）--受控组件解决方法
1. 受控组件:组件处于受控制状态,不可更改输入框内的值. 2. 什么情况下会让组件变成受控组件? - 文本框设置了value属性的时候 - 单选框或多选框设置了checked属性的时候. 3. 如何 ...
- 初识React Native，踩坑之旅....
开启Genymotion Android模拟器后 1.运行“react-native run-android”报端口冲突....解决方法: 2.运行“react-native run-android” ...
随机推荐
- Python 计算已经过去多少个周末
def weekends_between(d1,d2): days_between = (d2-d1).days weekends, leftover = divmod(days_between,7) ...
- 安卓天天练练（十）ListView
ListView不能和ScrollView同时使用,因为它已经包含了滚动支持. 还有个Gallery http://blog.csdn.net/dazlly/article/details/78639 ...
- 树莓派（jessie）制作服务并开机启动
/etc/init.d/xware #!/bin/sh ### BEGIN INIT INFO # Provides: svn_serve # Required-Start: $remote_fs # ...
- 当我们在谈论 DevOps，我们在谈论什么？
Cloud Insight 携手 BearyChat:打造适合运维人员的团队协作工具 走过 C 轮的 OneAPM,旗下的产品已经日渐丰满,从应用性能监控的 Application Insight 到 ...
- net.sf.json在处理json对象转换为普通java实体对象时的问题和解决方案
我使用的net.sf.json是json-lib-2.4-jdk15.jar,把json对象转换为普通java实体对象时候有个问题,josn对象转换为java对象之后,json串里面的那几个小数点的值 ...
- 报错java.net.SocketException: Software caused connection abort: recv failed 怎么办
产生这个异常的原因有多种方面,单就如 Software caused 所示, 是由于程序编写的问题,而不是网络的问题引起的. 已知会导致这种异常的一个场景如下: 客户端和服务端建立tcp的短连接,每次 ...
- C语言嵌入式系统编程修炼之五：键盘操作
处理功能键 功能键的问题在于,用户界面并非固定的,用户功能键的选择将使屏幕画面处于不同的显示状态下.例如,主画面如图1:图1 主画面 当用户在设置XX上按下Enter键之后,画面就切换到了设置XX的界 ...
- 3.2 java中堆栈(stack)和堆(heap)(还在问静态变量放哪里，局部变量放哪里，静态区在哪里.....进来)
(1)内存分配的策略 按照编译原理的观点,程序运行时的内存分配有三种策略,分别是静态的,栈式的,和堆式的. 静态存储分配是指在编译时就能确定每个数据目标在运行时刻的存储空间需求,因而在编 译时就可以给 ...
- HTML5区域范围文本框实例页面
CSS代码: input { font-size: 14px; font-weight: bold; } input[type=range]:before { content: attr(min); ...
- Android-补间动画效果
Android的SDK提供了三种类型的动画,分别是补间动画.逐帧动画和插值属性动画.下面先介绍第一种动画效果-补间动画. 补间动画可以应用于View,让开发者可以定义一些关于大小.位置.旋转和透明度的 ...