如何编写CleanerReact代码

大家好，我是小弋。

创新互联是一家专注于做网站、成都网站设计与策划设计,昆山网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:昆山等地区。昆山做网站价格咨询:028-86922220

今天分享的内容是如何编写干净的React代码。

正文

作为React开发者，我们都希望写出更干净的代码，更简单，更容易阅读。

在本指南中，我把一些编写更干净的React代码的七个顶级方法放在一起，使得构建React项目和审查你的代码更容易。

总的来说，学习如何编写更干净的React代码将使你成为一个更有价值的、整体上更快乐的React开发者，所以让我们马上开始吧!

主要涉及以下几个点：

合理使用jsx。
把不相关的代码移到一个独立的组件中。
为每个组件创建单独的文件。
将共享功能移入React hooks。
尽可能多地从你的JSX中删除JavaScript。
格式化内联样式，减少臃肿的代码。
合理使用React context。

合理使用JSX

你如何向一个给定的prop传递一个true的值?

在下面的例子中，我们使用showTitle在Navbar组件中显示我们应用程序的标题。

 
 
 
  
  
  // src/App.js
  
  
  
  
  
  export default function App() {
  
  
    return (
  
  
      
  
  
        
  
  
      
  
  
    );
  
  
  }
  
  
  
  
  
  function Navbar({ showTitle }) {
  
  
    return (
  
  
      
  
  
        {showTitle && My Special App
}

)

}

我们是否需要明确地将showTitle设置为布尔值true?我们不需要!

一个快速的速记方法是，在一个组件上提供的任何prop的默认值都是true。

因此，如果我们在Navbar上添加showTitle，我们的标题元素就会显示出来。

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

当你传递一个字符串的值时，你不需要用大括号把它包起来。

如果我们要设置导航条的标题，使用title的prop时，我们可以把它的值放在双引号中。

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

// 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: "How to Build YouTube with React"
},
{
id: 2,
title: "How to Write Your First React Hook"
}
];
return (
- {posts.map((post) => (
- {post.title}
- ))}
);
}

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

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

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

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

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

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

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

// src/App.js
import React from "react";
const UserContext = React.createContext();
export default function App() {
const user = { name: "Reed" };
return (
);
}
// src/components/Navbar.js
function Navbar({ title }) {
const user = React.useContext(UserContext);
return (
{title}
{user && Logout}
);
}
// src/components/FeaturedPosts.js
function FeaturedPosts() {
const posts = useFetchPosts();
const user = React.useContext(UserContext);
if (user) return null;
return (
- {posts.map((post) => (
- {post.title}
- ))}
);
}

如何编写CleanerReact代码

正文

合理使用JSX

My Special App

My Special App

{title}

把不相关的代码移到一个独立的组件中

{title}

{title}

为每个组件创建单独的文件

{title}

将共享功能移入React hooks

尽可能多地从你的JSX中删除JavaScript

格式化内联样式，减少臃肿的代码

合理使用React context

{title}

总结