日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
你可能需要的React開發(fā)小技巧！

大家好，我是 CUGGZ。

創(chuàng)新互聯(lián)長(zhǎng)期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為南潯企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，南潯網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

今天來(lái)分享 10 個(gè)編寫更簡(jiǎn)潔 React 代碼的實(shí)用小技巧！

1、JSX 簡(jiǎn)寫

如何將 true 值傳遞給給定的 props？

在下面的示例中，使用 prop showTitle 在導(dǎo)航欄組件中顯示應(yīng)用的標(biāo)題：

export default function App() {
  return (
    

    
  

);
}

function Navbar({ showTitle }) {
  return (
    

      {showTitle && 
標(biāo)題
}
    

  )
}

這里將 showTitle 顯式設(shè)置為布爾值 true，其實(shí)這是沒(méi)必要的，因?yàn)榻M件上提供的任何 prop 都具有默認(rèn)值 true。因此只需要在調(diào)用組件時(shí)傳遞一個(gè) showTitle 即可：

export default function App() {
  return (
    

      
    

  );
}

function Navbar({ showTitle }) {
  return (
    

      {showTitle && 
標(biāo)題
}
    

  )
}

另外，當(dāng)需要傳遞一個(gè)字符串作為 props? 時(shí)，無(wú)需使用花括號(hào) {} 包裹，可以通過(guò)雙引號(hào)包裹字符串內(nèi)容并傳遞即可：

export default function App() {
  return (
    

      
    

  );
}

function Navbar({ title }) {
  return (
    

      
{title}

    

  )
}

2、將不相關(guān)代碼移動(dòng)到單獨(dú)的組件中

編寫更簡(jiǎn)潔的 React 代碼的最簡(jiǎn)單和最重要的方法就是善于將代碼抽象為單獨(dú)的 React 組件。

下面來(lái)看一個(gè)例子，應(yīng)用中最上面會(huì)有一個(gè)導(dǎo)航欄，并遍歷 posts 中的數(shù)據(jù)將文章標(biāo)題渲染出來(lái)：

export default function App() {
  const posts = [
    {
      id: 1,
      title: "標(biāo)題1"
    },
    {
      id: 2,
      title: "標(biāo)題2"
    }
  ];

  return (
    

      
      

            {posts.map(post => (
              

  •             {post.title}
              

    •         ))}
          

    

  );
}

function Navbar({ title }) {
  return (
    

      
{title}

    

  );
}

那我們?cè)鯓硬拍茏屵@段代碼更加清潔呢？我們可以抽象循環(huán)中的代碼（文章標(biāo)題），將它們抽離到一個(gè)單獨(dú)的組件中，稱之為 FeaturedPosts。抽離后的代碼如下：

export default function App() {
 return (
    

      
      
    

  );
}

function Navbar({ title }) {
  return (
    

      
{title}

    

  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "標(biāo)題1"
    },
    {
      id: 2,
      title: "標(biāo)題2"
    }
  ];

  return (
    

          {posts.map((post) => (
            
  • {post.title}

    •       ))}
        

  );
}

如你所見，在 App 組件中，通過(guò)其中的組件名稱：Navbar 和 FeaturedPosts，就可以快速地看到應(yīng)用的作用。

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

在上面的例子中，我們將三個(gè)組件在一個(gè)文件中實(shí)現(xiàn)。如果組件邏輯較少，這些寫還沒(méi)啥問(wèn)題，但是如果組件邏輯較為復(fù)雜，那這樣寫代碼的可讀性就很差了。為了使應(yīng)用文件更具可讀性，可以將每個(gè)組件放入一個(gè)單獨(dú)的文件中。

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

// src/App.js
import Navbar from './components/Navbar.js';
import FeaturedPosts from './components/FeaturedPosts.js';

export default function App() {
  return (
    

      
      
    

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

      
{title}

    

  );
}

// src/components/FeaturedPosts.js
export default function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "標(biāo)題1"
    },
    {
      id: 2,
      title: "標(biāo)題2"
    }
  ];

  return (
    

          {posts.map((post) => (
            
  • {post.title}

    •       ))}
        

  );
}

