React开发小tips

今天跟大家分享一些我在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会随着开发不定期更新，欢迎大家点赞收藏评论！👍🏻 +⭐️+☁️