3分钟教你写精炼的 React Components

34次阅读

共计 2659 个字符，预计需要花费 7 分钟才能阅读完成。

最近在做一些梳理，把平时记录的一些笔记和实践整理成完整的短篇技术文章。这篇主要说一下如何精简你的 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 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;

结语
经过一番操作，代码变成了我们想要的模样，也干净了很多。
相比最初的版本多了一些代码，因为我们把一些关键逻辑拆分到了不同的组件中，干净并不意味着少。
如果后面需要加入更多的逻辑，改造后的版本显然更灵活，更容易管理。
大概就是这么多，希望对大家有所启发。
如有纰漏，欢迎指正，谢谢。

正文完