react es6+ 代码优化之路-1

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

• 在初步接触 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 简洁的数组解构

//bad
const splitLocale = locale.split('-');
const language = splitLocale[0];
const country = splitLocale[1];

//good
const [language, country] = locale.split('-');
复制代码

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

//bad 
const good = current => goal;

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

3、别重复自己的代码

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

//bad
const MyComponent = () => (
  <div>
    <OtherComponent type="a" className="colorful" foo={123} bar={456} />
    <OtherComponent type="b" className="colorful" foo={123} bar={456} />    
  </div>
);

//good
const MyOtherComponent = ({ type }) => (
  <OtherComponent type={type} className="colorful" foo={123} bar={456} />
);
const MyComponent = () => (
  <div>
    <MyOtherComponent type="a" />
    <MyOtherComponent type="b" />
  </div>
);
复制代码

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

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

//bad
import Title from './Title';

export const Thingie = ({ description }) => (
  <div class="thingie">
    <div class="description-wrapper">
      <Description value={description} />
    </div>
  </div>
);

export const ThingieWithTitle = ({ title, description }) => (
  <div class="ThingieWithTitle">
    <Title value={title} />
    <div class="description-wrapper">
      <Description value={description} />
    </div>
  </div>
);
复制代码

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

//good
import Title from './Title';

export const Thingie = ({ description, children }) => (
  <div class="thingie">
    {children}
    <div class="description-wrapper">
      <Description value={description} />
    </div>
  </div>
);

export const ThingieWithTitle = ({ title, ...others }) => (
  <Thingie {...others}>
    <Title value={title} />
  </Thingie>
);
复制代码

4、多使用无状态组件

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

//bad
class User extends Component {
  state = { loading: true };

  render() {
    const { loading, user } = this.state;
    return loading
      ? <div>Loading...</div>
      : <div>
          <div>
            First name: {user.firstName}
          </div>
          <div>
            First name: {user.lastName}
          </div>
          ...
        </div>;
  }

  componentDidMount() {
    fetchUser(this.props.id)
      .then((user) => { this.setState({ loading: false, user })})
  }
}

//good
//我们把无状态的组件写进 <Renderuser /> 中
import RenderUser from './RenderUser';

class User extends Component {
  state = { loading: true };

  render() {
    const { loading, user } = this.state;
    return loading ? <Loading /> : <RenderUser user={user} />;
  }

  componentDidMount() {
    fetchUser(this.props.id)
      .then(user => { this.setState({ loading: false, user })})
  }
}

//anohter good
class User extends Component {
  state = { loading: true };

  _render(){
      return (
        
      )
  }

  render() {
    const { loading, user } = this.state;
    return loading ? <Loading /> : <RenderUser user={user} />;
  }

  componentDidMount() {
    fetchUser(this.props.id)
      .then(user => { this.setState({ loading: false, user })})
  }
}
复制代码

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

• 未完待续