作为一名React开发者，你或者会面临上方几个疑问：

为处置上述疑问，上方引见五种React组件设计形式，并对比它们的优缺陷。

1.复合组件形式

复合组件形式是一种经过将多个繁难组件组合在一同创立更复杂组件的方法。这种形式使得组件的逻辑分别，每个繁难组件担任特定的性能。经过复合组件，可以轻松构建可复用的、性能完备的组件。

假构想要设计一个定制化水平高，API繁难了解的组件，可以思考这个形式，这种形式不会发生多层Props传递的状况。

importReact,{useState}from'react';//基础按纽组件constButton=({label,onClick})=>(<buttononClick={onClick}>{label}</button>);//基础文本组件constTextBox=({value,onChange})=>(<inputvalue={value}onChange={onChange}/>);//复合组件constLoginPanel=()=>{const[username,setUsername]=useState('');const[pass,setPassword]=useState('');consthandleLogin=()=>{//成功登录逻辑console.log(`Logginginwith${username}and${password}`);};return(<div><TextBoxvalue={username}onChange={(e)=>setUsername(e.target.value)}/><TextBoxvalue={password}onChange={(e)=>setPassword(e.target.value)}/><ButtononClick={handleLogin}/></div>);};//经常使用示例const=()=>{return(<LoginPanel/>);};exportdefaultApp;

在这个例子中，LoginPanel是一个复合组件，它蕴含了两个基本组件TextBox和一个带有登录逻辑的Button。

好处：

实用场景：

2.受控组件形式

受控组件形式就是将组件转换为受控组件，经过间接修正Props影响组件外部的形态，普通在表单组件中比拟罕用。

importReact,{useState}from'react';constButton=({label,onClick})=>(<buttononClick={onClick}>{label}</button>);constTextBox=({value,onChange})=>(<inputvalue={value}onChange={onChange}/>);//受控组件形式的复合组件constControlledLoginPanel=()=>{const[loginData,setLoginData]=useState({username:'',password:''});consthandleInputChange=(e)=>{const{name,value}=e.target;setLoginData((prevData)=>({...prevData,[name]:value,}));};consthandleLogin=()=>{//成功登录逻辑console.log(`Logginginwith${loginData.username}and${loginData.password}`);};return(<div><TextBoxvalue={loginData.username}onChange={handleInputChange}/><TextBoxvalue={loginData.password}placeholder="Password"/><ButtononClick={handleLogin}/></div>);};//经常使用示例constApp=()=>{return(<ControlledLoginPanel/>);};exportdefaultApp;

在这个例子中，ControlledLoginPanel组件就是一个受控组件的例子，其中的输入框的值由React形态治理。

好处：

实用场景：

3.自定义Hooks形式

自定义Hooks形式是一种将组件逻辑提取为可重用的函数的方法。将关键的逻辑转移到一个Hooks中。用户可以访问这个Hooks，并地下了几个外部逻辑(形态、处置程序)，经常使用户能够更好地控制组件。

importReact,{useState}from'react';constButton=({label,onClick})=>(<buttononClick={onClick}>{label}</button>);constTextBox=({value,onChange,placeholder})=>(<inputvalue={value}onChange={onChange}placeholder={placeholder}/>);//自定义Hook，处置登录表单逻辑constuseLoginForm=()=>{const[loginData,setLoginData]=useState({username:'',password:''});consthandleInputChange=(e)=>{const{name,value}=e.target;setLoginData((prevData)=>({...prevData,[name]:value,}));};consthandleLogin=()=>{//在这里成功登录逻辑console.log(`经常使用用户名${loginData.username}和明码${loginData.password}登录`);};return{loginData,handleInputChange,handleLogin,};};//在组件中经常使用自定义HookconstControlledLoginPanel=()=>{const{loginData,handleInputChange,handleLogin}=useLoginForm();return(<div><TextBoxvalue={loginData.username}onChange={handleInputChange}placeholder="用户名"/><TextBoxvalue={loginData.password}onChange={handleInputChange}placeholder="明码"/><ButtononClick={handleLogin}/></div>);};//经常使用示例constApp=()=>{return(<ControlledLoginPanel/>);};exportdefaultApp;

在这个例子中，咱们将与登录表单相关的形态和逻辑抽离到一个自定义useLoginFormHook中。使得ControlledLoginPanel组件更专一于渲染UI，缩小了形态和事情处置逻辑的混同。

好处：

4.PropsGetters形式

形式3中的自定义Hooks提供了很好的控制方式；但是比拟难以集成，经常使用者须要依照组件提供的Hooks与State相联合启动编写逻辑，提高了集成的复杂度。PropsGetters形式则是经过简化这一环节来成功。Getter是一个前往多个属性的函数，它具备无心义的称号，使得开发者能够分明地知道哪个Getter对应于哪个JSX元素。

