北京网站设计排名,手机网站 html,以下哪些不属于h5制作软件,长沙网站制作费用随着 React.js 的不断进化#xff0c;现在的它已经成为 Web 组件中最受欢迎的视图库之一。但是你手中的它#xff0c;是否真的能够正常工作呢#xff1f;本文将主要描述 5 个关于React 组件的最佳实践#xff0c;希望对正在关注 React 组件的你有所帮助。我自己是一名从事了…随着 React.js 的不断进化现在的它已经成为 Web 组件中最受欢迎的视图库之一。但是你手中的它是否真的能够正常工作呢本文将主要描述 5 个关于React 组件的最佳实践希望对正在关注 React 组件的你有所帮助。我自己是一名从事了多年开发的web前端老程序员目前辞职在做自己的web前端私人定制课程今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货各种框架都有整理送给每一位前端小伙伴想要获取的可以关注我的头条号并在后台私信我前端即可免费获取。 问 题 React.js 已成为 Web 组件中最受欢迎的视图库。一路进化下来它发展出了众多特性如今已成为创建优秀的 Web 应用程序的一套完整工具。它的社区经历了爆发式增长尤其在过去的 2-3 年中网络上出现了成千上万有关这项技术的教程。因此每位初学者在开始学习 React 时都应该做一件事情那就是阅读其文档或教程进而创建他们的第一个组件就像我在 Codeworks 上开始我的学习旅途一样:https://codeworks.me/?utm_sourcemediumutm_mediumorganicutm_campaignmarco_ghiani_hackernoon_how_to_write_clean_react_components但我的问题是你能肯定你的 React 组件遵循了最佳实践吗简单来说它们是不是正常工作呢脏组件长什么样为了更好地说明我的观点让我们来看看下面的 React 组件import React from react;import ./Listcomponent.css;class Listcomponent extends React.Component { constructor(props) { super(props); this.state { lastClickedButton: }; } render() { return ( The last clicked button is {this.state.lastClickedButton} { this.setState({ lastClickedButton: Create }); this.props.createSomething(); }} classNamemy-button Create { this.setState({ lastClickedButton: Read }); this.props.readSomething(); }} classNamemy-button Read { this.setState({ lastClickedButton: Update }); this.props.updateSomething(); }} classNamemy-button Update { this.setState({ lastClickedButton: Destroy }); this.props.destroySomething(); }} classNamemy-button Destroy ); }}一个肮脏的 React 组件这是一个完全正常工作的 React 组件可以在整个应用程序中多次使用。它渲染了一个按钮列表这些按钮会触发某个事件组件还会显示最近被点击的是哪个按钮。总之很简单。你可能会想“好吧……如果能用那就没什么问题”但如果有人告诉你现在这个用 62 行代码写成的组件其实用少得多的代码也能做出来呢所以我们开始做扫除吧1. 优先使用 React Hooks 实现函数组件随着 React 16.8 引入 Hooks我们就可以在类声明中使用函数组件来构成有状态组件(如果我们需要处理任何逻辑)了。在本文中我们不会深入讨论类与函数组件或 React Hooks。但在 React 社区中众所周知的是最好优先创建函数组件尤其是现在我们有了 Hooks 这么好用的工具。Hooks 允许你复用状态逻辑而无需更改组件层次结构。接下来让我们看一下第一次重构后组件的样子import React, { useState } from react;import ./ListComponent.css;const ListComponent props { const [lastClickedButton, setLastClickedButton] useState(); return ( The last clicked button is {lastClickedButton} { setLastClickedButton(Create); props.createSomething(); }} classNamemy-button Create { setLastClickedButton(Read); props.ReadSomething(); }} classNamemy-button Read { setLastClickedButton(Update); props.updateSomething(); }} classNamemy-button Update { setLastClickedButton(Destroy); props.DestroySomething(); }} classNamemy-button Destroy );};用 React Hooks 重构成函数组件很好我们的组件已经短一些了我们还删除了 类 语法但仍然需要做许多优化工作。2. 利用好它我们可以在这个组件中找到什么模式吗看一下代码似乎我们每次都渲染一个相似的 button 元素每个元素都接受一些相似的 props所以非常适合把这个长组件切成许多小块。因此我们可以进一步重构这个组件创建另一个小的函数组件来渲染按钮并传递一些属性如 action、setClicked 和 titleimport React, { useState } from react;import ./ListComponent.css;const ListItemComponent props { return { { props.setClicked(props.title); props.action(); }} classNamemy-button {props.title} );};const ListComponent props { const [lastClickedButton, setLastClickedButton] useState(); return The last clicked button is {lastClickedButton} );};好的我们的组件开始变好看了但是仍有改进的余地让我们继续吧3. 正确命名和 props 解构setLastClickedButton 是 setter 函数的描述性名称但我们需要保持代码的可读性和简洁因此请务必起一个最短、最精炼的名字这是很重要的。我们将其重命名为 setClicked。同样只要有可能从 props 对象解构出来你需要的东西就可以避免多次重复使用 props 这个词。在 ListItem 组件中我们现在按解构后的函数参数中的名称—— {action, title, setClicked}来访问 props。下面看看这两个变化import React, { useState } from react;import ./List.css;const ListItem ({ action, title, setClicked }) { return { { setclicked(title); action(); }} classNamemy-button {title} );};const List ({ create, read, update, destroy }) { const [clicked, setClicked] useState(); return ( The last clicked button is {clicked} );};太好了我们大大减少了组件声明的长度但是我们仍然可以做得更好4. 愿 PropTypes 与你同在经过清理之后该是用到编写组件时最棒的实践的时候了使用 PropTypes我们可以验证接收到的 props以避免由于不同数据类型而导致的错误。例如接收字符串“0”并尝试将其与数字 0 严格对比(“0” 0- FALSE!!!)import React, { useState } from react;import PropTypes from prop-types;const ListItem ({ action, title, setClicked }) { return ( { setClicked(title); action(); }} classNamemy-button {title} );};ListItem.propTypes { action: PropTypes.func, setClicked: PropTypes.func, title: PropTypes.string};const List ({ create, read, update, destroy }) { const [clicked, setClicked] useState(); return ( The last clicked button is {clicked} );};List.propTypes { create: PropTypes.func, read: PropTypes.func, update: PropTypes.func, destroy: PropTypes.func,};export default List;PropTypes 验证5. 切成小块想不到吧——我们现在的组件与初始版本差不多一样长但请仔细观察我们现在手上的代码。我们看到了两个不同的组件可以将它们划分为两个模块从而使它们在整个应用程序中都能复用。import React, { useState } from react;import PropTypes from prop-types;import ListItem from ./ListItem.jsconst List ({ create, read, update, destroy }) { const [clicked, setClicked] useState(); return ( The last clicked button is {clicked} );};};List.propTypes { create: PropTypes.func, read: PropTypes.func, update: PropTypes.func, destroy: PropTypes.func,};export default List;List.jsimport React, { useState } from react;import PropTypes from prop-types;const ListItem ({ action, title, setClicked }) { return ( { setClicked(title); action(); }} classNamemy-button {title} );};ListItem.propTypes { action: PropTypes.func, setClicked: PropTypes.func, title: PropTypes.string};export default ListItem;ListItem.js 小 结 当你开始研究 React 组件时本文对初始组件的这些清理工作提供了一些值得参考的优秀实践。当然我们可以针对这个最终结果执行其他很多优化操作但路要一步一步走这五个优秀实践是很好的起点。原文链接https://mp.weixin.qq.com/s/s90qbKR51lJl7p0ZkuFNbg作者 前端之巅
