看个例子

还是用那个大家都熟悉的 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 还是略显臃肿，继续改。

下一步我们要处理的是样式。

样式是很重要的，一个组件长成什么样子仅仅是实现要关心的事情，而且组件本身也不关心你用了什么样的技术。

废话不多少，我们开始拆：

3分钟教你写精炼的 React Components

拆开之后的这种样子，很容易创建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;