学习React系列（二）——深入了解JSX

1、JX实际上是React.createElement(component,props,...children)的语法糖

2、JSX判断是否为react组件的依据是标签首字母为大写（所以要求用户自定义的组件必须首字母大写）

3、JSX编译需要使用React.createElement方法和被编译的组件，所以在该作用域中需要存在React和组件对象，若不存在直接导入

4、可以使用  .   这个符号来获取react组件

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

5、JSX中的标签不能是表达式的形式

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Wrong! JSX type can't be an expression.
  return <components[props.storyType] story={props.story} />;
}


import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // Correct! JSX type can be a capitalized variable.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

6、JSX中的某个属性会为{}中的计算结果值

7、如果JSX中的某个组件设立了属性但是没赋值，该属性的默认值为true

8、传播属性（这一部分不是很理解，感觉没什么实质上的作用）

9、JSX包含的内容

   （1）字符串

jsx会省略内部字符串首尾空白，若字符串出现换行，则通过一个空白来链接两行内容

   （2）JSX元素

也可以包含一个数组

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

 

   （3）javascript表达式

表达式需要放在{}之中

   （4）方法

该方法的返回值为一段字符串、一个react元素，一个数组包含字符串或者react元素

10、booleans,null和undefined在jsx中并不渲染

若需要在jsx中展示false、true、null或者undefin则需要先把他们转变为字符串