react.js学习之路一
今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容。
(1)对于react来说,任何UI的变化都是通过整体刷新来完成的,也就是说,每做一点界面的更新,都可以认为是刷新了整个页面(怎么感觉跟canvas有点像),至于如何进行局部更新以保证性能,则是React框架要完成的事情。对于react来说,我不用关心每次内容dom的添加到dom树上,我只需要关心数据整体,两次数据之间UI如何变化,交给框架来做,这样就减少了逻辑的处理难度。
(2)什么是组件?
组件就是封装起来的具有独立功能的UI部件,react推荐以组件的方式去思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,来完成整体UI 的构建。
react认为一个组件应有如下特征:
1.可组合:可以和其他组件进行组合或者嵌套,构成更大规模的组件
2.可重用:每个组件都有独立的功能,可以被使用在多个UI场景中
3.可维护:每个小的组件仅仅包含自身的逻辑,容易理解和维护
(3)代码构成部分
1.先引入react.js和JSXTransformer.js库,让他们先加载,JSXTransformer.js的作用是将JSX语法转化为Javascript语法。
2.什么是React.render方法:React.render是React最基本的方法,用于将模板转化为HTML语言,并插入指定的DOM节点。
React.render(参数1,参数2):参数1,是编写的内容,参数2,插入的指定的DOM节点位置,其中参数2必须使用原生的getElementByID方法,不能使用JQ来获取DOM节点。
其中,最讨厌的一点就是新版本随着更新了,但是很多老的教程还没有进行更改,例如,JSXTransformer.js在新版本中已经弃用,改为browser.js但是很多的版本没有进行更新,我这个新学习的一直跟着报错,额。。。(一定要注意)
原版本:
<script src="../build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="../build/JSXTransformer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/jsx></script>
新版本:
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"
></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"
></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"
></script>
<script type="text/babel"></script>
(4)ReactJS组件
React允许将代码封装成 组件(component),然后想插入普通HTML标签一样,在网页中插入这个组件,React.createClass方法就用于生成一个组件类。
注意:
1.获取属性的值用的是this.props.属性名
2.创建的组件名称首字母必须大写
3.为元素添加css的class时,要用className
4.组件的style属性的设置方式要写成style={{width:this.state.width}}
使用中的各种注意事项:
1.在JSX中使用属性改变样式的时候,不能使用class,要改为className
<div className="div"></div>
2.在JSX中使用行内样式的时候使用{{}}而不是“”
<div style={{color:"red",margin:"20px"}}>*****</div>
Tip:
直接在标签上使用style属性时,要写成style={{}}是两个大括号,外层大括号是告知JSX这里是js语法,和真实DOM不同的是,属性值不能是字符串而必须为对象,需要注意的是属性名同样需要驼峰命名法。即margin-top要写成marginTop,属性之间以逗号间隔。
3.使用变量
JSX将两个花括号中的内容{...}渲染成动态值,花括号指明了一个JavaScript上下文环境————你在花括号中放置的任何内容都会被求值。
对于React构造对象的暂时理解为,可能现在跟正确的理解有偏差,但是我现在的理解为:
比如例子:
var HelloMessage = React.createClass({
render:function(){
return :<h1>Hello {this.props.name} get {this.props.votes} votes </h1>
}
});
var Lucy = {
name:"feng",
votes:"25"
}
ReactDOM.render(
<HelloMessage {Lucy}/>,
document.getElementById("example")
);
Lucy可以看作我们以前用的json对象, {this.props.name}就相当于得到了json中的name这个键的键值,其他同理;
而下面的ReactDOM.render()中得到的前面那个函数名,就是一个组件,模板插入时,会自动生成HelloMessage 的一个实例;
名词解释:
1.
render方法的作用:主要用来输出组件,所有组件类都必须有自己的render方法,用来输出组件。
在遇到html标签的时候,用<p>,<div>就用HTML规则解析,遇到代码块{}就用js规则解析;
2.
关于状态state:
组件与用户互动时,React将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态改变,从而触发重新渲染UI;
3.
getInitialState: 用于定义初始状态,也就是一个对象,这个对象可以通过this.state属性读取。当用户点击组件的时候,导致状态改变,this,setState方法就修改状态值,每次修改以后,子哦对那个调用this.render方法,再次渲染组件。
4.
this,props和this.state 都用来描述组件的特性,可能会产生混淆。this.props表示那些一旦定义,就不再改变的特性,this.state会随着用户互动而产生变化的特性;
比如:
style属性中的color,padding,margin都不会再改变,还有就是定义过的对象内容,就是this.props
this.state用户表示和用户互动的属性,比如点击次数,颜色变化啊。。。都是this.state
react.js学习之路一的更多相关文章
- react.js学习之路二
看react.js对我来说真的不是难不难的问题,问题是我的思路太难转变了,真是坑死我了,react里面的坑也很多.算了,这些抱怨没啥用,记录一下今天学习的内容. 今天看了to-do-list经典示例 ...
- react.js学习之路四
针对学习react.js中,我感觉最大的疑惑点就是bind(this)的绑定和指向问题了,我被这个问题弄的头昏,有时候调用组件的时候,直接显示undefined,不存在这个组件,当时的心情是崩溃的,整 ...
- react.js学习之路三
学习react.js,知识点整理: 1.props和state: props是相对于父级来说,固定的不会改变的内容.一般会先定义一个变量,则在父级中进行引用, var user = "liu ...
- react.js学习之路六
学习react中,我一直认为,总组件里面才有构造函数,但是我才发现我的观点是错误的,构造函数是可以出现在子组件里面的. 今天有一个错误是点击增加/减少input框里面 的数值 我一直在寻找input框 ...
- react.js学习之路五
最近没时间写博客,但是我一直在学习react,我发现react是一个巨大的坑,而且永远填不完的坑 关于字符串的拼接: 在react中,字符串的拼接不允许出现双引号“” ,只能使用单引号' ',例如这样 ...
- React.js学习
React.js学习之环境搭建 1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text Sublime Text:作为代码编辑器,Sublime Text的优点如下 ...
- 【温故知新】——BABYLON.js学习之路·前辈经验(二)
前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...
- React.js学习知识小结(一)
学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...
- React.js学习小结
最近一段时间都在学习React.js,感觉还不错,现在把自己的一些学习笔记记录一下,留着以后学习查看. 0.React全家桶(技术栈) 1.React主体 2.WebPack:grunt.gulp自动 ...
随机推荐
- java成神之——enum枚举操作
枚举 声明 枚举遍历 枚举在switch中使用 枚举比较 枚举静态构造方法 使用类来模拟枚举 枚举中定义抽象方法 枚举实现接口 单例模式 使用静态代码快 EnumSet EnumMap 结语 枚举 声 ...
- java成神之——数值操作BigDecimal,BigInteger,Random,SecureRandom
数值操作 数值新特性 包装类 浮点 BigDecimal BigInteger 数值本地化 随机数 假随机数 真随机数 播种 结语 数值操作 数值新特性 123_456 等价于 123456,增加可读 ...
- L1,L2范数和正则化 到lasso ridge regression
一.范数 L1.L2这种在机器学习方面叫做正则化,统计学领域的人喊她惩罚项,数学界会喊她范数. L0范数 表示向量xx中非零元素的个数. L1范数 表示向量中非零元素的绝对值之和. L2范数 表 ...
- 谈谈contentWindow 和contentDocument以及 iframe
1,contentWindow:是用来获取子窗口的window对象的,它兼容各大浏览器,用法如下 document.getElementById("iframeId").conte ...
- 「小程序JAVA实战」 小程序的事件(11)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-11/ 我们以前在web开发的时候,web页面也有一些相关的事件,当然小程序要接触屏幕要进行一些点击 ...
- 音频AAC编码浅析
/* * unsigned long nSampleRate, // 采样率,单位是bps * unsigned long nChannels, // 声道,1为单声道,2为双声道 * unsigne ...
- Python基础学习五 内置函数
1.函数补充: 1)函数返回值return可以有多个 2)补充示例: nums = [0,1,2,3,4,5,6,7,8] #如何将list里面的元素变为字符串类型 new_nums = [str(x ...
- linux上的第一个c语言程序
1.编辑源文件 输入命令如下: root@ubuntu:/home/amy# vi hello.c 文件内容如下: #include<stdio.h> int main() { print ...
- 游戏引擎架构Note1
[游戏引擎架构] 1.第14章介绍的对游戏性相关系统的设计非常有价值.各个开发人员几乎都是凭经验设计,很少见有书籍对这些做总结. 5.通过此书以知悉一些知名游戏作品实际上所采用的方案. 6.书名中的架 ...
- laravel 验证表单信息
1控制器验证 $this->validate($request,[ 'Student.name'=>'required|min:2|max:20', 'Student.age'=>' ...