这里集合了一些代码优化的小技巧
- 在初步接触 es6+ 和 react 的时候总结的一些让代码跟加简化和可读性更高的写法
- 大部分知识点是自己在平时项目中还不知道总结的，一致的很多优化的点没有写出来，逐步增加中,目的是使用最少的代码，高效的解决问题
- 有什么更好的方法和不足之处，欢迎大家指出。
react es6+ 代码优化之路-1
1、函数式默认参数
- 使用函数默认的参数, 使用 es6+ 的时候，有了结构赋值，我们就不用再函数中自己再去定义一个变量。
var es5Fun = function (config) {var foo = config || 'default foo'console.log(foo)
}
es5Fun()
es5Fun('not default foo')
const es6Fun = (config = {'defalut'})=>{console.log(config)
}es6Fun();
es6Fun('not defalut')
复制代码
1.1 简洁的数组解构
const splitLocale = locale.split('-');
const language = splitLocale[0];
const country = splitLocale[1];
const [language, country] = locale.split('-');
复制代码
2、函数命名，布尔变量和返回布尔值的函数应该以is,has,should开头
const good = current => goal;
const isGood = current => goal;
复制代码
3、别重复自己的代码
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 中。
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。这样我们就可以分离的使用两个组件，相互不影响，耦合度小。
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、多使用无状态组件
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 })})}
}
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、使用高阶组件重构代码
