資訊專欄INFORMATION COLUMN
摘要：最近在做一些梳理，把平時(shí)記錄的一些筆記和實(shí)踐整理成完整的短篇技術(shù)文章。下一步我們要處理的是樣式。相比最初的版本多了一些代碼，因?yàn)槲覀儼岩恍╆P(guān)鍵邏輯拆分到了不同的組件中，干凈并不意味著少。
最近在做一些梳理， 把平時(shí)記錄的一些筆記和實(shí)踐整理成完整的短篇技術(shù)文章。 這篇主要說(shuō)一下如何精簡(jiǎn)你的React Components
看個(gè)例子還是用那個(gè)大家都熟悉的 Counter， 點(diǎn)一下就能加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 (
{this.state.count}
);
}
}
export default Counter;
非常簡(jiǎn)單的一個(gè)組件， 點(diǎn)一下就加1， 點(diǎn)reaset 就重置為0；還能傳參換主題。
回頭再看這個(gè)組件， 發(fā)現(xiàn)它雖簡(jiǎn)單， 做的事情卻不少， 甚至有些臃腫。
在 《 Clean Code 》 中， Robert Martint 建議 函數(shù)應(yīng)該專注于一件事:
A function should do one thing, do it well, and do it only.
顯然我們的組件沒(méi)有遵循這條原則， 下面我們就一步步改造成理想的模樣：
分離狀態(tài)管理邏輯最簡(jiǎn)單的辦法是把狀態(tài)劃分為不同的因子:
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 (
{count}
);
}
const App = () => {
return (
{([count, updateCount]) => {
return (
updateCount(count + 1)}
onReset={() => updateCount(0)}
/>
)
}}
);
}
export default App;
這樣分的一個(gè)好處是便于管理，以后不論是 React Hooks, Redux, React.Context, Mobx, Graphql 或者其他什么東西， 都可以。
看到這可能會(huì)覺(jué)得有點(diǎn)眼熟， 沒(méi)錯(cuò)， 這是React Render props 的一種形式， 可以參考我的上一篇文章.
分離樣式到現(xiàn)在， 我們的 Clicker component 還是略顯臃腫， 繼續(xù)改。
下一步我們要處理的是樣式。
樣式是很重要的， 一個(gè)組件長(zhǎng)成什么樣子僅僅是實(shí)現(xiàn)要關(guān)心的事情， 而且組件本身也不關(guān)心你用了什么樣的技術(shù)。
廢話不多少， 我們開始拆：
拆開之后的這種樣子， 很容易創(chuàng)建styled 的componen, 也方便在其他地方復(fù)用。
最終形態(tài)import React from "react";
const PrimaryButton = props => ;
const Clicker = props => ;
const ClickerLayout = ({ className="", ...props }) => {
return
};
const ClickerLayoutDark = props => (
{([count, updateCount]) => {
return (
updateCount(count + 1)}>{count}
updateCount(0)}>Reset
)
}}
);
}
export default App;
結(jié)語(yǔ)
經(jīng)過(guò)一番操作， 代碼變成了我們想要的模樣，也干凈了很多。
相比最初的版本多了一些代碼，因?yàn)槲覀儼岩恍╆P(guān)鍵邏輯拆分到了不同的組件中，干凈并不意味著少。
如果后面需要加入更多的邏輯， 改造后的版本顯然更靈活， 更容易管理。
大概就是這么多， 希望對(duì)大家有所啟發(fā)。
如有紕漏， 歡迎指正， 謝謝。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/101446.html
摘要：手把手教你寫組件庫(kù)最近在研究的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過(guò)，對(duì)于新手來(lái)說(shuō)并不算友好。 手把手教你寫 Vue UI 組件庫(kù) 最近在研究 muse-ui 的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于 vue 插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過(guò)，對(duì)于新手來(lái)說(shuō)并不算友好。 筆者結(jié)合官方文檔，與自己的摸索總結(jié)，以最簡(jiǎn)單的 FlexBox 組件為例子，帶大家入門 v...
摘要：版本裁切工具，包含預(yù)覽功能最終效果源碼地址第一步先用安裝腳手架不會(huì)安裝的看官網(wǎng)初始化第二步創(chuàng)建文件新建里新建，在配置訪問(wèn)路由具體看源碼最終生成的文件結(jié)構(gòu)如下圖第三步注冊(cè)組件引用所有插件導(dǎo)入插件入口文件如果已安裝就跳過(guò)注冊(cè)插件全 vue版本裁切工具，包含預(yù)覽功能 最終效果： https://qiuyaofan.github.io/vue-crop-demo/ 源碼地址： https:/...
摘要：可實(shí)際上并不是創(chuàng)造的，將這個(gè)概念拿過(guò)來(lái)以后融會(huì)貫通慢慢地成為目前前端最炙手可熱的框架之一。則是將再抽象一層生成的簡(jiǎn)化版對(duì)象，這個(gè)對(duì)象也擁有上的一些屬性，比如等，但它是完全脫離于瀏覽器而存在的。所以今天我要手把手教大家怎么從零開始實(shí)現(xiàn)。 假如你的項(xiàng)目使用了React，你知道怎么做性能優(yōu)化嗎？你知道為什么React讓你寫shouldComponentUpdate或者React.PureCo...
摘要：也就是說(shuō)通過(guò)我們自己構(gòu)建來(lái)解釋是否是一個(gè)合適的路由抽象。首先，并不需要，因?yàn)槿绻酚芍袥](méi)有給那么將會(huì)自動(dòng)渲染。基本上我們的路由只要關(guān)心的變化并且返回相應(yīng)的即可。為了解決這個(gè)問(wèn)題，需要跟蹤每一條并且當(dāng)路由發(fā)生改變的時(shí)候調(diào)用。 showImg(https://segmentfault.com/img/remote/1460000008803951?w=800&h=615); 作者：Tyl...
閱讀 2786·2021-11-02 14:42
閱讀 3170·2021-10-08 10:04
閱讀 1188·2019-08-30 15:55
閱讀 1032·2019-08-30 15:54
閱讀 2321·2019-08-30 15:43
閱讀 1685·2019-08-29 15:18
閱讀 870·2019-08-29 11:11
閱讀 2369·2019-08-26 13:52
