React书写中的注意事项

1. 关于React注释

示例:

ReactDOM.render(
  /*注释1 */
  // 注释2
  <h2>标题 {/*注释*/}</h2>,
  document.getElementById('example')
);

2. JSX语法中如果包含多个HTML标签,最外层需要有一个元素包裹。

var Content = React.createClass({
  render: function () {
    return (
      <div>
        <input type="text" value={this.props.myDataProp}
        onChange={this.props.updateStateProp}/>
        <h4>{this.props.myDataProp}</h4>
      </div>
    );
  }
});

3. JSX中不能使用if else语句,但可以使用三元运算表达式来替代

ReactDOM.render(
  <div>
    <h1>{i == 1 ? 'True!' : 'False'}</h1>
  </div>
  ,
  document.getElementById('example')   );

4. React推荐使用内联样式,使用驼峰(camelCase)语法来设置内联样式,React会在指定元素数字后自动添加px。

var myStyle = {
  fontSize: 100,
  color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>My Title</h1>,
    document.getElementById('example')
);

5. class和for标识符使用

由于 JSX 就是 JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,React DOM 使用 classNamehtmlFor 来做对应的属性。

6. 关于JSX语法

React 不是一定要使用 JSX 语法,可以直接使用原生 JS。JSX语法看上去像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,所以建议使用 JSX 是因为它能精确定义和反应组件及属性的树状结构,使得组件的结构和组件之间的关系看上去更加清晰。方便MXML和XAML的开发人员 – 因为他们已经使用过类似的语法;

7. HTML标签和React组件

React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。 要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'))

React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签

8. ReactDOM的render方法里的第二个参数必须是个DOM对象

也就是说我们可以借助原生的获取DOM的方法,或者通过其他类库(jQuery,Dojo等)获取后再转化为DOM对像。

ReactDOM.render(
  <HelloMessage/>,
  document.getElementById('example') //或者$('#example')[0]
)

参考链接:

  1. 寻寻觅觅 -- Christine Welch
  2. Just the Way You Are -- Bruno Mars
  3. Despacito(Remix) -- Luis Fonsi;Daddy Yankee;Justin Bieber
  4. 没有什么不同 -- 曲婉婷
  5. 故乡--许巍
  6. Jar Of Love -- 曲婉婷
  7. I Really Like You -- Carly Rae Jepsen