1、有状态组件和无状态组件

其实换言之就是需不需要一套react的生命周期来维护这一套状态，有时候我们提出一个子组件来，但是这个子组件除了render出来一虚拟dom结构，并没有任何状态，所以是没必要提出来做一个单独的组件，哪怕是想复用。这个时候就用到了无状态组件，即一个无状态函数，这样在渲染的时候，就省去了子组件生命周期的维护和执行，避免了不必要的检查和内存分配，做到了内部优化。

class App extends React.Component{constructor(props){super(props);this.state = {}}render(){return 
     
      aaaa
     
}}

典型的无状态无生命周期组件，所以说不管复用也好，拆分也好，这种无状态无周期组件写成一个无状态函数最完美。

renderapp = ()=>{render(){return 
     
      aaaa
     

2、高阶组件的使用。

高阶函数

setFristName = ()=>{this.setState({visible:false})console.log('setFristName')}setLastName = ()=>{this.setState({visible:false})console.log('setLastName')}

这两个函数this.setState({visible:false})是共有的思维,

可以做一个中间函数专门处理提取公有的逻辑

setFristName = ()=>{let {name} = this.statethis.setState({visible:false})console.log('setFristName',name)}setLastName = ()=>{let {name} = this.statethis.setState({visible:false})console.log('setLastName',name)}commonConpute = (wrappedFunc)=>{let newFunc = () => {let {name} = this.statethis.setState({visible:false})wrappedFunc(name);}return newFunc;}commonConpute(setFristName)();commonConpute(setLastName)()

高阶组件的使用就是类似于高阶函数的思想来创建一个中间函数，做函数传递

import React, {Component} from 'react'CommonConpute = (SetLastName) => {class NewCommonComponent extends Component {constructor(props) {super(props);this.state = {name: ''}}componentWillMount() {let name = localStorage.getItem('name');this.setState({name})}render() {return 
     }}return NewCommonComponent}export default CommonConpute

a = ()=>{class 类return 类名}export default a;

所谓的高阶组件，其实就是高阶函数对容易的封装。参数就是子组件。

import React, {Component} from 'react';import CommonConpute from 'commonConpute.js';class SetLastName extends Component {render() {return (
     
      welcome {this.props.username}
     
)}}export default CommonConpute(SetLastName);

高阶组件就是用一个高阶函数把子组件当作参数传递给目标组件了。

目标组件使用子组件的时候把name 通过 props 传递给子组件了。

子组件只管从 props里面拿来用就好了。

3、组件模块化思想

使用React时，组件或容器的代码在根本上必须只负责一块UI功能。不管是无状态组件函数，还是有状态组件模块，都应该是负责ui界面的一整块的功能。所以在划分组件和拆分的时候一定要规划好。

不规范展示Viw

1

     
      
      
       {this.state.schoolList.splice(0,2) .map((item,index)=>{return 
       
{item.schoolName}
})}{this.state.schoolList.splice(2,4) .map((item,index)=>{return 
       
{item.schoolName}
})}
      
      
     

中间UI中的列表这里，有两个{}表达式分隔开了本该是一个组件。

分割不合理，而且this.state.schoolList.splice计算也是重复的截取。

{this.state.schoolList.map((item,index)=>{return (
{item.schoolName}
{index == 1 ? 
 : null})})}

　　

写到现在，其实心得有些分享一下：

如果组件根本不需要状态，那么就使用函数定义的无状态组件，即函数

传递组件所需要的属性。只有当属性列表太长时，才使用{…this.props}进行传递。我曾经有段时间非常喜欢这样不太合适的写法：

class App extends React.Component{constructor(props){super(props);this.state = {...props}}}

这样其实很容易造成state命名重复，很难维护和开发。所以传递的时候尽量传递需要的，

如果组件里面有太多的判断逻辑（if-else语句）通常意味着这个组件需要被拆分成更细的组件或模块。

模块类命名，方法命名，变量命名尽量团队统一，保持统一风格，简明扼要，见名之意，有助于组件复用和组件维护。

注释，要不就别加，真的，要么整个团队要保持良好习惯，加的话，每次的迭代更新就要更改注释。最好，明白清楚，简要。团队风格统一。不要误导，千万不要误导。

在shouldComponentUpdate中检查更新，是否重新render的时候，判断一定要精确，避免不必要的render，重paint，diff算法也是很耗费性能的。

4、组件开发注意点

三元函数组件判断渲染，最多一层，再多的用if-elseif-else来吧，因为复杂点的三目运算可读性很差

isTrue ? {}:isShow ? {} : {} 不可取，可读性非常差

1

如果组件需要三木运算符

{isTrue ? 
      : isShow ? 
      : 
      }

　　

最佳的解决方案：

将逻辑移到无状态组件内部，不同条件的时候return不同的组件。

这样做的好处就是把UI结构和逻辑层分开。

return ({this.renderApp})renderApp = ()=>{if(isTrue){return 
     }else{if(isShow){return 
     }else{return 
     }}}

setState合并为一次更新

在无状态函数里最好执行完毕以后一次性的setState

setModalVisible = ()=>{this.setState({data:[1,2,3]}).....this.setState({arr:[2,3]})}

将多次state更新合

并成一次更新。避免触发多次render，耗费diff性能。

大家都知道setState是异步更新，可以在回调函数中拿到最新的state 值，所以setState异步执行所花费的时间完全取决于irtual DOM的 diff算法。