此外，通過(guò)將每個(gè)單獨(dú)的組件包含在其自己的文件中，可以避免一個(gè)文件變得過(guò)于臃腫。

4、將共享函數(shù)移動(dòng)到 React hook 中

在 FeaturedPosts 組件，假設(shè)想要從 API 獲取文章數(shù)據(jù)，而不是使用假數(shù)據(jù)。可以使用 fetch API 來(lái)實(shí)現(xiàn)：

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 (
    

          {posts.map((post) => (
            
  • {post.title}

    •       ))}
        

  );
}

但是，如果想在多個(gè)組件執(zhí)行這個(gè)數(shù)據(jù)請(qǐng)求怎么辦？

假設(shè)除了 FeaturedPosts 組件之外，還又一個(gè)名為 Posts 的組件，其中包含相同的數(shù)據(jù)。 我們必須復(fù)制用于獲取數(shù)據(jù)的邏輯并將其粘貼到該組件中。為了避免重復(fù)編寫代碼，可以定義一個(gè)新的 React hook，可以稱之為 useFetchPosts：

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;
}

這樣就可以在任何組件中重用它，包括 FeaturedPosts 組件：

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    

          {posts.map((post) => (
            
  • {post.title}

    •       ))}
        

  );
}

5、從 JSX 中刪除JS

另一種簡(jiǎn)化組件的方式就是從 JSX 中刪除盡可能多的 JavaScript。來(lái)看下面的例子：

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    

          {posts.map((post) => (
            
  •  {
              console.log(event.target, 'clicked!');
            }} key={post.id}>{post.title}

    •       ))}
        

  );
}

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

那該如何來(lái)解決這個(gè)問(wèn)題？可以將包含 onClick 的內(nèi)聯(lián)函數(shù)提取到一個(gè)單獨(dú)的處理函數(shù)中，給它一個(gè)名稱 handlePostClick。這樣 JSX 的可讀性就變高了：

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()
  
  function handlePostClick(event) {
    console.log(event.target, 'clicked!');   
  }

  return (
    

          {posts.map((post) => (
            
  • {post.title}

    •       ))}
        

  );
}

6、格式化內(nèi)聯(lián)樣式

在 JSX 中編寫過(guò)多的內(nèi)聯(lián)樣式就會(huì)讓代碼更難閱讀并且變得臃腫：

export default function App() {
  return (
    

      
    

  );
}

function Navbar({ title }) {
  return (
    

      
{title}

    

  )
}

我們要盡可能地將內(nèi)聯(lián)樣式移動(dòng)到 CSS 樣式表中。或者將它們組織成對(duì)象：

export default function App() {
  const styles = {
    main: { textAlign: "center" }
  };

  return (
    

      
    

  );
}

function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    

      
{title}

    

  );
}

一般情況下，最好將這些樣式寫在CSS樣式表中，如果樣式需要?jiǎng)討B(tài)生成，可以將其定義在一個(gè)對(duì)象中。

7、使用可選鏈運(yùn)算符

在 JavaScript 中，我們需要首先確保對(duì)象存在，然后才能訪問(wèn)它的屬性。如果對(duì)象的值為undefined 或者 null，則會(huì)導(dǎo)致類型錯(cuò)誤。

下面來(lái)看一個(gè)例子，用戶可以在其中編輯他們發(fā)布的帖子。只有當(dāng)isPostAuthor 為 true 時(shí)，也就是經(jīng)過(guò)身份驗(yàn)證的用戶的 id 與帖子作者的 id 相同時(shí)，才會(huì)顯示該EditButton組件。

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user && user.userId;
    
  return isPostAuthor ?  : null;
}

這段代碼的問(wèn)題是 user 可能是 undefined. 這就是為什么我們必須在嘗試獲取 userId 屬性之前使用 && 運(yùn)算符來(lái)確保 user 是一個(gè)對(duì)象。如果我要訪問(wèn)一個(gè)對(duì)象中的另一個(gè)對(duì)象，就不得不再包含一個(gè) && 條件。 這會(huì)導(dǎo)致代碼變得復(fù)雜、難以理解。

