Javascript 将数据保存在'；这'；VS'；州'；

我想知道是否可以将一些UI状态保留为实例变量（

this

），而不是保留在react state对象中。例如，进行受控输入有时会变得单调乏味，将其保持为：

import React from 'react';

export default class extends React.Component {
    selectedCheckboxes = new Set();
    searchInput = '';
    radioButton = undefined;

    onCheckboxChange = ({target: {value}}) => {
        if (this.selectedCheckboxes.has(value)) {
            this.selectedCheckboxes.delete(value);
        } else {
            this.selectedCheckboxes.add(value);
        }
    };

    submit = e => {
        e.preventDefault();

        const searchInput = this.searchInput;
        const checkboxes = [...this.selectedCheckboxes];
        const radioButton = this.radioButton;

        console.log(searchInput, checkboxes, radioButton);
    };

    render() {
        return (
            <form className="Example" onSubmit={this.submit}>
                <div className="checkboxes">
                    <input type="checkbox" value="a" onChange={this.onCheckboxChange}/>
                    <input type="checkbox" value="b" onChange={this.onCheckboxChange}/>
                    <input type="checkbox" value="c" onChange={this.onCheckboxChange}/>
                </div>
                <div className="search">
                    <input type="text" onChange={e => this.searchInput = e.target.value}/>
                </div>
                <div className="radio-buttons">
                    <input type="radio"
                           name="radio"
                           value="1"
                           onChange={e => this.radioButton = e.target.value}/>
                    <input type="radio"
                           name="radio"
                           value="2"
                           onChange={e => this.radioButton = e.target.value}/>
                    <input type="radio"
                           name="radio"
                           value="3"
                           onChange={e => this.radioButton = e.target.value}/>
                </div>
                <button type="submit">submit</button>
            </form>
        )
    }
}

从“React”导入React；
导出默认类扩展React.Component{
SelectedCheckBox=新设置（）；
searchInput=''；
radioButton=未定义；
onCheckboxChange=（{target:{value}}）=>{
if（this.selectedcheckbox.has（value））{
选中复选框。删除（值）；
}否则{
此选项。选中复选框。添加（值）；
}
};
提交=e=>{
e、 预防默认值（）；
const searchInput=this.searchInput；
常量复选框=[…this.selectedcheckbox]；
const radioButton=此.radioButton；
控制台日志（搜索输入、复选框、单选按钮）；
};
render（）{
返回(
this.searchInput=e.target.value}/>
this.radioButton=e.target.value}/>
this.radioButton=e.target.value}/>
this.radioButton=e.target.value}/>
提交
)
}
}

我知道这种方法的缺点是，当

这个

变量的值发生变化时，组件不会得到通知，所以组件不会更新。但另一方面，有时它不是必需的（就像在我的示例中），它可以提高性能，因为它不会触发重新渲染，并避免协调

---

如果您不想重新渲染，那么请确定。“但另一方面，有时它不是必需的…”然后就完全可以了。如果它对您有效，请执行。谢谢。我担心保持数据同步可能会有问题。我说的是对象和引用，而不是原语。但事实证明，babel会处理这个问题，并将这个声明放入构造函数中；美好的如果你把巴贝尔从这个等式中去掉，一定要小心。