react es6+ 代碼優化之路-1

這裏集合了一些代碼優化的小技巧

• 在初步接觸 es6+ 和 react 的時候總結的一些讓代碼跟加簡化和可讀性更高的寫法
• 大部分知識點是本身在平時項目中還不知道總結的，一致的不少優化的點沒有寫出來，逐步增長中,目的是使用最少的代碼，高效的解決問題
• 有什麼更好的方法和不足之處，歡迎你們指出。

react es6+ 代碼優化之路-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('-');
複製代碼

二、函數命名，布爾變量和返回布爾值的函數應該以is,has,should開頭

//bad 
const good = current => goal;

//good
const isGood = current => goal;
複製代碼

三、別重複本身的代碼

• 明顯能夠複用的直接使用組件來套用

//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.一、函數和組件傳值的複用

• 當咱們開始建立了一個組件 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>
);
複製代碼

四、多使用無狀態組件

• 從渲染分離有狀態的部分

//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、使用高階組件重構代碼

• 未完待續