react es6+ 代码优化之路-1

/*
    当我们使用 es5 的时候
**/
var es5Fun = function (config) {
    var foo = config || 'default foo'
    console.log(foo)
}

//我们传一个对象进去
es5Fun() // 'default foo'
es5Fun('not default foo') // 'not default foo'

/*
    当我们使用 es6+ 的时候
**/
const es6Fun = (config = {'defalut'})=>{
    console.log(config)
}

es6Fun(); // 'defalut'
es6Fun('not defalut') // 'not defalut'
复制代码

//bad
const splitLocale = locale.split('-');
const language = splitLocale[0];
const country = splitLocale[1];

//good
const [language, country] = locale.split('-');

//bad 
const good = current => goal;

//good
const isGood = current => goal;
复制代码

//bad
const MyComponent = () => (
  
    
        
  
);

//good
const MyOtherComponent = ({ type }) => (
  
);
const MyComponent = () => (
  
    
    
  
);
复制代码

//bad
import Title from './Title';

export const Thingie = ({ description }) => (
  
    
      
    
  
);

export const ThingieWithTitle = ({ title, description }) => (
  
    
    <div class="description-wrapper">
      <Description value={description} />
    </div>
  </div>
);
<span class="copy-code-btn">复制代码</span></code></pre><ul>
<li>在这里，我们将 children 传递给 Thingie。然后创建 ThingieWithTitle，这个组件包含 Thingie，并将 Title 作为其子组件传给 Thingie。这样我们就可以分离的使用两个组件，相互不影响，耦合度小。</li>
</ul>
<pre><code class="hljs javascript copyable" lang="javascript"><span class="hljs-comment">//good</span>
<span class="hljs-keyword">import</span> Title <span class="hljs-keyword">from</span> <span class="hljs-string">'./Title'</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> Thingie = <span class="hljs-function">(<span class="hljs-params">{ description, children }</span>) =></span> (
  <div class="thingie">
    {children}
    <div class="description-wrapper">
      <Description value={description} />
    </div>
  </div>
);

export const ThingieWithTitle = ({ title, ...others }) => (
  <Thingie {...others}>
    <Title value={title} />
  </Thingie>
);
<span class="copy-code-btn">复制代码</span></code></pre><h3 class="heading" data-id="heading-7">4、多使用无状态组件</h3>
<ul>
<li>从渲染分离有状态的部分</li>
</ul>
<pre><code class="hljs javascript copyable" lang="javascript"><span class="hljs-comment">//bad</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">User</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
  state = { <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span> };

  render() {
    <span class="hljs-keyword">const</span> { loading, user } = <span class="hljs-keyword">this</span>.state;
    <span class="hljs-keyword">return</span> loading
      ? <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>Loading...<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
      : <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
            First name: {user.firstName}
          <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
            First name: {user.lastName}
          <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          ...
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>;
  }

  componentDidMount() {
    fetchUser(<span class="hljs-keyword">this</span>.props.id)
      .then(<span class="hljs-function">(<span class="hljs-params">user</span>) =></span> { <span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>, user })})
  }
}

<span class="hljs-comment">//good</span>
<span class="hljs-comment">//我们把无状态的组件写进 <Renderuser /> 中</span>
<span class="hljs-keyword">import</span> RenderUser <span class="hljs-keyword">from</span> <span class="hljs-string">'./RenderUser'</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">User</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
  state = { <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span> };

  render() {
    <span class="hljs-keyword">const</span> { loading, user } = <span class="hljs-keyword">this</span>.state;
    <span class="hljs-keyword">return</span> loading ? <Loading /> : <RenderUser user={user} />;
  }

  componentDidMount() {
    fetchUser(this.props.id)
      .then(user => { this.setState({ loading: false, user })})
  }
}

//anohter good
class User extends Component {
  state = { loading: true };

  _render(){
      return (
        
      )
  }

  render() {
    const { loading, user } = this.state;
    return loading ? <Loading /> : <RenderUser user={user} />;
  }

  componentDidMount() {
    fetchUser(this.props.id)
      .then(user => { this.setState({ loading: false, user })})
  }
}
<span class="copy-code-btn">复制代码</span></code></pre><h3 class="heading" data-id="heading-8">x、使用高阶组件重构代码</h3>
<ul>
<li>未完待续</li>
</ul>
</div> <div class="image-viewer-box" data-v-78c9b824=""><!----></div>