在项目中使用ReactJS也已经有大半年了,收获很多也踩过不少坑。不想把这个系列写成抄书似的罗列,旨在总结些常用的技巧及常见的坑,以帮助初心者快速入门,想系统学习的同学还是多阅读文档。
JSX本质上与HTML并多大没关系,标题所说的不同是指语法上的不同。正因为二者比较相似,初心者才会在很多细节地方混淆。
JSX实际是一种语法糖,最终会转换成JavaScript代码,首先我们看一段React最简单的组件结构:
1 2 3 4 5 6 | var HelloReact = React.createClass({
render: function () {
return (<h1 className='title'>Hello React</h1>);
}
});
React.render(<HelloReact />, document.querySelector(#container));
|
ログイン後にコピー
首先我们创建了一个只包含h1标签的组件,并将其保存在名为HelloReact的变量中,之后将其作为标签名,渲染到id为"container"的DOM节点中。
这里要注意的是,组件保存的变量名首字母必须大写,否则无法渲染成功。接下来看下jsx被转义后的语法是什么样的:
1 2 3 4 5 6 | var HelloReact = React.createClass({
render: function () {
React.createElement( 'h1' , {className: 'title' }, 'Hello world' )
}
});
React.render(<HelloReact />, document.querySelector(#container));
|
ログイン後にコピー
可以看到使用JSX可以大大简化编写难度,这点在多个组件嵌套时更加明显。正因为JSX的存在使得新手对React的学习成本大大降低。
*此文的示例多是React老版本的语法,新版本的React移除了JSXTransformer.js文件,增加了react-dom.js文件。 博主会在之后的博文中详述新版本的语法及工程创建方法,当然最快的方式还是查阅官方更新文档。
下面列出相似但又不同的地方:
类名
HTML
JSX
模板
HTML
1 2 | var name = 'Daryl',
templ = '<p>' + name + '</p>';
|
ログイン後にコピー
JSX
1 2 3 | render: function ()
{ var name = 'Daryl'; return (<p>{name}</p>);
}
|
ログイン後にコピー
在JSX的语法中,大括号括起来的部分会被当做JavaScript代码来解析。不仅仅是在标签之间,在class、style等等属性赋值时均可以使用大括号来进行。需要注意的是,大括号之之间只能写表达式,而不能写判断等语句。
1 2 3 4 5 6 7 8 9 | render: function () {
var a = 1;
return (<p>{++a}</p>);
}
render: function () {
var a = 1;
return (<p>{ if (true) {a++;}}</p>
}
|
ログイン後にコピー
对于需要判断状态的情况可以多使用逻辑运算符(||、&&等)以及三目运算符来完成。
1 2 3 4 5 | render: function ()
{
var status = true;
return (<div className={status ? 'styles1' : 'styles2'}></div>);
}
|
ログイン後にコピー
如果判断的逻辑比较复杂,简单的表达式无法满足要求,还是使用保存于变量中方法。
1 2 3 4 5 | render: function () {
var nowDate = new Date (),
today = nowDate.getFullYear() + '.' + Number(nowDate.getMonth()+1) + '.' + nowDate. getDate ();
return (<p>Today is {today}.</p>);
}
|
ログイン後にコピー
内嵌样式
HTML
1 | <div style= "width:30px;height:30px;background-color:red" ></div>
|
ログイン後にコピー
JSX
1 | <div style={{width:30,height:30,backgroundColor:'red'}}></div>
|
ログイン後にコピー
可以看到JSX中的style属性并不是简单的接收一个字符串,那两层大括号是什么意思呢。其本质是接收一个对象作为参数,最外层的大括号是之前说过的用来解析JS代码的区域,而里面的只是个对象而已。
具体的样式属性名称类似jQuery中的驼峰命名方式。同时可以使用以下的写法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | React.create({
render: function () {
return (<div style={styles.container}>
<p style={styles.title}>标题</p>
<p style={styles.content}>内容</p>
</div>);
}
});
var styles = {
container: {
textAlign: 'center'
},
title: {
fontSize: 20,
fontWeight: bold,
color: '#000'
},
content: {
fontSize: 13,
color: 'rgba(0,0,0,0.5)'
}
};
|
ログイン後にコピー
以上这种方式让样式和内容的耦合降低,代码维护也更方便。只不过在使用React开发中,可能更多的人还是习惯使用外联样式表来编写CSS。
其实这种写法应用最多的是在开发React Native项目中,通过StyleSheet创建一个样式集,因为React Native的项目不像普通的WEB工程可以很方便的引入样式表。
事件绑定
HTML
1 | <div onclick= "myFunction()" ></div>
|
ログイン後にコピー
JSX
1 2 3 4 5 6 7 8 | React.createClass({
render: function () {
return (<div onClick={this.handlerClick}>点我!</div>);
},
handlerClick: function () {
alert('让你点你就点?');
}
});
|
ログイン後にコピー
在JSX中事件属性都是以驼峰命名的方式,HTML中的内嵌事件的编写方式在JSX语法中是无效的。
列表
列表是现在的web应用中是不可缺少的一种结构。传统的方式通常为请求到数据集,通过JS遍历生成节点,添加到DOM中:
1 2 3 4 5 6 | var dataArr = [1,2,3,4,5,6,7],
templ = '';
dataArr.forEach( function (item, index) {
templ += '<div>' + item + '</div>';
});
$('body').append(templ);
|
ログイン後にコピー
如上,是我们使用的一种比较"原始"的方法。React其实是一个状态机,其中数据结构和视图绑定在一起,一切以状态来控制,通过改变数据层触发DOM更改。
虽然在React中也可以直接操作DOM,但是并不提倡,只有在万不得已或者某个东西加入到状态中十分繁琐、代价比较大的情况下才去考虑。
下面我们看下在JSX中是如何渲染列表的:
1 2 3 4 5 6 7 8 | render: function () {
var dataArr = [1,2,3,4,5,6,7],
jsxArr = [];
dataArr.forEach( function (item, index) {
jsxArr.push(<li>{item}</li>);
});
return (<ul>{jsxArr}</ul>);
}
|
ログイン後にコピー
上例中jsxArr实为一个每项均为JSX标签模板的数组,这段代码反映出React中一个很重要的特性,JSX标签之前的多子节点可以以数组的方式插入,理解这点就能很快地绕过了React中列表的坑。只是在实际开发中我们通常使用下面的方式:
1 2 3 4 5 6 7 8 9 10 | render: function () {
var dataArr = [1,2,3,4,5,6,7];
return (<ul>
{
dataArr.map( function (item, index) {
return (<li>{item}</li>);
});
}
</ul>);
}
|
ログイン後にコピー
当然在列表模板结构比较复杂的情况下,还是建议在return之前生成好,并赋值给某一变量,return时在标签之间插入该变量。
除了上述这些不同点以外,JSX还有着自己独有的某些属性,比如:ref、key等,博主会在之后的博文里阐述用法。
以上がJSXはHTMLとは異なりますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。