如何写出漂亮的React组件

以Arrow Function的方法替代Render语句(4行)

实际上，SFC最迷人的处所不仅仅是其代码量的削减，还有就是对于可读性的进步。SFC模式本身就是所谓纯组件的一种最佳实践范式，而移除了构造函数并且将_handleClick()这个点击事宜回调函数提掏出组件外，可以使JSX代码变得加倍纯粹。另一个不错的处所就是SFC以Arrow Function的方法来定义了输入的Props变量，即以Object Destructring语法来声明组件所依附的Props:

const RelatedSearch = ({ relatedQueries, onClick }) =>

如许不仅可以或许使组件的Props加倍清楚明白，还可以或许避免冗余的this.props表达式，大年夜而使代码的可读性更好。

最后，我还想要强调下固然我很推许SFC，不过也不克不及滥用它。最合适应用SFC的处所就是之前你用纯组件的处所。在Walmart Labs中，我们应用Redux来治理应用的状况，也就意味着我们绝大年夜部分的组件都是纯组件，也就给了SFC广阔的应用空间。一般来说，有以下特点的组件式绝对不合适应用SFC的:

须要自定义全部组件的生命周期治理
须要应用到refs

Conditional Components

JSX本身不支撑if表达式，不过我们可以应用逻辑表达式的方法来避免将代码切分到不合的子模块中，大年夜概是如下样子:

render() { 
 
  <div class="search-results-container"> 
 
    {this.props.isGrid 
 
      ? <SearchResultsGrid /> 
 
      : <SearchResultsList />} 
 
  </div> 
 
}

render() { 
 
  <div class="search-results-list"> 
 
    {this.props.isSoftSort 
 
      ? <SoftSortBanner /> 
 
      : null 
 
    } 
 
  </div> 
 
}

如许子确切能起感化，不过看上去感到滚滚的。我们可以选用另一种加倍语义化与友爱的方法来实现这个功能，即应用逻辑与表达式然后返回组件:

不过这一点也是见仁见智，每小我按照本身的爱好来就行了。

Arrow Syntax In React And Redux

该函数的功能就是返回JSX对象，我们也可以忽视return语句:

ES2015里包含了不少可口的语法糖，我最爱的就是那个Arrow Notation。这个特点在编写组件时很有感化：

const SoftSort = ({ hardSortUrl, sortByName, onClick }) => 
 
  <div className="SearchInfoMessage"> 
 
    Showing results sorted by both Relevance and {sortByName}. 
 
    <Link 
 
      href=http://developer.51cto.com/art/201709/{`?${hardSortUrl}`} 
 
      onClick={(ev) => onClick(ev, hardSortUrl)}> 
 
      Sort results by {sortByName} only 
 
	
			 3/6   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　第一次使用苹果操作系统需要掌握哪些知识？
            
            用 AirDrop 可以便利地在 Mac与Mac、iPhone与iPhone 甚至 Mac 与 iPhone  之间无线发送分享照片、视频、网站、地位等内容。速度还很快。应用时须要开启Wi-Fi和蓝牙。第一次应用苹不雅操作>>>详细阅读


本文标题：如何写出漂亮的React组件
地址：http://www.17bianji.com/lsqh/37109.html
 1/2    1