如何編寫Cleaner React代碼

作者：小弋 2021-06-08 09:35:11

作為React開發(fā)者，我們都希望寫出更干凈的代碼，更簡(jiǎn)單，更容易閱讀。在本指南中，我把一些編寫更干凈的React代碼的七個(gè)頂級(jí)方法放在一起，使得構(gòu)建React項(xiàng)目和審查你的代碼更容易。

[[404426]]

大家好，我是小弋。

今天分享的內(nèi)容是如何編寫干凈的React代碼。

正文

作為React開發(fā)者，我們都希望寫出更干凈的代碼，更簡(jiǎn)單，更容易閱讀。

在本指南中，我把一些編寫更干凈的React代碼的七個(gè)頂級(jí)方法放在一起，使得構(gòu)建React項(xiàng)目和審查你的代碼更容易。

總的來說，學(xué)習(xí)如何編寫更干凈的React代碼將使你成為一個(gè)更有價(jià)值的、整體上更快樂的React開發(fā)者，所以讓我們馬上開始吧!

主要涉及以下幾個(gè)點(diǎn)：

合理使用jsx。
把不相關(guān)的代碼移到一個(gè)獨(dú)立的組件中。
為每個(gè)組件創(chuàng)建單獨(dú)的文件。
將共享功能移入React hooks。
盡可能多地從你的JSX中刪除JavaScript。
格式化內(nèi)聯(lián)樣式，減少臃腫的代碼。
合理使用React context。

合理使用JSX

你如何向一個(gè)給定的prop傳遞一個(gè)true的值?

在下面的例子中，我們使用showTitle在Navbar組件中顯示我們應(yīng)用程序的標(biāo)題。

// src/App.js 
 
export default function App() { 
  return ( 
    <main> 
      <Navbar showTitle={true} /> 
    </main> 
  ); 
} 
 
function Navbar({ showTitle }) { 
  return ( 
    <div> 
      {showTitle && <h1>My Special App</h1>} 
    </div> 
  ) 
}

我們是否需要明確地將showTitle設(shè)置為布爾值true?我們不需要!

一個(gè)快速的速記方法是，在一個(gè)組件上提供的任何prop的默認(rèn)值都是true。

因此，如果我們?cè)贜avbar上添加showTitle，我們的標(biāo)題元素就會(huì)顯示出來。

// src/App.js 
 
export default function App() { 
  return ( 
    <main> 
      <Navbar showTitle /> 
    </main> 
  ); 
} 
 
function Navbar({ showTitle }) { 
  return ( 
    <div> 
      {showTitle && <h1>My Special App</h1>} // title shown! 
    </div> 
  ) 
}

另一個(gè)要記住的有用的速記法涉及到傳遞字符串prop。

當(dāng)你傳遞一個(gè)字符串的值時(shí)，你不需要用大括號(hào)把它包起來。

如果我們要設(shè)置導(dǎo)航條的標(biāo)題，使用title的prop時(shí)，我們可以把它的值放在雙引號(hào)中。

// src/App.js 
 
export default function App() { 
  return ( 
    <main> 
      <Navbar title="My Special App" /> 
    </main> 
  ); 
} 
 
function Navbar({ title }) { 
  return ( 
    <div> 
      <h1>{title}</h1> 
    </div> 
  ) 
}

把不相關(guān)的代碼移到一個(gè)獨(dú)立的組件中

可以說，編寫更干凈的React代碼的最簡(jiǎn)單和最重要的方法是善于將我們的代碼抽象成獨(dú)立的React組件。

讓我們看一下下面的例子：

// src/App.js 
 
export default function App() { 
  const posts = [ 
    { 
      id: 1, 
      title: "How to Build YouTube with React" 
    }, 
    { 
      id: 2, 
      title: "How to Write Your First React Hook" 
    } 
  ]; 
 
  return ( 
    <main> 
      <Navbar title="My Special App" /> 
      <ul> 
        {posts.map(post => ( 
          <li key={post.id}> 
            {post.title} 
          </li> 
        ))} 
      </ul> 
    </main> 
  ); 
} 
 
function Navbar({ title }) { 
  return ( 
    <div> 
      <h1>{title}</h1> 
    </div> 
  ); 
}

我們的應(yīng)用程序正在顯示一個(gè)導(dǎo)航條組件。我們正在用.map()遍歷一個(gè)帖子數(shù)組，并在頁面上顯示其標(biāo)題。

我們思考一個(gè)問題，我們?cè)鯓硬拍苁顾蓛裟?

我們?yōu)槭裁床话盐覀冋谘h(huán)的代碼，抽象化，并在一個(gè)單獨(dú)的組件中顯示它們，我們稱之為FeaturePosts。

讓我們看看改進(jìn)后的結(jié)果：

// src/App.js 
 
export default function App() { 
 return ( 
    <main> 
      <Navbar title="My Special App" /> 
      <FeaturedPosts /> 
    </main> 
  ); 
} 
 
