将数据保存在这个＆＃39; VS＆＃39;州＆＃39;

Question

我想知道将一些UI状态保存为实例变量（this）而不是反应状态对象是可以的。例如，制作受控制的输入有时会变得单调乏味，保持这样做不会更好：

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>
        )
    }
}

我知道这种方法的缺点是，当this - 变量的值发生变化时，组件不会得到通知，因此组件不会更新。但另一方面，有时它不是必要的（就像在我的例子中一样），它可以提高性能，因为它不会重新渲染，并避免重新协调。

Reference