react.js学习之路一

Posted liumcb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 js踩坑之路

flex10使用新一代js模板引擎NornJ提升React.js开发体验

译丨Yarn - Javascript 新一代套件管理

React Native 爬坑之路