隨著 React.js 的不斷進化，現在的它已經成為 Web 組件中最受歡迎的視圖庫之一。但是你手中的它，是否真的能夠正常工作呢？本文將主要描述 5 個關于React 組件的最佳實踐，希望對正在關注 React 組件的你有所幫助。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

問 題

React.js 已成為 Web 組件中最受歡迎的視圖庫。一路進化下來，它發展出了眾多特性，如今已成為創建優秀的 Web 應用程序的一套完整工具。

它的社區經歷了爆發式增長，尤其在過去的 2-3 年中，網絡上出現了成千上萬有關這項技術的教程。

因此，每位初學者在開始學習 React 時都應該做一件事情，那就是閱讀其文檔或教程進而創建他們的第一個組件，就像我在 Codeworks 上開始我的學習旅途一樣:

https://codeworks.me/?utm_source=medium&utm_medium=organic&utm_campaign=marco_ghiani_hackernoon_how_to_write_clean_react_components

但我的問題是：你能肯定你的 React 組件遵循了最佳實踐嗎？簡單來說，它們是不是正常工作呢？

臟組件長什么樣

為了更好地說明我的觀點，讓我們來看看下面的 React 組件：

import React from 'react';import './Listcomponent.css';class Listcomponent extends React.Component { constructor(props) { super(props); this.state = { lastClickedButton: '' }; } render() { return ( The last clicked button is {this.state.lastClickedButton} { this.setState({ lastClickedButton: 'Create' }); this.props.createSomething(); }} className="my-button"> Create { this.setState({ lastClickedButton: 'Read' }); this.props.readSomething(); }} className="my-button"> Read { this.setState({ lastClickedButton: 'Update' }); this.props.updateSomething(); }} className="my-button"> Update { this.setState({ lastClickedButton: 'Destroy' }); this.props.destroySomething(); }} className="my-button"> Destroy ); }}

一個骯臟的 React 組件

這是一個完全正常工作的 React 組件，可以在整個應用程序中多次使用。它渲染了一個按鈕列表，這些按鈕會觸發某個事件，組件還會顯示最近被點擊的是哪個按鈕。總之很簡單。

你可能會想：“好吧……如果能用，那就沒什么問題！”

但如果有人告訴你，現在這個用 62 行代碼寫成的組件其實用少得多的代碼也能做出來呢？所以我們開始做掃除吧！

1. 優先使用 React Hooks 實現函數組件

隨著 React 16.8 引入 Hooks，我們就可以在類聲明中使用函數組件來構成有狀態組件(如果我們需要處理任何邏輯)了。

在本文中，我們不會深入討論類與函數組件或 React Hooks。但在 React 社區中眾所周知的是，最好優先創建函數組件，尤其是現在我們有了 Hooks 這么好用的工具。

Hooks 允許你復用狀態邏輯，而無需更改組件層次結構。

接下來讓我們看一下第一次重構后組件的樣子：

import React, { useState } from 'react';import './ListComponent.css';const ListComponent = props => { const [lastClickedButton, setLastClickedButton] = useState(''); return ( The last clicked button is {lastClickedButton} { setLastClickedButton('Create'); props.createSomething(); }} className="my-button"> Create { setLastClickedButton('Read'); props.ReadSomething(); }} className="my-button"> Read { setLastClickedButton('Update'); props.updateSomething(); }} className="my-button"> Update { setLastClickedButton('Destroy'); props.DestroySomething(); }} className="my-button"> Destroy );};

用 React Hooks 重構成函數組件很好，我們的組件已經短一些了，我們還刪除了 類 語法，但仍然需要做許多優化工作。

2. 利用好它！

我們可以在這個組件中找到什么模式嗎？看一下代碼，似乎我們每次都渲染一個相似的 button 元素，每個元素都接受一些相似的 props，所以非常適合把這個長組件切成許多小塊。

