React中怎么实现条件渲染

今天就跟大家聊聊有关React中怎么实现条件渲染,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站建设、网站制作、定安网络推广、重庆小程序开发、定安网络营销、定安企业策划、定安品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供定安建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com

1. if-else

我们可以将 if-else 条件逻辑应用于React中的JSX。请记住,JSX在执行之前已编译为JS,因此我们实际上是在用JS代码编写。

/ Example /

var globalVar = true function App() {   if(globalVar) {     return <div>If Rendering</div>   } else {     return <div>Else Rendering</div>   } }

/ 性能 /

if-else 语句可能会导致React中的渲染浪费。这在中小型应用中可能感觉不到,但在有成百上千组件的大型应用中,性能拖累会相当明显。

让我们研究以下示例:

render() {   if(props.showA) {     return (       <A />       <B />       <C />     )       }   return (     <B />     <C />   ) }

根据条件加载组件A,B,C。

如果 showA prop为真,则渲染A,B,C。如果 showA prop 为假,则跳过A并仅渲染B和C。

这里的问题来自React的差异算法。这个算法是React用来知道何时避免浪费渲染的算法。

在初始 showA 为 true 时,组件将按照其结构A-> B-> C进行渲染。只要 showA 为 true  且其props不变,React就不会重新渲染。

但是,当 showA 变为 false  时,呈现结构将发生变化,结构将为B->C。现在,React会看到一个与之前的结构不同的结构,并且会重新渲染(un-mount 和  re-mount)B和C组件,即使它们的props/state保持不变,不需要重新渲染。这是一种浪费的重新渲染。

2.三元运算符

三元运算符是“if-else”条件的缩写。第一部分说明条件,第二部分则为返回值(如果为true),最后一部分为返回值(如果为false)。

condition ? true_cond : false_cond

/ Example /

let cond = true function App() {   return (     {cond ?       <div>If Rendering</div>      :      <div>Else Rendering</div>     }   ) }

3.Element变量

Element变量包含JSX元素,因此可以在React组件中的任何地方使用。Element变量使你的代码更易于阅读和理解,因为它消除了组件中的多个return语句。

实施此操作的标准方法:

function App(props) {   if(props.loggedIn) {     return <div>Logged In</div>   } else {     return <div>Not Logged In</div>   } }

在上面的组件中,我们有多个return语句。我们在JSX中使用 if-else 来有条件地呈现部分UI。

我们可以使用Element变量来存储要在条件语句的每个结果上返回的元素。

/ Example /

function App(props) {   let element   if(props.loggedIn) {     element = <div>Logged In</div>   } else {     element = <div>Not Logged In</div>   }   return element }

根据 if-else 语句的求值,我们使用 element变量 保存要渲染的最后一个元素。

通过使用Element变量,我们使我们的代码更简洁易读。

/ 性能 /

这里的问题与上面的 if-else 项中提到的问题相同。

4. AND运算符(&&)

AND运算符用于检查其左右表达式均正确。

left_expr && right_expr

如果表达式解析为true,则AND运算符将返回正确表达式的求值。

Example:

(true && "nnamdi") // "nnamdi" (true && 1234) // 1234

另一方面,如果表达式解析为false,则AND运算符将返回false:

(false && "nnamdi") // false (false && 1234) // false

如果是这种情况,我们可以使用此AND运算符在React中有条件地呈现JSX。

/ Example /

function App(props) {   return (     <div>     {       props.loggedIn &&        <h4>You're logged in as {props.data.username}</h4>     }     </div>   ) }

我们在JSX中使用AND运算符。花括号使我们能够在JSX中添加和评估JS表达式。

/ 性能 /

虽然它和前面两种条件渲染的方式在本质上没有什么区别,但带AND(&&)运算符的JSX表达式被认为是一个更好的选择,因为它在有条件地返回和渲染元素的同时,强制返回相同的结构。

5.返回null

我们可以将组件设置为返回 null 值而不是JSX表达式,以便对其进行评估,但不会渲染任何内容。

当组件返回null时,它将阻止React安装该组件。

function App(props) {   if(props.noRender)     return null    return (     <div>App Component</div>   ) }

如果设置了noRender属性,则此组件返回null。因此,如果我们不希望App组件渲染,则将设置noRender道具 。

看完上述内容,你们对React中怎么实现条件渲染有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。

分享标题:React中怎么实现条件渲染
转载源于:https://www.cdcxhl.com/article36/pcegsg.html

成都网站建设公司_创新互联,为您提供企业建站品牌网站制作App设计动态网站搜索引擎优化微信公众号

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

商城网站建设