JSX
它被称为JSX，是JavaScript的语法扩展。我们建议在React中使用JSX。JSX可以很好地描述UI应该呈现它应该具有的基本交互形式。JSX可能会让人想起模板语言，但它具有JavaScript的所有功能。
const element = <h1>Hello, world!</h1>;
React认为渲染逻辑与其他UI逻辑本质上是耦合的。例如，您需要在UI中绑定和处理事件，在某个时间状态发生变化时通知UI，并在UI中显示准备好的数据。
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
在 JSX 语法中，你可以在React不会人为地将标记和逻辑分离到不同的文件中，而是将它们存储在一个称为“组件”的松散耦合单元中，以实现关注点的分离。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);编译后，JSX表达式将被转换为一个普通的JavaScript函数调用，并在获取其值后获得JavaScript对象。
换言之，可以在if语句和for循环的代码块中使用JSX，将JSX分配给变量，作为参数传入JSX，并从函数返回JSX：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
注意：
因为JSX语法比HTML更接近JavaScript，所以React DOM使用camelCase（小驼峰命名）来定义属性的名称，而不是使用HTML属性名称的命名约定。
例如，JSX中的类变为className，tabindex变为tabindex。
React
ProductTable的标头（包含“Name”和“Price”的部分）不是一个单独的组件。这只是一个偏好选择，如何处理这个问题一直存在争议。
就本例而言，由于标头仅起到呈现数据集合的作用，这与ProductTable一致，因此我们仍将其保留为ProductTable的一部分。
但是，如果标头太复杂（例如，我们需要为其添加排序函数），则有必要将其用作独立的ProductTableHeader组件。
实际上，由于经常向用户展示JSON数据模型，如果模型设计得当，UI（或组件结构）将逐一对应于数据模型。
这是因为UI和数据模型都倾向于遵循相同的信息结构。
将UI分成组件，其中每个组件都需要匹配数据模型的一部分。
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];FilterableProductTable（橙色）：整个示例应用程序
搜索栏（蓝色）：接受所有用户输入
ProductTable（绿色）：根据用户输入显示数据内容和过滤结果
ProductCategoryRow（天蓝色）：显示每个产品类别的标题
ProductRow（红色）：每行显示一个产品
Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
class App extends React.Component {
render() {
return <Toolbar theme="dark" />;
}
}
function Toolbar(props) {
return (
<div>
<ThemedButton theme={props.theme} />
</div>
);
}
class ThemedButton extends React.Component {
render() {
return <Button theme={this.props.theme} />;
}
}因为必须将这个值层层传递所有组件。
主要应用场景是不同级别的许多组件需要访问相同的数据。请谨慎使用，因为这会使组件的可重用性更差。
如果最终只有Avatar组件真正需要用户和avatarSize，那么层层传递这两个道具是非常多余的。一旦组件需要更多顶级组件的道具，你就必须在中间一个一个地添加它们，这将变得非常麻烦。
元素渲染demo
<div id="root"></div>我们称其为“根”DOM节点，因为该节点中的所有内容都将由React DOM管理。
使用React构建的应用程序通常只有一个根DOM节点。如果要将React集成到现有应用程序中，可以在应用程序中包含任意数量的独立根DOM节点。
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));要将React元素渲染到根DOM节点，只需将它们传递到ReactDOM。render（）：
在实践中，大多数 React 应用只会调用一次 ReactDOM.render()。
当提供程序的值更改时，将重新呈现其所有内部消耗组件。提供程序及其内部使用者组件不受shouldComponentUpdate函数的约束，因此使用者组件也可以在其祖先组件退出更新时进行更新。