因此我們可以進一步重構這個組件，創建另一個小的函數組件來渲染按鈕，并傳遞一些屬性，如 action、setClicked 和 title：

import React, { useState } from 'react';import './ListComponent.css';const ListItemComponent = props => { return { { props.setClicked(props.title); props.action(); }} className="my-button"> {props.title} );};const ListComponent = props => { const [lastClickedButton, setLastClickedButton] = useState(''); return The last clicked button is {lastClickedButton} );};

好的，我們的組件開始變好看了，但是仍有改進的余地，讓我們繼續吧！

3. 正確命名和 props 解構

setLastClickedButton 是 setter 函數的描述性名稱，但我們需要保持代碼的可讀性和簡潔，因此請務必起一個最短、最精煉的名字，這是很重要的。我們將其重命名為 setClicked。

同樣，只要有可能，從 props 對象解構出來你需要的東西就可以避免多次重復使用 props 這個詞。在 ListItem 組件中，我們現在按解構后的函數參數中的名稱—— {action, title, setClicked}來訪問 props。

下面看看這兩個變化：

import React, { useState } from 'react';import './List.css';const ListItem = ({ action, title, setClicked }) => { return { { setclicked(title); action(); }} className="my-button"> {title} );};const List = ({ create, read, update, destroy }) => { const [clicked, setClicked] = useState(''); return ( The last clicked button is {clicked} );};

太好了，我們大大減少了組件聲明的長度，但是我們仍然可以做得更好！

4. 愿 PropTypes 與你同在！

經過清理之后，該是用到編寫組件時最棒的實踐的時候了！使用 PropTypes，我們可以驗證接收到的 props，以避免由于不同數據類型而導致的錯誤。例如，接收字符串“0”并嘗試將其與數字 0 嚴格對比(“0” === 0-> FALSE!!!)：

import React, { useState } from 'react';import PropTypes from 'prop-types';const ListItem = ({ action, title, setClicked }) => { return ( { setClicked(title); action(); }} className="my-button"> {title} );};ListItem.propTypes = { action: PropTypes.func, setClicked: PropTypes.func, title: PropTypes.string};const List = ({ create, read, update, destroy }) => { const [clicked, setClicked] = useState(''); return ( The last clicked button is {clicked} );};List.propTypes = { create: PropTypes.func, read: PropTypes.func, update: PropTypes.func, destroy: PropTypes.func,};export default List;

PropTypes 驗證

5. 切成小塊

想不到吧——我們現在的組件與初始版本差不多一樣長，但請仔細觀察我們現在手上的代碼。

我們看到了兩個不同的組件，可以將它們劃分為兩個模塊，從而使它們在整個應用程序中都能復用。

import React, { useState } from 'react';import PropTypes from 'prop-types';import ListItem from './ListItem.js'const List = ({ create, read, update, destroy }) => { const [clicked, setClicked] = useState(''); return ( The last clicked button is {clicked} );};};List.propTypes = { create: PropTypes.func, read: PropTypes.func, update: PropTypes.func, destroy: PropTypes.func,};export default List;

List.js

import React, { useState } from 'react';import PropTypes from 'prop-types';const ListItem = ({ action, title, setClicked }) => { return ( { setClicked(title); action(); }} className="my-button"> {title} );};ListItem.propTypes = { action: PropTypes.func, setClicked: PropTypes.func, title: PropTypes.string};export default ListItem;

ListItem.js

小 結

當你開始研究 React 組件時，本文對初始組件的這些清理工作提供了一些值得參考的優秀實踐。

當然，我們可以針對這個最終結果執行其他很多優化操作，但路要一步一步走，這五個優秀實踐是很好的起點。

原文鏈接：https://mp.weixin.qq.com/s/s90qbKR51lJl7p0ZkuFNbg

作者： 前端之巔

總結

以上是生活随笔為你收集整理的react项目中的参数解构_重构复杂的React组件：编写高效且可读组件的5个最佳实践...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。