你可能需要的React开发小技巧!

更新日期: 2023-01-13阅读: 270标签: 技巧
来自公众号:前端充电宝,作者:CUGGZ 

大家好,我是 CUGGZ。今天来分享 10 个编写更简洁 react 代码的实用小技巧!


1. JSX 简写

如何将 true 值传递给给定的 props?

在下面的示例中,使用 prop showTitle 在导航栏组件中显示应用的标题:

export default function App() {
return (
<main>
<Navbar showTitle={true} />
</main>
);
}

function Navbar({ showTitle }) {
return (
<div>
{showTitle && <h1>标题</h1>}
</div>
)
}

这里将 showTitle 显式设置为布尔值 true,其实这是没必要的,因为组件上提供的任何 prop 都具有默认值 true。因此只需要在调用组件时传递一个 showTitle 即可:

export default function App() {
return (
<main>
<Navbar showTitle />
</main>
);
}

function Navbar({ showTitle }) {
return (
<div>
{showTitle && <h1>标题</h1>}
</div>
)
}

另外,当需要传递一个字符串作为 props 时,无需使用花括号 {} 包裹,可以通过双引号包裹字符串内容并传递即可:


export default function App() {
return (
<main>
<Navbar title="标题" />
</main>
);
}

function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
)
}


2. 将不相关代码移动到单独的组件中

编写更简洁的 React 代码的最简单和最重要的方法就是善于将代码抽象为单独的 React 组件。

下面来看一个例子,应用中最上面会有一个导航栏,并遍历 posts 中的数据文章标题渲染出来:

export default function App() {
const posts = [
{
id: 1,
title: "标题1"
},
{
id: 2,
title: "标题2"
}
];

return (
<main>
<Navbar title="大标题" />
<ul>
{posts.map(post => (
<li key={post.id}>
{post.title}
</li>
))}
</ul>
</main>
);
}

function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
);
}

那我们怎样才能让这段代码更加清洁呢?我们可以抽象循环中的代码(文章标题),将它们抽离到一个单独的组件中,称之为 FeaturedPosts。抽离后的代码如下:

export default function App() {
return (
<main>
<Navbar title="大标题" />
<FeaturedPosts />
</main>
);
}

function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
);
}

function FeaturedPosts() {
const posts = [
{
id: 1,
title: "标题1"
},
{
id: 2,
title: "标题2"
}
];

return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}

如你所见,在 App 组件中,通过其中的组件名称:Navbar 和 FeaturedPosts,就可以快速地看到应用的作用。


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

在上面的例子中,我们将三个组件在一个文件中实现。如果组件逻辑较少,这些写还没啥问题,但是如果组件逻辑较为复杂,那这样写代码的可读性就很差了。为了使应用文件更具可读性,可以将每个组件放入一个单独的文件中。

这可以帮助我们在应用中分离关注点。 这意味着每个文件只负责一个组件,如果想在应用中重用它,就不会混淆组件的来源:

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

export default function App() {
return (
<main>
<Navbar title="大标题" />
<FeaturedPosts />
</main>
);
}
// src/components/Navbar.js
export default function Navbar({ title }) {
return (
<div>
<h1>{title}</h1>
</div>
);
}
// src/components/FeaturedPosts.js
export default function FeaturedPosts() {
const posts = [
{
id: 1,
title: "标题1"
},
{
id: 2,
title: "标题2"
}
];

return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}

此外,通过将每个单独的组件包含在其自己的文件中,可以避免一个文件变得过于臃肿。


4. 将共享函数移动到 React hook 中

在 FeaturedPosts 组件,假设想要从 api 获取文章数据,而不是使用假数据。可以使用 fetch API 来实现:

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

但是,如果想在多个组件执行这个数据请求怎么办?

假设除了 FeaturedPosts 组件之外,还又一个名为 Posts 的组件,其中包含相同的数据。 我们必须复制用于获取数据的逻辑并将其粘贴到该组件中。为了避免重复编写代码,可以定义一个新的 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 (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}


5. 从 JSX 中删除JS

另一种简化组件的方式就是从 JSX 中删除尽可能多的 JavaScript。来看下面的例子:

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

这里我们尝试处理文章的点击事件,可以看到我们的 JSX 变得更加难以阅读。 鉴于函数是作为内联函数包含的,它掩盖了这个组件的用途,以及它的相关函数。

那该如何来解决这个问题?可以将包含 onClick 的内联函数提取到一个单独的处理函数中,给它一个名称 handlePostClick。这样 JSX 的可读性就变高了:

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


6. 格式化内联样式

