最近学习React,碰到一些细节需要注意的地方。所以记录一下,内容很零散,后期再整理。
1.关于JSX 语法
React 不是一定要使用 JSX 语法,可以直接使用原生 JS。JSX语法看上去像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,所以建议使用 JSX 是因为它能精确定义和反应组件及属性的树状结构,使得组件的结构和组件之间的关系看上去更加清晰。方便MXML和XAML的开发人员 – 因为他们已经使用过类似的语法;
2.HTML 标签 和 React 组件
在JSX语法中,遇到HTML标签(以<开头)就用HTML规则解析,遇到代码块(以{开头)就用JavaScript规则解析。React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
要渲染 React 模块,只需创建一个大写字母开头的本地变量。
React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
3.不建议作为 XML 属性名
由于 JSX 就是 JavaScript,一些标识符像 class
和 for
不建议作为 XML 属性名。作为替代,React DOM 使用 className
和 htmlFor
来做对应的属性。
4.大小写敏感
上面说了JSX是一个XML语法的预处理器。 XML 语法对大小写敏感,所以习惯了HTML的同学要特别注意这点,否则折腾了半天,都不知道错在哪里。比如:
这里绑定click事件的onClick
中C
是大写的。
本文转自:http://www.css88.com/archives/5600 谢谢~