本文仅作备忘，详情请查看官方文档

用户定义的组件必须以大写字母开头

以小写字母开头的元素代表一个HTML内置组件，比如<div>或者<span>会生成对应的字符串'div'或者'span'传递给React.createElement（作为参数）。大写字母开头的元素则对应着在JavaScript引入或自定义的组件，如<Foo />会编译为React.createElement(Foo)。


我们建议使用大写字母开头命名自定义组件。如果你确实需要一个以小写字母开头的组件，则在JSX中使用它之前，必须将它赋值给一个小写字母开头的变量。


例如，以下的代码将无法按预期进行：

import React from 'react';

//错误！组件应该以大写字母开头：
function hello(props) {
	//正确！这种<div>的使用是合法的，因为div是一个有效的HTML标签
	return <div>Hello {props.toWhat}</div>
}

function HelloWorld() {
	//错误！React会认为<hello />是一个HTML标签，因为它没有以大写字母开头；
	return <hello toWhat="World" />
}

属性展开


如果你已经有了一个props对象，你可以使用展开运算符...来在JSX中传递整个props对象。以下两个组件是等价的：

function App1() {
	return <Greeting firstName="Ben" lastName="Hector">;
}
function App2() {
	const props = {firstName: 'Ben',lastName: 'Hector'};
	return <Greeting {...props} />
}

你还可以选择只保留当前组件需要接收的props，并使用展开运算符将其他props传递下去。

const Button = props => {
	const { kind,...other } = props;
	const className = kind === 'primary' ? 'primaryButton' : 'SecondaryButton';
	return <button className={className} {...other} />;
};

const App = () => {
	return (
		<div>
			<Button kind="primary" onClick={() => console.log("clicked!")}>
				Hello World!
			</Button>
		</div>
	);
};

布尔类型，Null以及Undefined将被忽略


false,null,undefined.true是合法的子元素。但它们并不会被渲染。以下的JSX表达式渲染结果相同：

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

这有助于依据特定条件来渲染其他的React元素。例如，在以下JSX中，仅当showHeader为true时，才会渲染<Header />组件：

<div>
	{showHeader && <Header />}
	<Content />
</div>

值得注意的是一些"falsy"值，仍然会被React渲染。例如，以下代码并不会像你预期那样工作，因为当props.messages是空数组时，0仍然会被渲染：

<div>
	{props.message.length &&
		<MessageList messages={props.messages} />
	}
</div>

要解决这个问题，确保 && 之前的布尔表达式总是布尔值：

<div>
	{props.message.length >0  &&
		<MessageList messages={props.messages} />
	}
</div>