3分鐘教你寫精煉的 React Components

zhoutk 發布于2019-08-23 14:59 / 1467人閱讀

摘要：最近在做一些梳理，把平時記錄的一些筆記和實踐整理成完整的短篇技術文章。下一步我們要處理的是樣式。相比最初的版本多了一些代碼，因為我們把一些關鍵邏輯拆分到了不同的組件中，干凈并不意味著少。

最近在做一些梳理，把平時記錄的一些筆記和實踐整理成完整的短篇技術文章。這篇主要說一下如何精簡你的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 (
      
        
          {this.state.count}
        
        
      
    );
  }
}

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 (
    
      
        {count}
      
      
      
  );
}

const App = () => {
  return (
    
      {([count, updateCount]) => {
        return (
           updateCount(count + 1)}
            onReset={() => updateCount(0)}
          />
        )
      }}
    
  );
}

export default App;

這樣分的一個好處是便于管理，以后不論是 React Hooks, Redux, React.Context, Mobx, Graphql 或者其他什么東西，都可以。

看到這可能會覺得有點眼熟，沒錯，這是React Render props 的一種形式，可以參考我的上一篇文章.

分離樣式

到現在，我們的 Clicker component 還是略顯臃腫，繼續改。

下一步我們要處理的是樣式。

樣式是很重要的，一個組件長成什么樣子僅僅是實現要關心的事情，而且組件本身也不關心你用了什么樣的技術。

廢話不多少，我們開始拆：

拆開之后的這種樣子，很容易創建styled 的componen, 也方便在其他地方復用。

最終形態

import React from "react";

const PrimaryButton = props =>

結語

經過一番操作，代碼變成了我們想要的模樣，也干凈了很多。

相比最初的版本多了一些代碼，因為我們把一些關鍵邏輯拆分到了不同的組件中，干凈并不意味著少。

如果后面需要加入更多的邏輯，改造后的版本顯然更靈活，更容易管理。

大概就是這么多，希望對大家有所啟發。

如有紕漏，歡迎指正，謝謝。

云服務器 GPU云服務器你寫的代碼，是別人的 php給時間加3分鐘一個教你開發小程序的小程序教你用阿里云開我的世界服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101446.html

手把手教你寫 Vue UI 組件庫@vue2.0

摘要：手把手教你寫組件庫最近在研究的實現，發現網上很少有關于插件具體實現的文章，官方的文檔也只是一筆帶過，對于新手來說并不算友好。手把手教你寫 Vue UI 組件庫最近在研究 muse-ui 的實現，發現網上很少有關于 vue 插件具體實現的文章，官方的文檔也只是一筆帶過，對于新手來說并不算友好。筆者結合官方文檔，與自己的摸索總結，以最簡單的 FlexBox 組件為例子，帶大家入門 v...

Keagan 2019-08-20 17:02 評論0 收藏0
手把手教你寫vue裁切預覽組件

摘要：版本裁切工具，包含預覽功能最終效果源碼地址第一步先用安裝腳手架不會安裝的看官網初始化第二步創建文件新建里新建，在配置訪問路由具體看源碼最終生成的文件結構如下圖第三步注冊組件引用所有插件導入插件入口文件如果已安裝就跳過注冊插件全 vue版本裁切工具，包含預覽功能最終效果： https://qiuyaofan.github.io/vue-crop-demo/ 源碼地址： https:/...

FreeZinG 2019-08-22 17:02 評論0 收藏0
【React進階系列】從零開始手把手教你實現一個Virtual DOM（一）

摘要：可實際上并不是創造的，將這個概念拿過來以后融會貫通慢慢地成為目前前端最炙手可熱的框架之一。則是將再抽象一層生成的簡化版對象，這個對象也擁有上的一些屬性，比如等，但它是完全脫離于瀏覽器而存在的。所以今天我要手把手教大家怎么從零開始實現。假如你的項目使用了React，你知道怎么做性能優化嗎？你知道為什么React讓你寫shouldComponentUpdate或者React.PureCo...

PumpkinDylan 2019-08-22 16:40 評論0 收藏0
由淺入深地教你開發自己的 React Router v4

摘要：也就是說通過我們自己構建來解釋是否是一個合適的路由抽象。首先，并不需要，因為如果路由中沒有給那么將會自動渲染。基本上我們的路由只要關心的變化并且返回相應的即可。為了解決這個問題，需要跟蹤每一條并且當路由發生改變的時候調用。 showImg(https://segmentfault.com/img/remote/1460000008803951?w=800&h=615); 作者：Tyl...

alin 2019-08-20 15:39 評論0 收藏0