首页 > 代码库 > react.js学习之路一
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="http://www.mamicode.com/build/react.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.mamicode.com/build/JSXTransformer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/jsx></script>
新版本：
<script src=http://www.mamicode.com/"https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script><script src=http://www.mamicode.com/"https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script><script src=http://www.mamicode.com/"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学习之路一