这里集合了一些代码优化的小技巧

• 在初步接触 es6+ 和 react 的时候总结的一些让代码跟加简化和可读性更高的写法
• 大部分知识点是自己在平时项目中还不知道总结的，一致的很多优化的点没有写出来，逐步增加中,目的是使用最少的代码，高效的解决问题
• 有什么更好的方法和不足之处，欢迎大家指出。

react es6+ 代码优化之路-1

1、函数式默认参数

• 使用函数默认的参数, 使用 es6+ 的时候，有了结构赋值，我们就不用再函数中自己再去定义一个变量。

/*    当我们使用 es5 的时候**/var es5Fun = function (config) {    var foo = config || 'default foo'    console.log(foo)}//我们传一个对象进去es5Fun() // 'default foo'es5Fun('not default foo') // 'not default foo'/*    当我们使用 es6+ 的时候**/const es6Fun = (config = {
     'defalut'})=>{    console.log(config)}es6Fun(); // 'defalut'es6Fun('not defalut') // 'not defalut'复制代码

1.1 简洁的数组解构

//badconst splitLocale = locale.split('-');const language = splitLocale[0];const country = splitLocale[1];//goodconst [language, country] = locale.split('-');复制代码

2、函数命名，布尔变量和返回布尔值的函数应该以is,has,should开头

//bad const good = current => goal;//goodconst isGood = current => goal;复制代码

3、别重复自己的代码

• 明显可以复用的直接使用组件来套用

//badconst MyComponent = () => (  
    
    
         
           
    
);//goodconst MyOtherComponent = ({ type }) => (  
    );const MyComponent = () => (  
    
    
         
       
    
);复制代码

3.1、函数和组件传值的复用

• 当我们开始创建了一个组件 Thingie，到后面我们增加了一个需求，需要随时添加一个 title，所以我们又写了一个组件 ThingieWithTitle。这明显可以复用，下面看一下怎么去复用这个组件在 react 中。

//badimport Title from './Title';export const Thingie = ({ description }) => (  
    
    
     
      
          
     
  
    
);export const ThingieWithTitle = ({ title, description }) => (  
    
    
         
     
      
          
     
  
    
);复制代码

• 在这里，我们将 children 传递给 Thingie。然后创建 ThingieWithTitle，这个组件包含 Thingie，并将 Title 作为其子组件传给 Thingie。这样我们就可以分离的使用两个组件，相互不影响，耦合度小。

//goodimport Title from './Title';export const Thingie = ({ description, children }) => (  
    
         {children}    
     
      
          
     
  
    
);export const ThingieWithTitle = ({ title, ...others }) => (  
        
       
    );复制代码

4、多使用无状态组件

• 从渲染分离有状态的部分

//badclass User extends Component {  state = { loading: true };  render() {    const { loading, user } = this.state;    return loading      ? 
    
     Loading...
    
      : 
    
          
     
                  First name: {user.firstName}          
     
          
     
                  First name: {user.lastName}          
     
          ...        
    
;  }  componentDidMount() {    fetchUser(this.props.id)      .then((user) => { this.setState({ loading: false, user })})  }}//good//我们把无状态的组件写进 
     中import RenderUser from './RenderUser';class User extends Component {  state = { loading: true };  render() {    const { loading, user } = this.state;    return loading ? 
     : 
    ;  }  componentDidMount() {    fetchUser(this.props.id)      .then(user => { this.setState({ loading: false, user })})  }}//anohter goodclass User extends Component {  state = { loading: true };  _render(){      return (              )  }  render() {    const { loading, user } = this.state;    return loading ? 
     : 
    ;  }  componentDidMount() {    fetchUser(this.props.id)      .then(user => { this.setState({ loading: false, user })})  }}复制代码

x、使用高阶组件重构代码

• 未完待续