【React 技术】JSX 在企业级项目的运用 and 一个元素渲染 demo
JSX
它被称为 JSX,是 JavaScript 的语法扩展。我们建议在 React 中使用 JSX。JSX 可以很好地描述 UI 应该呈现它应该具有的基本交互形式。JSX 可能会让人想起模板语言,但它具有 JavaScript 的所有功能。
React 认为渲染逻辑与其他 UI 逻辑本质上是耦合的。例如,您需要在 UI 中绑定和处理事件,在某个时间状态发生变化时通知 UI,并在 UI 中显示准备好的数据。
在 JSX 语法中,你可以在 React 不会人为地将标记和逻辑分离到不同的文件中,而是将它们存储在一个称为“组件”的松散耦合单元中,以实现关注点的分离。
编译后,JSX 表达式将被转换为一个普通的 JavaScript 函数调用,并在获取其值后获得 JavaScript 对象。换言之,可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 分配给变量,作为参数传入 JSX,并从函数返回 JSX:
注意:因为 JSX 语法比 HTML 更接近 JavaScript,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不是使用 HTML 属性名称的命名约定。例如,JSX 中的类变为 className,tabindex 变为 tabindex。
React
ProductTable 的标头(包含“Name”和“Price”的部分)不是一个单独的组件。这只是一个偏好选择,如何处理这个问题一直存在争议。就本例而言,由于标头仅起到呈现数据集合的作用,这与 ProductTable 一致,因此我们仍将其保留为 ProductTable 的一部分。但是,如果标头太复杂(例如,我们需要为其添加排序函数),则有必要将其用作独立的 ProductTableHeader 组件。
实际上,由于经常向用户展示 JSON 数据模型,如果模型设计得当,UI(或组件结构)将逐一对应于数据模型。这是因为 UI 和数据模型都倾向于遵循相同的信息结构。将 UI 分成组件,其中每个组件都需要匹配数据模型的一部分。
FilterableProductTable(橙色):整个示例应用程序搜索栏(蓝色):接受所有用户输入 ProductTable(绿色):根据用户输入显示数据内容和过滤结果 ProductCategoryRow(天蓝色):显示每个产品类别的标题 ProductRow(红色):每行显示一个产品
Toolbar 组件接受一个额外的“theme”属性,然后传递给 ThemedButton 组件。如果应用中每一个单独的按钮都需要知道 theme 的值,这会是件很麻烦的事,
因为必须将这个值层层传递所有组件。
主要应用场景是不同级别的许多组件需要访问相同的数据。请谨慎使用,因为这会使组件的可重用性更差。如果最终只有 Avatar 组件真正需要用户和 avatarSize,那么层层传递这两个道具是非常多余的。一旦组件需要更多顶级组件的道具,你就必须在中间一个一个地添加它们,这将变得非常麻烦。
元素渲染 demo
我们称其为“根”DOM 节点,因为该节点中的所有内容都将由 React DOM 管理。使用 React 构建的应用程序通常只有一个根 DOM 节点。如果要将 React 集成到现有应用程序中,可以在应用程序中包含任意数量的独立根 DOM 节点。
要将 React 元素渲染到根 DOM 节点,只需将它们传递到 ReactDOM。render():在实践中,大多数 React 应用只会调用一次 ReactDOM.render()。
当提供程序的值更改时,将重新呈现其所有内部消耗组件。提供程序及其内部使用者组件不受 shouldComponentUpdate 函数的约束,因此使用者组件也可以在其祖先组件退出更新时进行更新。
版权声明: 本文为 InfoQ 作者【黎燃】的原创文章。
原文链接:【http://xie.infoq.cn/article/a5ca6f48a322ef8c81f25f3cb】。文章转载请联系作者。
评论