今天跟大家分享一些我在react开发中的小tips!随记哈
1. react中,样式尽量使用className=" "代替style={{ }};
2.pagination中的onChange函数在外面定义,里面调用,调用函数尽量用箭头函数而非bind
这是为什么咧?举个例子说明
使用 .bind
当你在类组件的 render
方法中使用 .bind
时,例如:
render() {
return (
<SomeComponent someProp={this.someMethod.bind(this, 'arg1', 'arg2')} />
); }
每次组件渲染时,this.someMethod.bind(this, 'arg1', 'arg2')
都会被调用,创建一个新的函数实例。这意味着每次渲染都会传递一个新的函数引用给 SomeComponent
的 someProp
属性。
使用箭头函数
使用箭头函数可以避免每次渲染时创建新的函数实例的问题:
render() {
const handleSomeMethod = (arg1, arg2) => this.someMethod(arg1, arg2);
return (
<SomeComponent someProp={handleSomeMethod} />
); }
在这个例子中,handleSomeMethod
只在组件实例化时创建一次,并在组件的整个生命周期内复用。这有助于减少不必要的函数实例创建,从而提高性能。
3.功能函数可以封装成公共函数,
ES6模块化的方式:可以在文件中定义该功能函数并export出去,而后就可以在其他多个文件中import使用啦!例子如下
// formatNumber.js
export const formatNumber = (num) => {
const str = num.toString();
return str.length > 6 ? str.slice(6) : str.padEnd(6, ' ');
};
// 其他文件中使用
import { formatNumber } from './formatNumber.js';
console.log(formatNumber(12345)); // 输出: "2345"
console.log(formatNumber(123456)); // 输出: "123456"
4.Select选项(就是antd的那个)尽量抽出常量,方便日后维护,例子如下!
export const SEX = {
0:'男',
1:'女'
}
关注我,不迷路!
小tips会随着开发不定期更新,欢迎大家点赞收藏评论!👍🏻 +⭐️+☁️