react tips

react中利用事件冒泡简化处理表单的数据绑定

emm，在搞某个项目时，需要将表单中的值与变量绑定，由于react中没有双向数据绑定，因此通常通过组件的事件实现(通过给组件绑定事件然后将e.target.value绑定到变量)。然而，由于表单中的组件众多，这样就会需要多个函数，而实际上这些所做的工作是类似的。一种简化的方式：将每一个表单组件定义不同的name属性并将所有表单组件包裹在同一个父组件中，然后为父组件绑定一个事件通过事件冒泡机制为所有表单组件绑定同一个方法。一个demo:

// 注意，你必须在使用前首先声明 "formData" 这个对象
// 对于 radio等这类有默认值的表单组件你也必须在声明"formData"对象时为其设置与表单相同的默认值。
formChange=(e)=>{
        // console.log(e.target)
        this.state.formData[e.target.name] = e.target.value
        // console.log(this.state.formData)
    }
    render() {
        return (
            <div onChange={this.formChange}>
                <h4>编号</h4>
                <Input size="small" name="id" placeholder="员工编号" defaultValue={""} />
                <h4>姓名</h4>
                <Input size="small" name="name" placeholder="姓名" defaultValue={""} />
                <h4>年龄</h4>
                <Input placeholder="年龄" name="age"  />
                <h4>联系电话</h4>
                <Input placeholder="联系电话" name="phone" />
                <h4>职位</h4>
                <Input placeholder="职位" name="position" />
                <h4>所属机构</h4>
                <Input placeholder="所属机构编号" name="institution" />
                <Radio.Group name="gender" value={this.state.gender} onChange={this.genderChange}>
                  <Radio value={1}>男</Radio>
                  <Radio value={2}>女</Radio>
                </Radio.Group>
                <Switch checkedChildren="修改" unCheckedChildren="添加" onChange={this.modeChange} />
                <Button type="primary" >{this.state.mode}</Button>
            </div>
        )
    }

在react中使用esbuild

webpack的打包速度一直备受诟病。加上电脑没有ssd，导致最近在写某react项目时每次写代码前的npm start总是一段煎熬(差不多喝半杯茶。淦，落后(垃圾电脑)是第一生产力。虽然网上有N种优化方案，但是算了，太麻烦了。所以决定尝试esbuild。
esbuild简介：
esbuild 是一个用 Go 语言编写的用于打包，压缩 Javascript 代码的工具库。它最突出的特点就是打包速度极快........算了不吟唱了。
一番折腾之后，终于找到了这个：
https://github.com/pradel/create-react-app-esbuild/blob/main/packages/craco-esbuild/README.md
tips:Usage步骤中的craco.config.js文件如果没有，创建在项目根目录下即可。
体验： 真快。对于我这个项目大概从130+s减少为不到40s。