本文是个人学习笔记,例子都是来自React Native官网。之前不是做前端的,没有使用过react,要学习react native做混合开发,react,包括react jsx还是得补补。
react和react jsx
react是一个js库。有很多可以用的方法,react jsx是对javascript进行封装,提供一种类似于xml格式的语句,跟html也类似,使得在js中创建、修改元素,建立元素之间的层级关系变得更加直观方便。jsx在执行的时候会被转换为js语句。
例如:
<input type=“button"/>;
这样就相当于调用了
React.createElement()
方法来创建一个button
在jsx中可以使用js语句,但是要用花括号括起来,比如:
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
jsx中,元素可以直接嵌套,这个和html、xml都是一样的。
jsx中,布尔值用{true}和{false}表示。
jsx中,插入注释,就是用/* 注释 */
react和jsx混合起来,数据绑定的实现
假如有一个这样的数据(js定义的数据)
var data = [
{
id: 1, author: "Pete Hunt", text: "This is one comment"},
{
id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
希望建立一个列表,其中每一项,展示以上data中的一条数据:
于是定义一个CommentList的组件,其中每一项是一个Comment对象(假设之前已经定义好了Comment组件)。
var CommentList = React.createClass({
//创建一个组件,或者理解成创建一个类也可以
render: function() {
//render函数是在组件声明周期中会被自动调用的方法之一,作用是返回组件的内容
var commentNodes = this.props.data.map(function(comment) {
//这个comment参数对于data中的一条记录,map函数会为this.props.data的每一条记录调用一次这个function(comment)方法。每次调用都返回一个Comment组件对象,最终返回一个包含多个Comment的数组。
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}//包含CommentNodes,由于是js,所以用花括号括