如何写出更好的react代码

　以下内容来自于翻译：

React可以通过状态让你轻松的构建响应式UI界面。当组件的数据改变的时候高效的更新并且渲染视图。

在本次博客中，我将提供一些建议，这些建议将使你称为更好的React开发者。覆盖的范围从工具的使用到实际的代码风格。这些将帮助你提高你的React技能。

代码风格：

良好的代码语法风格检测工具对于写出优质的代码是非常重要的，因为如果我们有个好的语法风格检测工具，编辑器可以帮助你找出代码中潜在的bug。

eslint不仅有利于发现潜在的bug，也有利于让你了解React编程当中的最佳实践。

 

import react from 'react';

export default class App extends React.Component {
  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return <Loader />;
    
    return (
      
    )
  }
}

如上代码，当你想要在render函数里面使用新的属性，例如this.props.hello的时候，eslint将会报错：

'hello' is missing in props validation (react/prop-types)

eslint可以帮助你了解React编程中的最佳实践，避免你在编程中犯错。你可以通过eslint设置js的编程风格，或者使用Airbnb的js风格指南，你也可以安装React Eslint包。

propTypes 和 defaultProps

static propTypes = {
  userIsLoaded: PropTypes.boolean.isRequired,
  user: PropTypes.shape({
    _id: PropTypes.string,
  )}.isRequired,
}

如果userIsLoaded不是required的时候。我们也应该添加如下的代码

static defaultProps = {
 userIsLoaded: false,
}

所以任何时候我们都应该在我们的组件当中设置PropType。如上代码所示，当userIsLoaded不是必须的属性的时候我们需要设置他的default prop。如果他是必须的属性的时候。那我们就不设置他的default prop.不用该用object array这样模糊的propTypes来定义。如上的user对象我们使用了shape去验证user。并且声明属性id的类型为string。整个的user对象是required。确保在你的组件中都有设置propTypes和defaultProps。

了解何时需要封装成一个component

export default class Profile extends PureComponent {
  static propTypes = {
    userIsLoaded: PropTypes.bool,
    user: PropTypes.shape({
      _id: PropTypes.string,
    }).isRequired,
  }
  
  static defaultProps = {
    userIsLoaded: false,
  }
  
  render() {
    const { userIsLoaded, user } = this.props;
    if (!userIsLoaded) return <Loaded />;
    return (
      <div>
        <div className="two-col">
          <section>
            <MyOrders userId={user._id} />
            <MyDownloads userId={user._id} />
          </section>
          <aside>
            <MySubscriptions user={user} />
            <MyVotes user={user} />
          </aside>
        </div>
        <div className="one-col">
          {isRole('affiliate', user={user._id) &&
            <MyAffiliateInfo userId={user._id} />
          }
        </div>
      </div>
    )
  }
}

在这个Profile component中还有MyOrders 和MyDownloads等不同的小组件。通过拉去user数据分发给不同的子组件。从而构建更大的组件。当有如下情况的时候我想你需要单独成立个组件了：

1.你代码的功能是否变得笨重？

2.描述的是它自身的东西

3.你是否要复用你的代码？

 如果有以上这些问题，我想你应该把它抽象为一个组件。

Component Vs PureComponent Vs stateless Functional Component

对于react开发者来说何时使用Component PureComponent 和 stateless Functional Component是非常重要的。

首先让我们看下stateless Functional Component

const Billboard = () => (
  <ZoneBlack>
    <Heading>React</Heading>
    <div className="billboard_product">
      <Link className="billboard_product-image" to="/">
        <img alt="#" src="#">
      </Link>
      <div className="billboard_product-details">
        <h3 className="sub">React</h3>
        <p>Lorem Ipsum</p>
      </div>
    </div>
  </ZoneBlack>
);

无状态的函数式组件为创建react组件提供了简洁的方法。没有state，refs,和react生命周期方法。它仅仅是一个无状态的函数。这样的好处是可以定义一个无副作用的函数作为组件，通过这个组件返回数据。总而言之，无状态的函数式组件仅仅是返回JSX的函数。

PureComponents

通常情况下,当react接收到一个新的props的时候，react会重新渲染该组件。有时候当react接收到一个新的props的时候实际上他并没有真正的更改。但这个时候react依然会重新渲染UI。

使用PureComponent可以让你避免react不必要的重绘。例如，如果props是字符串或者布尔值，当该值改变的时候，PureComponent可以感知这样的变化，但是如果对象的属性发生改变的时候，react不会触发重绘工作。

如何知道react进行了没必要的渲染工作呢？你可以使用Why Did you Update(https://github.com/maicki/why-did-you-update)这个包进行检测，它会告诉你哪里进行了没必要的重绘工作。

你可以使用PureComponent取代Component来优化你的组件，来避免没必要的react重绘。

使用条件声明

条件声明可以简化你的react代码，如下：

div className="one-col">
  {isRole('affiliate', user._id) &&
    <MyAffiliateInfo userId={user._id} />
  }
</div>

　当isRole返回true的时候返回MyAffiliateInfo组件。这样写有如下优点：

1.不需要写个独立的函数

2.不需要在render函数中单独写个if判断语句

3.也不用在其他地方的函数中返回这个组件