3分鐘教你寫精煉的 React Components

最近在作一些梳理， 把平時記錄的一些筆記和實踐整理成完整的短篇技術文章。 這篇主要說一下如何精簡你的React Components

---

看個例子

仍是用那個你們都熟悉的 Counter， 點一下就能加1的那種。

看看原始代碼：

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0
  };

  handleClick = () => this.setState(state => ({ count: state.count + 1 }));

  handleReset = () => this.setState({ count: 0 });

  render() {
    const { dark } = this.props;
    const theme = dark ? 'dark' : '';

    return (
      <div className={`clickerLayout ${theme}`}>
        <span className="clickerCount" onClick={this.handleClick}>
          {this.state.count}
        </span>
        <button className="primary" onClick={this.handleReset}>
          Reset
        </button>
      </div>
    );
  }
}

export default Counter;

很是簡單的一個組件， 點一下就加1， 點reaset 就重置爲0；還能傳參換主題。

回頭再看這個組件， 發現它雖簡單， 作的事情卻很多， 甚至有些臃腫。

在 《 Clean Code 》 中， Robert Martint 建議 函數應該專一於一件事:

A function should do one thing, do it well, and do it only.

顯然咱們的組件沒有遵循這條原則， 下面咱們就一步步改形成理想的模樣：

分離狀態管理邏輯

最簡單的辦法是把狀態劃分爲不一樣的因子:

import React from 'react';


class Counter extends React.Component {
  state = {
    count: 0
  };
  updateCount = val => this.setState({ count: val });
  render() {
    const stateTools = [this.state.count, this.updateCount];
    return this.props.children(stateTools);
  }
}

const Clicker = props => {
  const { dark, onClick, onReset, count } = props;
  const theme = dark ? 'dark' : '';
  return (
    <div className={`clickerLayout ${theme}`}>
      <span className="clickerCount" onClick={onClick}>
        {count}
      </span>
      <button className="primary" onClick={onReset}>
        Reset
      </button>
    </div>  
  );
}

const App = () => {
  return (
    <Counter>
      {([count, updateCount]) => {
        return (
          <Clicker
            count={count}
            onClick={() => updateCount(count + 1)}
            onReset={() => updateCount(0)}
          />
        )
      }}
    </Counter>
  );
}

export default App;

這樣分的一個好處是便於管理，之後不管是 React Hooks, Redux, React.Context, Mobx, Graphql 或者其餘什麼東西， 均可以。

看到這可能會以爲有點眼熟， 沒錯， 這是React Render props 的一種形式， 能夠參考個人上一篇文章.

分離樣式

到如今， 咱們的 Clicker component 仍是略顯臃腫， 繼續改。

下一步咱們要處理的是樣式。

樣式是很重要的， 一個組件長成什麼樣子僅僅是實現要關心的事情， 並且組件自己也不關心你用了什麼樣的技術。

廢話很少少， 咱們開始拆：

拆開以後的這種樣子， 很容易建立styled 的componen, 也方便在其餘地方複用。

最終形態

import React from 'react';

const PrimaryButton = props => <button {...props} className="primary" />;

const Clicker = props => <span {...props} className="clickerCount" />;

const ClickerLayout = ({ className="", ...props }) => {
  return <div {...props} className={`clickerLayout ${className}`} />
};

const ClickerLayoutDark = props => (
  <ClickerLayout className="dark" {...props} />
)

class Counter extends React.Component {
  state = {
    count: 0
  };
  updateCount = val => this.setState({ count: val });
  render() {
    const stateTools = [this.state.count, this.updateCount];
    return this.props.children(stateTools);
  }
}

const App = () => {
  return (
    <Counter>
      {([count, updateCount]) => {
        return (
          <ClickerLayoutDark>
            <Clicker onClick={() => updateCount(count + 1)}>{count}</Clicker>
            <PrimaryButton onClick={() => updateCount(0)}>Reset</PrimaryButton>
          </ClickerLayoutDark>
        )
      }}
    </Counter>
  );
}

export default App;

結語

通過一番操做， 代碼變成了咱們想要的模樣，也乾淨了不少。

相比最初的版本多了一些代碼，由於咱們把一些關鍵邏輯拆分到了不一樣的組件中，乾淨並不意味着少。

若是後面須要加入更多的邏輯， 改造後的版本顯然更靈活， 更容易管理。

大概就是這麼多， 但願對你們有所啓發。

若有紕漏， 歡迎指正， 謝謝。