是否可以在 React 中使初始状态为空对象？

Question

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

如果我要这样做：

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

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

我会出错。

但治疗方法很简单：

constructor(props) {
  super(props);

  this.state = {};
}

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

是否有可能以某种方式强制反应在全局范围内将初始状态添加为空对象，以避免空状态定义的所有样板？

Ps（也许是反问句）为什么这不在同一个 React 核心中完成？

Answer 1

是否有可能以某种方式强制反应在全局范围内将初始状态添加为空对象，以避免空状态定义的所有样板？

你可以创建你自己的»组件基类«，从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>);
    }
}

（现场演示）

通常不鼓励在 React 中扩展组件，因为它不是惯用的；添加this.state = {}需要状态的（每个）组件确实没有害处。但如果你想走那条路，你可以做到。

Ps（也许是反问句）为什么这不在同一个 React 核心中完成？

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

syranide：对于不需要状态的组件（这很容易成为大多数），避免分配是一种胜利。