在 JSX 中编写过多的内联样式就会让代码更难阅读并且变得臃肿:

export default function App() {
return (
<main style={{ textAlign: 'center' }}>
<Navbar title="大标题" />
</main>
);
}

function Navbar({ title }) {
return (
<div style={{ marginTop: '20px' }}>
<h1 style={{ fontWeight: 'bold' }}>{title}</h1>
</div>
)
}

我们要尽可能地将内联样式移动到 css 样式表中。或者将它们组织成对象:

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

return (
<main style={styles.main}>
<Navbar title="大标题" />
</main>
);
}

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

return (
<div style={styles.div}>
<h1 style={styles.h1}>{title}</h1>
</div>
);
}

一般情况下,最好将这些样式写在CSS样式表中,如果样式需要动态生成,可以将其定义在一个对象中。


7. 使用可选链运算符

在 JavaScript 中,我们需要首先确保对象存在,然后才能访问它的属性。如果对象的值为undefined 或者 null,则会导致类型错误。

下面来看一个例子,用户可以在其中编辑他们发布的帖子。只有当isPostAuthor 为 true 时,也就是经过身份验证的用户的 id 与帖子作者的 id 相同时,才会显示该EditButton组件。

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

return isPostAuthor ? <EditButton /> : null;
}

这段代码的问题是 user 可能是 undefined. 这就是为什么我们必须在尝试获取 userId 属性之前使用 && 运算符来确保 user 是一个对象。如果我要访问一个对象中的另一个对象,就不得不再包含一个 && 条件。 这会导致代码变得复杂、难以理解。

JavaScript 可选链运算符(?.)允许我们在访问属性之前检查对象是否存在。用它来简化上面的代码:

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

return isPostAuthor ? <EditButton /> : null;
}

这样将防止任何类型错误,并允许我们编写更清晰的条件逻辑。


8. 带括号的隐式返回

在 React 应用中可以使用 function 关键字的函数声明语法编写组件,也可以使用设置为变量的箭头函数。使用 function 关键字的组件必须在返回任何 JSX 之前使用 return 关键字。

export default function App() {
return (
<Layout>
<Routes />
</Layout>
);
}

通过将返回的代码包裹在一组括号中,可以通过隐式返回(不使用 return 关键字)从函数返回多行 JavaScript 代码。

对于使用箭头函数的组件,不需要包含 return 关键字,可以只返回带有一组括号的 JSX。

const App = () => (
<Layout>
<Routes />
</Layout>
);

export default App;

此外,当使用 .map() 迭代元素列表时,还可以跳过 return 关键字并仅在内部函数的主体中使用一组括号返回 JSX。

function PostList() {
const posts = usePostData();

return posts.map(post => (
<PostListItem key={post.id} post={post} />
))
}


9. 使用空值合并运算符

在 JavaScript 中,如果某个值是假值(如 null、undefined、0、''、NaN),可以使用 || 条件来提供一个备用值。

例如,在产品页面组件需要显示给定产品的价格,可以使用 || 来有条件地显示价格或显示文本“产品不可用”。

export default function ProductPage({ product }) {    
return (
<>
<ProductDetails />
<span>
{product.price || "产品不可用"}
</span>
</>
);
}

现有的代码存在一个问题,如果商品的价格为0,也不会显示产品的价格而显示"产品不可用"。如果左侧为null或者undefined,而不是其他假值,就需要一个更精确的运算符来仅返回表达式的右侧。

这时就可以使用空值合并运算符,当左侧操作数为null或者 undefined 时,将返回右侧操作数。 否则它将返回其左侧操作数:

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

0 ?? 42;
// 0

可以使用空值合并运算符来修复上面代码中的问题:

export default function ProductPage({ product }) {    
return (
<>
<ProductDetails />
<span>{product.price ?? "产品不可用"}
</>
);
}


10. 使用三元表达式

在 React 组件中编写条件时,三元表达式是必不可少的,经常用于显示或隐藏组件和元素。

当然,我们用可以使用三元表达式和模板字符串来给 React 元素动态添加或删除类名。

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

return (
<main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}>
<Routes />
</main>
);
}

这种条件逻辑也可以应用于任何 props:

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

return (
<Layout height={isMobile ? '100vh' : '80vh'}>
<Routes />
</Layout>
);
}


链接: https://www.fly63.com/article/detial/12323

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

分享几个CSS技巧

分享几个CSS技巧包括:创建剪切动画、优化动画性能、实现长宽比、垂直居中等

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

快应用之开发体验纪要

何谓「快应用」呢?它是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!