1.导入依赖项

咱们通常会在组件文件顶部导入组件所需的依赖项。关于不同类别的依赖项，倡导对它们启动分组，这有助于协助咱们更好的了解组件。可以将导入的依赖分为四类：

//外部依赖importReactfrom"react";import{useRouter}from"next/router";//外部依赖import{Button}from"../src/components/button";//本地依赖import{Tag}from"./tag";import{Subscribe}from"./subscribe";//样式importstylesfrom"./article.module.s";

对导入依赖项启入手动分组或许比拟费事，可以协助咱们智能格局化代码。可以经常使用 prettier-plugin-sort-imports 插件来智能格局化依赖项导入。须要在名目根目录创立 prettier.config.js 性能文件，并在外面性能规定：

module.exports={//其余Prettier性能importOrder:[//自动状况下，首先会搁置外部依赖项//外部依赖"^../(.*)",//本地依赖项，样式除外"^./((?!scss).)*$",//其余"^./(.*)",],importOrderSeparation:true,};

上方是该插件官网给出的例子，输入如下：

importReact,{FC,useEffect,useRef,ChangeEvent,KeyboardEvent,}from'react';import{logger}from'@core/logger';import{reduce,debounce}from'lodash';import{Message}from'../Message';import{createServer}from'@server/node';import{Alert}from'@ui/Alert';import{repeat,filter,add}from'../utils';import{initialize}from'@core/app';import{Popup}from'@ui/Popup';import{createConnection}from'@server/database';

格局化之后的输入如下：

import{debounce,reduce}from'lodash';importReact,{ChangeEvent,FC,KeyboardEvent,useEffect,useRef,}from'react';import{createConnection}from'@server/database';import{createServer}from'@server/node';import{initializeApp}from'@core/app';import{logger}from'@core/logger';import{Alert}from'@ui/Alert';import{Popup}from'@ui/Popup';import{Message}from'../Message';import{add,filter,repeat}from'../utils';

prettier-plugin-sort-imports ：

2.静态定义

在导入依赖项的下方，通常会放那些经常使用TypeScript或Flow等静态类型审核器定义的文件级常量和类型定义。

（1）常量定义

组件中的一切值，例如字符串或许数字，都应该放在文件的顶部，导入依赖项的下方。由于这些都是静态常量，这象征着它们的值不会扭转。因此将它们放在组件中是没无心义的，由于放在组件中的话，它们会在每次从新渲染组件时从新创立。

constMAX_READING_TIME=10;constMETA_TITLE="HelloWorld";

关于更复杂的静态数据结构，可以将其提取到一个独自的文件中，以坚持组件代码整洁。

（2）类型定义

上方是经常使用TypeScript申明的组件的类型：

interfaceProps{id:number;name:string;title:string;meta:Metadata;}

假设这个的类型不须要导出，可以经常使用作为接口称号，这样可以协助咱们立刻识别组件的类型定义，并将其与其余类型区离开。

只要当这个类型须要在多个组件中经常使用时，才须要减少组件称号，例如 ButtonProps ，由于它在导入另一个组件时，不应该与另一个组件的类型抵触。

3.组件定义

定义函数组件的方式有两种： 函数申明 和 箭头函数， 介绍经常使用函数申明的方式，由于这就是语法申明的内容：函数。官网文档的示例中也经常使用了这种方法：

functionArticle(props:Props){/**/}

只会在必需经常使用 forwardRef 时才经常使用箭头函数：

constArticle=React.forwardRef<ArticleElement,Props>((props,ref)=>{/**/});

通常会在组件最后自动导出组件：

exportdefaultArticle;

4.变量申明

接上去，咱们就须要在组件外面启动变量的申明。留意，即使经常使用申明，这里也称为变量，由于它们的值通常会在不同的渲染之间出现变动，只要在口头单个渲染环节时是恒定的。

const{id,name,title}=props;constrouter=useRouter();constinitials=getInitials(name);

这里通常蕴含在 组件级别 经常使用的一切变量，经常使用或定义，详细取决于它们在渲染时期能否更改其值：

一些较大的组件或许须要在组件中申明很多变量。这种状况下，倡导依据它们的初始化方法或许用途对它们启动分组：

//框架hooksconstrouter=useRouter();//自定义hooksconstuser=useLoggedUser();consttheme=useTheme();//从props中解构的数据const{id,title,meta,content,onSubscribe,tags}=props;const{image,author,date}=meta;//组件形态const[eml,setEmail]=React.useState("");const[showMenu,toggleMenu]=React.useState(false);const[activeTag,dispatch]=React.useReducer(reducer,tags);//记忆数据constsubscribe=React.useCallback(onSubscribe,[id]);constsummary=React.useMemo(()=>getSummary(content),[content]);//refsconstsideMenuRef=useRef<HTMLDivElement>(null);constsubscribeRef=useRef<HTMLButtonElement>(null);//计算数据constinitials=getInitials(author);constformattedDate=getDate(date);

变量分组的方法在不同组件之间或许会存在很大的差异，它取决于变量的数量和类型。关键是要将相关变量放在一同，在不同组之间减少一个空行来提高代码的可读性。

Effects部分通常会写在变量申明之后，它们或许是React中最复杂的结构，但从语法的角度来看它们十分便捷：

useEffect(()=>{setLogo(theme==="dark"?"white":"black");},[theme]);

任何蕴含在之内但是在其外部定义的变量，都应该蕴含在依赖项的数组中。

除此之外，还应该经常使用来清算反作用：

useEffect(()=>{functiononScroll(){/*...*/}window.addEventListener("scroll",onScroll);return()=>window.removeEventListener("scroll",onScroll);},[]);

6.渲染内容

组件的外围就是它的内容，React组件的内容经常使用JSX语法定义并在阅读器中出现为HTML。所以，介绍将函数组件的语句尽或许接近文件的顶部。其余一切都只是细节，它们应该放在文件较下的位置。

functionArticle(props:Props){//变量申明//effects//❌自定义的函数不倡导放在return部分的前面functiongetInitials(){/*...*/}return/*content*/;}exportdefaultArticle;

functionArticle(props:Props){//变量申明//effectsreturn/*content*/;//✅自定义的函数倡导放在return部分的前面functiongetInitials(){/*...*/}}exportdefaultArticle;

难道不应该放在函数的最后吗？其实不然，关于惯例函数，必需是要将放在最后的。但是，React组件并不是便捷的函数，它们通常蕴含具备各种用途的嵌套函数，例如事情处置程序。最后的语句以及前面的一堆其余函数，实践上阻碍了代码的阅读，使得很难找到组件渲染的内容：

当然，可以依据团体喜好来选择函数定义的位置。假设将函数放在的下方，那么假构想要经常使用箭头函数来自定义函数，那就只能经常使用来定义，由于和不存在变量优化，不能在定义的箭头函数之前经常使用它。

7.部分渲染

在处置大型JSX代码时，将某些内容块提取为独自的函数来渲染组件的一部分是很有协助的，相似于将大型函数合成为多个较小的函数。

functionArticle(props:Props){//...return(<article><h1>{props.title}</h1>{renderBody()}{renderFooter()}</article>);functionrenderBody(){return/*articlebodyJSX*/;}functionrenderFooter(){return/*articlefooterJSX*/;}}exportdefaultArticle;

那为什么不将它们提取为组件呢？关于部分渲染函数其实是存在争议的，一种说法是要防止从组件内定义的任何函数中前往JSX，另一种说法是将这些函数提取为独自的组件。

functionArticle(props:Props){//...return(<article><h1>{props.title}</h1><ArticleBody{...props}/><ArticleFooter{...props}/></article>);}exportdefaultArticle;functionArticleBody(props:Props){}functionArticleFooter(props:Props){}

在这种状况下，就必需手动将子组件所需的部分变量经过传递。在经常使用TypeScript时，咱们还须要为组件的定义额外的类型。最终代码就会变得臃肿，这就会造成代码变得难以阅读和了解：

functionArticle(props:Props){const[status,setStatus]=useState("");return(<article><h1>{props.title}</h1><ArticleBody{...props}status={status}/><ArticleFooter{...props}setStatus={setStatus}/></article>);}exportdefaultArticle;interfaceBodyPropsextendsProps{status:string;}interfaceFooterPropsextendsProps{setStatus:Dispatch<SetStateAction<string>>;}functionArticleBody(props:BodyProps){}functionArticleFooter(props:FooterProps){}

这些独自的组件无法以 重复经常使用 ，它们仅被它们所属的组件经常使用，独自经常使用它们是没无心义的。因此，这种状况下，还是倡导将部分JSX提取成渲染函数。

8.部分函数

React组件通常会蕴含事情处置函数，它们是嵌套函数，通常会更改选件的外部形态或调度操作以降级组件的形态。

另一类嵌套函数就是闭包，它们是读取组件形态或的不纯函数，用于构建组件逻辑。

functionArticle(props:Props){const[email,setEmail]=useState("");return(<article>{/*...*/}<formonSubmit={subscribe}><inputtype="email"value={email}onChange={setEmail}/><buttontype="submit">Subscribe</button></form></article>);//事情处置functionsubscribe():void{if(canSubscribe()){//发送订阅恳求}}functioncanSubscribe():boolean{//基于props和state的逻辑}}exportdefaultArticle;

9.纯函数

最后就是纯函数，咱们可以将它们放在组件文件的底部，在React组件之外：

functionArticle(props:Props){//...//❌纯函数不应该放在组件之中functiongetInitials(str:string){}}exportdefaultArticle;

functionArticle(props:Props){//...}//✅纯函数应该放在组件之外functiongetInitials(str:string){}exportdefaultArticle;

首先，纯函数没有依赖项，如props、形态或部分变量，它们接纳一切依赖项作为参数。这象征着可以将它们放在任何中央。但是，将它们放在组件之外还有其余要素：

完整示例

上方是一个完整的典型React组件示例。由于重点是文件的结构，因此省略了成功细节。

//1️⃣导入依赖项importReactfrom"react";import{Tag}from"./tag";importstylesfrom"./article.module.scss";//2️⃣静态定义constMAX_READING_TIME=10;interfaceProps{id:number;name:string;title:string;meta:Metadata;}//3️⃣组件定义functionArticle(props:Props){//4️⃣变量定义constrouter=useRouter();consttheme=useTheme();const{id,title,content,onSubscribe}=props;const{image,author,date}=meta;const[email,setEmail]=React.useState("");const[showMenu,toggleMenu]=React.useState(false);constsummary=React.useMemo(()=>getSummary(content),[content]);constinitials=getInitials(author);constformattedDate=getDate(date);//5️⃣effectsReact.useEffect(()=>{//...},[]);//6️⃣渲染内容return(<article><h1>{title}</h1>{renderBody()}<formonSubmit={subscribe}>{renderSubscribe()}</form></article>);//7️⃣部分渲染functionrenderBody(){/*...*/}functionrenderSubscribe(){/*...*/}//8️⃣部分函数functionsubscribe(){/*...*/}}//9️⃣纯函数functiongetInitials(str:string){/*...*/}exportdefaultArticle;