reactjs - React 中是否可以将初始状态设为空对象？

Question

每次我在 React 中处理内部组件状态时，我都必须首先为 state 属性定义空对象，否则我会遇到运行时错误，抛出 this.state is undefined

如果我要这样做:

render() {
  const { someProperty } = this.state;

  render <div>{someProperty}</div>
}

我会收到错误。

但治疗方法非常简单:

constructor(props) {
  super(props);

  this.state = {};
}

但是，对于我创建的每个组件一遍又一遍地执行此操作非常烦人。

是否有可能以某种方式强制 react 全局添加初始状态作为空对象，以避免空状态定义的所有样板？

P.s. (也许是反问句)为什么这不在同一个 React 核心中完成？

Answer 1

Is it somehow possible to force react add initial state as an empty object globally as to avoid all the boilerplate for empty state definition?

您可以创建自己的“组件基类”，从 React.Component 扩展来实现此类，然后从此类派生所有组件。

import { React } from 'react';

class StatefulComponent extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {};
    }
}

export default StatefulComponent;

.

class MyComponent extends StatefulComponent {
    render() {
        const { something } = this.state;
        return (<div>Hello, {something}</div>);
    }
}

( Live Demo )

通常不鼓励在 React 中扩展组件，因为这不符合习惯；在(每个)需要状态的组件中添加 this.state = {} 确实没有什么坏处。但如果你想走那条路，你就可以做到。

P.s. (maybe rhetorical question) Why isn't this done in the same React core?

因为许多(或大多数)组件不需要状态，因此您会分配浪费的内存。这已在 react#1851 中讨论过。 :

syranide: For components that don't need state (which could easily be the majority), avoiding an allocation is a win.