因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用
camelCase小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。
例如，class变成了className，而tabindex则对应着tabIndex。React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。
元素是构成 React 应用的最小单位。与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。
当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。
组件名称必须以大写字母开头。
例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。组件的返回值只能有一个根元素。
无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。
所有的React组件必须像纯函数（它没有改变它自己的输入值，当传入的值相同时，总是会返回相同的结果。）那样使用它们的props。状态与属性十分相似，但是状态是私有的，完全受控于当前组件。
关于 setState() 这里有三件事情需要知道:
- 不要直接更新状态
- 状态更新可能是异步的
- 状态更新合并
- React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:
- React事件绑定属性的命名采用驼峰式写法，而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。
你必须谨慎对待 JSX 回调函数中的
this，类的方法默认是不会绑定this的。如果你忘记绑定this.handleClick并把它传入onClick, 当你调用这个函数的时候this的值会是undefined。React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符
if或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。
你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。
条件渲染的另一种方法是使用 JavaScript 的条件运算符
condition ? true : false。在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。
组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。
Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的key，当元素没有确定的id时，你可以使用他的序列号索引index作为key。
如果列表项目的顺序可能会变化，我们不建议使用索引来用作键值，因为这样做会导致性能的负面影响，还可能引起组件状态问题。如果你想要了解更多，请点击深度解析key的必要性。如果你选择不指定显式的键值，那么React将默认使用索引用作为列表项目的键值。
数组元素中使用的key在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键。
key会作为给React的提示，但不会传递给你的组件。如果您的组件中需要使用和key相同的值，请用其他属性名显式传递这个值。
我们通过使react变成一种单一数据源的状态来结合二者。React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为“受控组件”。
在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。然后，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的共同祖先中。你应该依赖 自上而下的数据流，而不是尝试在不同组件中同步状态。
React 中的数据流是单向的，并在组件层次结构中向下传递。
用户定义组件必须首字母大写
在既包含开始标签又包含结束标签的 JSX 表达式中，这两个标签之间的内容被传递为专门的属性：props.children。有几种不同的方法来传递子代：
- 字符串字面量
<MyComponent>Hello world!</MyComponent>
- JSX子代
<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>
- JavaScript 表达式作为子代
<MyComponent>foo</MyComponent>
<MyComponent>{'foo'}</MyComponent>
- 函数作为子代
function Repeat(props) {
let items = [];
for (let i = 0; i < props.numTimes; i++) {
items.push(props.children(i));
}
return <div>{items}</div>;
}
function ListOfTenThings() {
return (
<Repeat numTimes={10}>
{(index) => <div key={index}>This is item {index} in the list</div>}
</Repeat>
);
}
- 布尔值、Null 和 Undefined 被忽略
false、null、undefined 和 true 都是有效的子代，只是它们不会被渲染。下面的JSX表达式将渲染为相同的东西：
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
<div>
{props.messages.length && <MessageList messages={props.messages} />}
</div>
要解决这个问题，确保请&&前面的表达式始终为布尔值：
<div>
{props.messages.length > 0 && <MessageList messages={props.messages} />}
</div>
相反，如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :
<div>
My JavaScript variable is {String(myVariable)}.
</div>
