【React 技术】JSX 在企业级项目的运用 and 一个元素渲染 demo

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 函数的约束，因此使用者组件也可以在其祖先组件退出更新时进行更新。