调用 render() 后扩展的 React 组件不会更新答案

【问题标题】：Extended React component won't update after render() is called调用 render() 后扩展的 React 组件不会更新
【发布时间】：2016-09-08 12:17:55
【问题描述】：

我正在重构一些 React 代码以获得更灵活的方法。

我有一个扩展 React.Component 的抽象组件，比如说class ATable extends React.Component。
另一个表扩展此表，如下所示：class FooTable extends ATable
其他一些表也这样做：class BarTable extends ATable
（抽象）ATable 组件有一个构造函数方法，该方法提供与其他组件的绑定：

表格：

constructor(...args) {
    super(...args);
    this.components = {
        tableHead: TableHead,  // other (semi) abstract classes
        tableBody: TableBody,
        tableRow: TableRow,
        (...)
    }
}

render() {
    <section>
        <this.components.tableHead (...) />
        (...)
    </section>
}

FooTable 可以覆盖一些 this.components 以使组件可插入。事情是这样发生的：

FooTable：

constructor(...args) {
    super(...args);
        this.components.tableHead: FooHead
    }
}

class FooHead extends TableHead {}  // FooHead <- TableHead <- React.Component

目标是使表（实际上更复杂）成为可插拔系统。

这里的问题是，如果 FooTable 的 props 发生变化，会调用一直到 TableHead 的 render() 事件，但看不到 DOM 更新。在抽象之前，一切似乎都正常。

这怎么可能，我该如何解决？

【问题讨论】：

您是否考虑过使用高阶组件而不是使用extends？或者，就此而言，只是正常的组件组成？
嗯，如果没有用箭头函数声明，你不需要在render() {} 内的return 部分吗？
试试这两个链接Extending React components 和Subclassing components。它们是组合最佳实践的好例子。
已经有很多组合了，在这种情况下，有更多的灵活性是有用的。 Mixins 将是一个很好的解决方案，但不幸的是，根据文档，这在 es6 中不受支持。

标签： dom reactjs

【解决方案1】：

原来问题不在于类的扩展，而是我试图重构......

意外地，渲染的部分被设置为构造函数链中的状态。这当然不会更新。

结果是组件注册了一个 props 更改，称为整个生命周期（我可以在渲染时记录新的 props）但仍然没有更改，因为 props 从未应用于状态。

解决了这个问题，现在一切正常。

【讨论】：