提高 React 项目整洁度的 21 个最佳实践 点击关注公众号，技术干货及时送达 React 在如何组织结构方面非常开放。这正是为什么我们有责任保持项目的整洁和可维护性。 今天，我们将讨论一些改善 React 应用程序健康状况的最佳实践。这些规则被广泛接受。因此，掌握这些知识至关重要。 所有内容都将以代码展示，所以做好准备！ 1. 使用 JSX 简写尝试使用 JSX 简写来传递 Boolean 布尔值变量。假设您想要控制导航栏组件的标题可见性。 Bad ?returnNavbarshowTitle={true}/; Good ?returnNavbarshowTitle/; 2. 使用三元运算符假设你想根据角色显示用户的详细信息。 Bad ?const{role}=user; if(role===ADMIN){ returnAdminUser/; }else{ returnNormalUser/; } Good ?const{role}=user; returnrole===ADMIN?AdminUser/:NormalUser/; 3. 利用对象字面量对象字面量可以帮助我们的代码更具可读性。假设你想根据角色显示三种类型的用户。不能使用三元，因为选项数量超过两个。 Bad ?const{role}=user; switch(role){ caseADMIN: returnAdminUser/; caseEMPLOYEE: returnEmployeeUser/; caseUSER: returnNormalUser/; } Good ?const{role}=user; constcomponents={ ADMIN:AdminUser, EMPLOYEE:EmployeeUser, USER:NormalUser, }; constComponent=components[role]; returnComponent/; 现在看起来好多了。 4. 使用 Fragments 语法始终使用 Fragment 而不是 Div。它可以保持代码整洁，并且也有利于性能，因为在虚拟 DOM 中创建的节点少了一个。 Bad ?return( div Component1/ Component2/ Component3/ /div ); Good ?return( Component1/ Component2/ Component3/ ); 5. 不要在渲染中定义函数不要在渲染中定义函数。尝试将渲染内部的逻辑保持在绝对最低限度。 Bad ?return( buttononClick={()=dispatch(ACTION_TO_SEND_DATA)} {""} //NOTICEHEREThisisabadexample /button ); Good ?constsubmitData=()=dispatch(ACTION_TO_SEND_DATA); returnbuttononClick={submitData}Thisisagoodexample/button; 使用 MemoReact.PureComponent 和 Memo 可以显着提高应用程序的性能。它们帮助我们避免不必要的渲染。 Bad ?importReact,{useState}from"react"; exportconstTestMemo=()={ const[userName,setUserName]=useState("faisal"); const[count,setCount]=useState(0); constincrement=()=setCount((count)=count+1); return( ChildrenComponentuserName={userName}/ buttononClick={increment}Increment/button }; constChildrenComponent=({userName})={ console.log("rendered",userName); returndiv{userName}/div; }; 尽管子组件应该只渲染一次，因为 count 的值与 ChildComponent 无关。但是，每次单击按钮时它都会呈现。 Good ?让我们将 ChildrenComponent 编辑为： importReact,{useState}from"react"; constChildrenComponent=React.memo(({userName})={ console.log("rendered"); returndiv{userName}/div; }); 现在，无论您单击该按钮多少次，它只会在必要时呈现。 7. 将 CSS 放入 JavaScript 中儿童不宜，禁止观看！！！ 8. 使用对象解构使用对象解构对你有利。假设你需要显示用户的详细信息。 Bad ?return( div{user.name}/div div{user.age}/div div{user.profession}/div ); Good ?const{name,age,profession}=user; return( div{name}/div div{age}/div div{profession}/div ) 9. 字符串参数不需要大括号将字符串作为参数传递给子组件时。 Bad ?returnNavbartitle={"MySpecialApp"}/; Good ?returnNavbartitle="MySpecialApp"/; 10. 从 JSX 中删除 JS 代码如果任何 JS 代码不能用于渲染或 UI 功能，请将其移出 JSX。 Bad ?return( ul {posts.map((post)=( li onClick={(event)={ console.log(event.target,"clicked!");//-THISISBAD }} key={post.id} {post.title} /li ))} /ul ); Good ?constonClickHandler=(event)={ console.log(event.target,"clicked!"); }; return( ul {posts.map((post)=( lionClick={onClickHandler}key={post.id} {post.title} /li ))} /ul ); 11. 使用模板字符串使用模板文字构建大字符串。避免使用字符串连接。它又漂亮又干净。 Bad ?constuserDetails=user.name+"'sprofessionis"+user.proffession; returndiv{userDetails}/div; Good ?constuserDetails=`${user.name}'sprofessionis${user.proffession}`; returndiv{userDetails}/div; 12. 按顺序引入始终尝试按特定顺序导入内容。它提高了代码的可读性。 Bad ?importReactfrom"react"; importErrorImgfrom"../../assets/images/error.png"; importstyledfrom"styled-components/native"; importcolorsfrom"../../styles/colors"; import{PropTypes}from"prop-types"; Good ?经验法则是保持导入顺序如下： 内置;外部的;自己编写的;所以上面的例子就变成了: importReactfrom"react"; import{PropTypes}from"prop-types"; importstyledfrom"styled-components/native"; importErrorImgfrom"../../assets/images/error.png"; importcolorsfrom"../../styles/colors"; 13. 使用隐式返回使用 JavaScript 的隐式返回功能来编写漂亮的代码。假设您的函数执行简单的计算并返回结果。 Bad ?constadd=(a,b)={ returna+ }; Good ?constadd=(a,b)=a+ 14. 组件命名始终对组件使用 PascalCase，对实例使用 CamelCase。 Bad ?importreservationCardfrom"./ReservationCard"; constReservationItem=ReservationCard/; Good ?importReservationCardfrom"./ReservationCard"; constreservationItem=ReservationCard/; 15. 保留属性命名不要使用 DOM 组件的属性名称用于在组件之间传递 props，因为其他人可能不会预期这些名称。 Bad ?MyComponentstyle="dark"/ MyComponentclassName="dark"/ Good ?MyComponentvariant="fancy"/ 16. 引号对 JSX 属性使用双引号，对所有其他 JS 使用单引号。 Bad ?Foobar='bar'/ Foostyle={{left:"20px"}}/ Good ?Foobar="bar"/ Foostyle={{left:'20px'}}/ 17. Prop 参数命名如果 prop 值是 React 组件，则始终使用驼峰命名法作为 prop 名称或 PascalCase。 Bad ?ComponentUserName="hello"phone_number={12345678}/ Good ?MyComponent userName="hello" phoneNumber={12345678} Component={SomeComponent} / 18. 括号中的 JSX如果您的组件跨越一行以上，请始终将其括在括号中。 Bad ?return( MyComponentvariant="long" MyChild/ /MyComponent ); 20230804074846?我这破垃圾编辑器自动格式化了,根部不存在这个问题哈哈哈哈哈 ?Good ?return( MyComponentvariant="long" MyChild/ /MyComponent ); 19. 自动闭合标签如果您的组件没有任何子组件，请使用自闭合标签。它提高了可读性。 Bad ?SomeComponentvariant="stuff"/SomeComponent Good ?SomeComponentvariant="stuff"/ 20. 方法名称中的下划线不要在任何内部 React 方法中使用下划线。 Bad ?const_onClickHandler=()={ //dostuff }; Good ?constonClickHandler=()={ //dostuff }; 21. 替代文本在你的 img 标签中始终要包括 alt 属性。不要在 alt 属性中使用 "picture" 或 "image"，因为屏幕阅读器已经默认将 img 元素识别为图像，无需重复说明。 Bad ?imgsrc="hello.jpg"/ imgsrc="hello.jpg"alt="Pictureofmerowingaboat"/ Good ?imgsrc="hello.jpg"alt="Mewavinghello"/ 参考资源21 Best Practices for a Clean React Project总结就这样吧。如果你已经做到了这一步，那么恭喜您！我希望你能从本文中学到一两件事。 最后分享两个我的两个开源项目,它们分别是: 前端脚手架 create-neat在线代码协同编辑器这两个项目都会一直维护的,如果你也喜欢,欢迎 star ?????? 如果文章对你有帮助的话欢迎「关注+点赞+收藏」～ 阅读原文