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;

结语

通过一番操做， 代码变成了咱们想要的模样，也干净了不少。

相比最初的版本多了一些代码，由于咱们把一些关键逻辑拆分到了不一样的组件中，干净并不意味着少。

若是后面须要加入更多的逻辑， 改造后的版本显然更灵活， 更容易管理。

大概就是这么多， 但愿对你们有所启发。

若有纰漏， 欢迎指正， 谢谢。