function Navbar({ title }) { 
  return ( 
    <div> 
      <h1>{title}</h1> 
    </div> 
  ); 
} 
 
function FeaturedPosts() { 
  const posts = [ 
    { 
      id: 1, 
      title: "How to Build YouTube with React" 
    }, 
    { 
      id: 2, 
      title: "How to Write Your First React Hook" 
    } 
  ]; 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}

正如你所看到的，我們現(xiàn)在可以只看我們的App組件。

通過閱讀其中的組件名稱，即Navbar和FeaturePosts，我們可以準(zhǔn)確地看到我們的應(yīng)用程序所顯示的內(nèi)容。

為每個(gè)組件創(chuàng)建單獨(dú)的文件

從我們之前的例子來看，我們把所有的組件都放在一個(gè)文件里，即app.js文件。

類似于我們將代碼抽象成獨(dú)立的組件以使我們的應(yīng)用程序更具可讀性，為了使我們的應(yīng)用程序文件更具可讀性，我們可以將我們擁有的每個(gè)組件放在一個(gè)單獨(dú)的文件中。

這又一次幫助我們?cè)趹?yīng)用程序中分離關(guān)注點(diǎn)。這意味著每個(gè)文件只負(fù)責(zé)一個(gè)組件，如果我們想在我們的應(yīng)用程序中重復(fù)使用一個(gè)組件，就不會(huì)混淆它的來源了。

// src/App.js 
import Navbar from './components/Navbar.js'; 
import FeaturedPosts from './components/FeaturedPosts.js'; 
 
export default function App() { 
  return ( 
    <main> 
      <Navbar title="My Special App" /> 
      <FeaturedPosts /> 
    </main> 
  ); 
}

我們來看看Navbar中的代碼：

// src/components/Navbar.js 
 
export default function Navbar({ title }) { 
  return ( 
    <div> 
      <h1>{title}</h1> 
    </div> 
  ); 
}

接著我們看看FeaturedPosts中代碼：

// src/components/FeaturedPosts.js 
 
export default function FeaturedPosts() { 
  const posts = [ 
    { 
      id: 1, 
      title: "How to Build YouTube with React" 
    }, 
    { 
      id: 2, 
      title: "How to Write Your First React Hook" 
    } 
  ]; 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}

此外，通過將每個(gè)單獨(dú)的組件包含在自己的文件中，我們可以避免一個(gè)文件變得過于臃腫。如果我們想把所有的組件都加入到app.js文件中，我們很容易看到我們的app.js文件變得非常大。

將共享功能移入React hooks

看看我們的FeaturePosts組件，假設(shè)我們不是顯示靜態(tài)的帖子數(shù)據(jù)，而是想從一個(gè)API中獲取我們的帖子數(shù)據(jù)。

我們可以用fetch API來做。你可以看到下面這個(gè)結(jié)果:

// src/components/FeaturedPosts.js 
 
import React from 'react'; 
 
export default function FeaturedPosts() { 
  const [posts, setPosts] = React.useState([]);      
     
  React.useEffect(() => { 
    fetch('https://jsonplaceholder.typicode.com/posts') 
      .then(res => res.json()) 
      .then(data => setPosts(data)); 
  }, []); 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}

然而，如果我們想在多個(gè)組件中執(zhí)行這一數(shù)據(jù)請(qǐng)求，該怎么辦?

比方說，除了FeaturePosts組件外，我們還想創(chuàng)建一個(gè)具有相同數(shù)據(jù)的Post組件。我們將不得不復(fù)制我們用來獲取數(shù)據(jù)的邏輯，并將其粘貼到該組件中。

為了避免這樣做，我們?yōu)槭裁床皇褂靡粋€(gè)新的React鉤子，我們可以稱之為useFetchPosts:

// src/hooks/useFetchPosts.js 
 
import React from 'react'; 
 
export default function useFetchPosts() { 
  const [posts, setPosts] = React.useState([]);      
     
  React.useEffect(() => { 
    fetch('https://jsonplaceholder.typicode.com/posts') 
      .then(res => res.json()) 
      .then(data => setPosts(data)); 
  }, []); 
 
  return posts; 
}

一旦我們?cè)谝粋€(gè)專門的 "鉤子 "文件夾中創(chuàng)建了這個(gè)鉤子，我們就可以在任何我們喜歡的組件中重復(fù)使用它，包括我們的FeaturePosts組件:

// src/components/FeaturedPosts.js 
 
import useFetchPosts from '../hooks/useFetchPosts.js'; 
 
export default function FeaturedPosts() { 
  const posts = useFetchPosts() 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}

盡可能多地從你的JSX中刪除JavaScript

另一個(gè)非常有用的，但經(jīng)常被忽視的清理組件的方法是盡可能多地從我們的JSX中刪除JavaScript。

讓我們看一下下面的例子:

