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;
結語
經過一番操作， 程式碼變成了我們想要的模樣，也 乾淨 了很多。
相比最初的版本多了一些程式碼，因為我們把一些關鍵邏輯拆分到了不同的元件中， 乾淨並不意味著少 。
如果後面需要加入更多的邏輯， 改造後的版本顯然更靈活， 更容易管理。
大概就是這麼多， 希望對大家有所啟發。
如有紕漏， 歡迎指正， 謝謝。