如何写出漂亮的React组件

在Walmart Labs的产品开辟中，我们进行了大年夜量的Code Review工作，这也包管了我有机会大年夜很多优良的工程师的代码中进修他们的代码籽扒箅样式。在这篇博文里我会分享出我最观赏的五种组件模式与代码片。不过我起首照样要谈谈为什愦我们须要执着于进步代码的浏览体验。就似乎你有很多种方法去打扮一只猫，如不雅你把你的爱猫打扮成了如下如许子:

你或许可以认为萝卜青菜各有所爱，然则代码本身是应当包管其可读性，特别是在一个团队中，你的代码是注定要被其他人浏览的。电脑是不会在意这些的，不管你朝它们扔以前什么，它们都邑老诚实实的解释，然则你的队友们可不会如许，他们会把丑恶的代码扔回到你的脸上。而所谓的Pretty Components，应当包含如下的特点:

即使没有任何注释的情况下也易于懂得
比乱麻般的代码有更好的机能表示
更易于进行Bug追溯
简洁清楚明了，一句顶一万句

SFC:Stateless Functional Component

我认为我们在开辟中经常忽视掉落的一个模式就是所谓的Stateless Functional Component，不过这是我小我最爱的React组件优化模式，没有之一。我爱好这种模式不仅仅因为它们可以或许削减大年夜量的模板代码，并且因为它们可以或许有效地进步组件的机能表示。总而言之，SFC可以或许让你的应用跑的更快，长的更帅。

直不雅来看，SFC就是指那些仅有一个衬着函数的组件，不过这简单的改变就可以避免很多的无意义的检测与内存分派。下面我们来看一个实践的例子来看下SFC的具体感化，譬如:

如不雅我们用正统的React组件的写法，可以得出如下代码:

而应用SFC模式的话，大年夜概可以省下29%的代码:

export default class RelatedSearch extends React.Component { 
 
  constructor(props) { 
 
    super(props); 
 
    this._handleClick = this._handleClick.bind(this); 
 
  } 
 
  _handleClick(suggestedUrl, event) { 
 
    event.preventDefault(); 
 
    this.props.onClick(suggestedUrl); 
 
  } 
 
  render() { 
 
    return ( 
 
      <section className="related-search-container"> 
 
        <h1 className="related-search-title">Related Searches:</h1> 
 
        <Layout x-small={2} small={3} medium={4} padded={true}> 
 
          {this.props.relatedQueries.map((query, index) => 
 
            <Link 
 
              className="related-search-link"	
			 1/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