// src/components/FeaturedPosts.js 
 
import useFetchPosts from '../hooks/useFetchPosts.js'; 
 
export default function FeaturedPosts() { 
  const posts = useFetchPosts() 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li onClick={event => { 
          console.log(event.target, 'clicked!'); 
        }} key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}

我們正試圖處理一個(gè)帖子的點(diǎn)擊事件。你可以看到，我們的JSX變得更加難以閱讀。鑒于我們的函數(shù)是作為一個(gè)內(nèi)聯(lián)函數(shù)包含的，它掩蓋了這個(gè)組件的目的，以及它的相關(guān)函數(shù)。

我們能做什么來解決這個(gè)問題呢?我們可以把與onClick相連的內(nèi)聯(lián)函數(shù)提取出來，變成一個(gè)單獨(dú)的處理程序，我們可以給它一個(gè)合適的名字，如handlePostClick。

一旦我們這樣做，我們的JSX就會(huì)再次變得可讀。

// src/components/FeaturedPosts.js 
 
import useFetchPosts from '../hooks/useFetchPosts.js'; 
 
export default function FeaturedPosts() { 
  const posts = useFetchPosts() 
   
  function handlePostClick(event) { 
    console.log(event.target, 'clicked!');    
  } 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li onClick={handlePostClick} key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}

格式化內(nèi)聯(lián)樣式，減少臃腫的代碼

React開發(fā)者經(jīng)常會(huì)在他們的JSX中寫內(nèi)聯(lián)樣式。

但是，這使我們的代碼更難閱讀，更難寫出額外的JSX。

// src/App.js 
 
export default function App() { 
  return ( 
    <main style={{ textAlign: 'center' }}> 
      <Navbar title="My Special App" /> 
    </main> 
  ); 
} 
 
function Navbar({ title }) { 
  return ( 
    <div style={{ marginTop: '20px' }}> 
      <h1 style={{ fontWeight: 'bold' }}>{title}</h1> 
    </div> 
  ) 
}

我們想把這種關(guān)注點(diǎn)分離的概念應(yīng)用到我們的JSX樣式中，把我們的內(nèi)聯(lián)樣式移到一個(gè)CSS樣式表中，我們可以把它導(dǎo)入我們喜歡的任何組件。

另一種重寫內(nèi)聯(lián)樣式的方法是將它們組織成對(duì)象。你可以看到這種模式是什么樣子的:

// src/App.js 
 
export default function App() { 
  const styles = { 
    main: { textAlign: "center" } 
  }; 
 
  return ( 
    <main style={styles.main}> 
      <Navbar title="My Special App" /> 
    </main> 
  ); 
} 
 
function Navbar({ title }) { 
  const styles = { 
    div: { marginTop: "20px" }, 
    h1: { fontWeight: "bold" } 
  }; 
 
  return ( 
    <div style={styles.div}> 
      <h1 style={styles.h1}>{title}</h1> 
    </div> 
  ); 
}

合理使用React context

在你的React項(xiàng)目中，另一個(gè)必不可少的模式是使用React Context(特別是如果你有共同的屬性，你想在你的組件中重復(fù)使用，而你發(fā)現(xiàn)自己寫了很多重復(fù)的props)。

例如，如果我們想在多個(gè)組件之間共享用戶數(shù)據(jù)，而不是多個(gè)重復(fù)的props(一種叫做props drilling的模式)，我們可以使用React庫中的context功能。

在我們的例子中，如果我們想在我們的Navbar和FeaturePosts組件中重復(fù)使用用戶數(shù)據(jù)，我們所需要做的就是把我們的整個(gè)應(yīng)用包裹在一個(gè)提供者組件中。

接下來，我們可以在值prop上傳遞用戶數(shù)據(jù)，并在useContext鉤子的幫助下，在我們的各個(gè)組件中消費(fèi)該上下文。

// src/App.js 
 
import React from "react"; 
 
const UserContext = React.createContext(); 
 
export default function App() { 
  const user = { name: "Reed" }; 
 
  return ( 
    <UserContext.Provider value={user}> 
      <main> 
        <Navbar title="My Special App" /> 
        <FeaturedPosts /> 
      </main> 
    </UserContext.Provider> 
  ); 
} 
 
// src/components/Navbar.js 
 
function Navbar({ title }) { 
  const user = React.useContext(UserContext); 
 
  return ( 
    <div> 
      <h1>{title}</h1> 
      {user && <a href="/logout">Logout</a>} 
    </div> 
  ); 
} 
 
// src/components/FeaturedPosts.js 
 
function FeaturedPosts() { 
  const posts = useFetchPosts(); 
  const user = React.useContext(UserContext); 
 
  if (user) return null; 
 
  return ( 
    <ul> 
      {posts.map((post) => ( 
        <li key={post.id}>{post.title}</li> 
      ))} 
    </ul> 
  ); 
}