写点什么

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

作者:黎燃
  • 2022-11-29
    内蒙古
  • 本文字数:2015 字

    阅读完需:约 7 分钟

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

发布于: 刚刚阅读数: 3
用户头像

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

评论

发布
暂无评论
【React技术】JSX在企业级项目的运用and一个元素渲染demo_前端_黎燃_InfoQ写作社区