JavaScript 可選鏈運(yùn)算符（?.）允許我們?cè)谠L問(wèn)屬性之前檢查對(duì)象是否存在。用它來(lái)簡(jiǎn)化上面的代碼：

export default function EditButton({ post }) {
  const user = useAuthUser();  
  const isPostAuthor = post.author.userId !== user?.userId;
    
  return isPostAuthor ?  : null;
}

這樣將防止任何類型錯(cuò)誤，并允許我們編寫更清晰的條件邏輯。

8、帶括號(hào)的隱式返回

在 React 應(yīng)用中可以使用 function 關(guān)鍵字的函數(shù)聲明語(yǔ)法編寫組件，也可以使用設(shè)置為變量的箭頭函數(shù)。使用 function 關(guān)鍵字的組件必須在返回任何 JSX 之前使用 return 關(guān)鍵字。

export default function App() {
  return (
    
      
    
  );
}

通過(guò)將返回的代碼包裹在一組括號(hào)中，可以通過(guò)隱式返回（不使用 return 關(guān)鍵字）從函數(shù)返回多行 JavaScript 代碼。

對(duì)于使用箭頭函數(shù)的組件，不需要包含 return 關(guān)鍵字，可以只返回帶有一組括號(hào)的 JSX。

const App = () (
  
    
  
);

export default App;

此外，當(dāng)使用 .map() 迭代元素列表時(shí)，還可以跳過(guò) return 關(guān)鍵字并僅在內(nèi)部函數(shù)的主體中使用一組括號(hào)返回 JSX。

function PostList() {
  const posts = usePostData();  
    
  return posts.map(post (
      
  ))
}

9、使用空值合并運(yùn)算符

在 JavaScript 中，如果某個(gè)值是假值（如 null、undefined、0、''、NaN），可以使用 || 條件來(lái)提供一個(gè)備用值。

例如，在產(chǎn)品頁(yè)面組件需要顯示給定產(chǎn)品的價(jià)格，可以使用 || 來(lái)有條件地顯示價(jià)格或顯示文本“產(chǎn)品不可用”。

export default function ProductPage({ product }) {    
  return (
     <>
       
       
          {product.price || "產(chǎn)品不可用"}
       
     
  );
}

現(xiàn)有的代碼存在一個(gè)問(wèn)題，如果商品的價(jià)格為0，也不會(huì)顯示產(chǎn)品的價(jià)格而顯示"產(chǎn)品不可用"。如果左側(cè)為null或者undefined，而不是其他假值，就需要一個(gè)更精確的運(yùn)算符來(lái)僅返回表達(dá)式的右側(cè)。

這時(shí)就可以使用空值合并運(yùn)算符，當(dāng)左側(cè)操作數(shù)為null或者 undefined 時(shí)，將返回右側(cè)操作數(shù)。 否則它將返回其左側(cè)操作數(shù)：

null ?? 'callback';
// "callback"

0 ?? 42;
// 0

可以使用空值合并運(yùn)算符來(lái)修復(fù)上面代碼中的問(wèn)題：

export default function ProductPage({ product }) {    
  return (
     <>
       
       {product.price ?? "產(chǎn)品不可用"}
     
  );
}

10、使用三元表達(dá)式

在 React 組件中編寫條件時(shí)，三元表達(dá)式是必不可少的，經(jīng)常用于顯示或隱藏組件和元素。

當(dāng)然，我們用可以使用三元表達(dá)式和模板字符串來(lái)給 React 元素動(dòng)態(tài)添加或刪除類名。

export default function App() {
  const { isDarkMode } = useDarkMode();
    
  return (
    

      
    

  );
}

這種條件邏輯也可以應(yīng)用于任何 props：

export default function App() {
  const { isMobile } = useDeviceDetect();
    
  return (
    
      
    
  );
}


文章題目：你可能需要的React開發(fā)小技巧！
網(wǎng)站路徑：http://m.5511xx.com/article/djspodg.html