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

• 在初步接触 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、使用高阶组件重构代码

• 未完待续