jsx语法相关

jsx语法中,如果我们要使用自己创建的组件,直接使用标签名.如果使用自己的组件,组件名必须大写开头.

小写的则为html标签.注意className和htmlFor(因为for和class是关键字).

jsx 注释:

{} ->js表达式

{/* 这里是注释 */}

// 这里是单行注释

解析html标签:

不需要自动转义:

   dangerouslySetInnerHTML,__html

深入理解JSX:

jsx代码会在运行或者打包阶段,被bable进行编译,生成浏览器可以识别的代码.

一个页面或者组件的渲染逻辑,应该与其他的UI逻辑放在一起,比如:事件的绑定,状态改变后渲染内容的变化,就被称为组件.

在JSX中使用表达式:

  • jsx本身也是表达式:
    const element <h1>Hello World</h1>
  • 在属性中使用表达式:
    <MyComponent foo =  {1+2+3+4}/>
  • 延展属性:
    const props = {firstName:'Ben',lastName:'Hector'};
    const greeting = <Greeting {...props}/>
  • 表达式作为子元素
    const element = <li>{props.message}</li>

约定:自定义组件以大写字母开头

1.React认为小写的tag是原生DOM节点,如div
2.大写字母开头的为自定义组件
3.JSX标记可以直接使用属性语法,例如<menu.Item/>