// src/App.js
  
  
  

  
  
  
export default function App() {
  
  
  
  return (
  
  
  
    

  
  
  
      
  
  
  
    
  
  
  
  );
  
  
  
}
  
  
  

  
  
  
function Navbar({ showTitle }) {
  
  
  
  return (
  
  
  
    

  
  
  
      {showTitle && 
My Special App
}
  
  
  
    

 
 
 

  
  
  
// src/App.js
  
  
  

  
  
  
export default function App() {
  
  
  
  return (
  
  
  
    

  
  
  
      
  
  
  
    
  
  
  
  );
  
  
  
}
  
  
  

  
  
  
function Navbar({ showTitle }) {
  
  
  
  return (
  
  
  
    

  
  
  
      {showTitle && 
My Special App
} // title shown!
  
  
  
    

 
 
 

  
  
  
// src/App.js
  
  
  

  
  
  
export default function App() {
  
  
  
  return (
  
  
  
    

  
  
  
      
  
  
  
    
  
  
  
  );
  
  
  
}
  
  
  

  
  
  
function Navbar({ title }) {
  
  
  
  return (
  
  
  
    

  
  
  
      
{title}
  
  
  
    

 
 
 

  
  
  
// 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 (
  
  
  
    

  
  
  
      
  
  
  
      

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

  
  
  
function Navbar({ title }) {
  
  
  
  return (
  
  
  
    

  
  
  
      
{title}
  
  
  
    

 
 
 

  
  
  
// src/App.js
  
  
  

  
  
  
export default function App() {
  
  
  
 return (
  
  
  
    

  
  
  
      
  
  
  
      
  
  
  
    
  
  
  
  );
  
  
  
}
  
  
  

  
  
  
function Navbar({ title }) {
  
  
  
  return (
  
  
  
    

  
  
  
      
{title}
  
  
  
    

 
 
 

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

 接著我們看看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 (
  
  
  
    

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

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

將共享功能移入React hooks

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

我們可以用fetch API來做。你可以看到下面這個結(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 (
  
  
  
    

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

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

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

為了避免這樣做，我們?yōu)槭裁床皇褂靡粋€新的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;
  
  
  
}
 
 
 

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

 
 
 

  
  
  
// src/components/FeaturedPosts.js
  
  
  

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

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

  
  
  
  return (
  
  
  
    

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

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

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

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

 
 
 

  
  
  
// src/components/FeaturedPosts.js
  
  
  

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

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

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

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

 
 
 

  
  
  
// 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 (
  
  
  
    

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

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

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

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

 
 
 

  
  
  
// src/App.js
  
  
  

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

  
  
  
function Navbar({ title }) {
  
  
  
  return (
  
  
  
    
  
  
  
      {title}