importReact,{useState}from'react';constButton=({getLabel,handleClick})=>(<buttononClick={handleClick}>{getLabel()}</button>);constTextBox=({getValue,onChange,placeholder})=>(<inputvalue={getValue()}onChange={onChange}placeholder={placeholder}/>);constControlledLoginPanel=({getUsernameProps,getPasswordProps,handleLogin})=>{return(<div><TextBox{...getUsernameProps()}/><TextBox{...getPasswordProps()}/><ButtongetLabel={()=>'Login'}handleClick={handleLogin}/></div>);};//经常使用PropsGetters形式的HooksconstuseLoginForm=()=>{const[loginData,setLoginData]=useState({username:'',password:''});consthandleInputChange=(name)=>(e)=>{const{value}=e.target;setLoginData((prevData)=>({...prevData,[name]:value,}));};consthandleLogin=()=>{//成功登录逻辑console.log(`Logginginwith${loginData.username}and${loginData.password}`);};constgetUsernameProps=()=>({getValue:()=>loginData.username,onChange:handleInputChange('username'),});constgetPasswordProps=()=>({getValue:()=>loginData.password,onChange:handleInputChange('password'),});return{getUsernameProps,getPasswordProps,handleLogin,};};//经常使用示例constApp=()=>{const{getUsernameProps,getPasswordProps,handleLogin}=useLoginForm();return(<ControlledLoginPanelgetUsernameProps={getUsernameProps}getPasswordProps={getPasswordProps}handleLogin={handleLogin}/>);};exportdefaultApp;

在这个例子中，咱们基于形式3启动了革新，把ControlledLoginPanel组件须要的Props经过函数的方式启动失掉，以成功更灵敏、更简便的组件复用。

好处：

缺陷：

实用场景：

5.StateReducer形式

StateReducer形式是一种经过将组件的形态更新逻辑委托给一个函数，成功更灵敏的形态治理方式。这种形式理论在处置复杂的形态逻辑时十分有用。

importReact,{useState}from'react';constTextInput=({getInputProps})=>{constinputProps=getInputProps();return<input{...inputProps}/>;};constStateReducerExample=()=>{//初始形态为一个空字符串const[inputValue,setInputValue]=useState('');//stateReducer函数用于处置形态的变动conststateReducer=(state,changes)=>{//经常使用switchcase处置不同的形态变动状况switch(Object.keys(changes)[0]){//假设变动的是value属性case'value'://假设输入的字符数量超越10个，则不准许变动if(changes.value.length>10){returnstate;}break;//可以参与其余case处置不同的形态变动default:break;}//前往新的形态return{...state,...changes};};//失掉传递给子组件的propsconstgetInputProps=()=>{return{value:inputValue,//在输入框变动时调用stateReducer处置形态变动onChange:(e)=>setInputValue(stateReducer({value:e.target.value})),};};return(<div><h3>StateReducerExample</h3>{/*将失掉的props传递给TextInput组件*/}<TextInputgetInputProps={getInputProps}/></div>);};exportdefaultStateReducerExample;

在这个例子中，StateReducerExample组件蕴含一个输入框，经过getInputProps函数将输入框的值和变动处置逻辑传递给TextInput组件。stateReducer函数处置形态的变动，确保输入的字符数量不超越10个。

好处：

缺陷：

实用场景：

论断

经过这5种React组件设计形式，咱们对控制度和复杂度有了更明晰的意识，下图是复杂度和控制度的一个趋向图。

图片

总体来说，设计的组件越灵敏，性能也就越弱小，复杂度也会更高。作为开发人员，倡导大家依据自己的业务逻辑以及经常使用人群，灵敏经常使用以上的设计形式。

参考文章

React组件设计形式

如何开发并维护一个开源的 React 组件

一、文件上传方面：（1）Uploadify简单说来，是基于Jquery的一款文件上传插件。 （2）Plupload是一个web浏览器上的界面友好的文件上传模块，可显示上传进度、图像自动缩略和上传分块。 可同时上传多个文件。 二、图表制作方面：（1） 是基于数据操作文档的JavaScript库。 D3帮助你使用HTML，SVG和CSS生动地展现数据。 D3不需要你使用某个特定的框架，它的重点在于对主流浏览器的兼容，同时结合了强大的虚拟化组件，以数据驱动的方式去操作DOM。 D3支持的主流浏览器不包括IE8及以前的版本。 D3测试了Firefox、Chrome、Safari、Opera和IE9。 D3的大部分组件可以在旧的浏览器运行。 （2）JSCharts 是一款免费的开源JavaScript图表脚本库，支持XML数据格式，可以帮助用户快速创建各类图表，无需你具备相应的技术知识，甚至也不用你操作那些繁琐的专业工具，省时省力。 三、Jqueryui方面：（1）Chico UI和 jQuery UI 一样，Chico UI 包含 auto-complete, blink, carousel, countdown, date-picker, dropdown, expand, calendar 等诸多逐渐，同时还提供一个 CSS 布局框架，用于实现网页布局和表格。

如何写出漂亮的 React 组件

首先需要有如下的特性：

我觉得我们在开发中经常忽略掉的一个模式就是所谓的Stateless Functional Component，不过这是我个人最爱的React组件优化模式，没有之一。我喜爱这种模式不仅仅因为它们能够减少大量的模板代码，而且因为它们能够有效地提高组件的性能表现。总而言之，SFC能够让你的应用跑的更快，长的更帅。

直观来看，SFC就是指那些仅有一个渲染函数的组件，不过这简单的改变就可以避免很多的无意义的检测与内存分配。使用SFC模式的话，大概可以省下29%的代码。

实际上，SFC最迷人的地方不仅仅是其代码量的减少，还有就是对于可读性的提高。SFC模式本身就是所谓纯组件的一种最佳实践范式，而移除了构造函数并且将_handleClick()这个点击事件回调函数提取出组件外，可以使JSX代码变得更加纯粹。另一个不错的地方就是SFC以Arrow Function的方式来定义了输入的Props变量，即以Object Destructring语法来声明组件所依赖的Props:

const RelatedSearch = ({ relatedQueries, onClick }) =>

这样不仅能够使组件的Props更加清晰明确，还能够避免冗余的表达式，从而使代码的可读性更好。