Question

我知道render（）应该是纯净的。想象一下，您创建了一个显示/呈现某些系统或数据库对象内容的组件。该对象作为参数传递。随着时间的流逝，另一个活动会更改将哪个对象传递给该组件，或更改有关该对象的某些内容。调用render（）时，它检测到它需要更多数据，这可能意味着需要另一个fetch（），并且需要等待该数据才能显示/渲染。

我不知道如何最好地处理这个问题。 didMount（）有助于组件的首次使用，但如果对象以某种方式更新（其他活动）和/或其现为活动组件的新对象/不同对象，则无济于事。

现在，在render（）中，我将fetch（）排队，并返回一个忙碌的转盘，稍后当数据到达时，我更改“状态”，以便组件重新呈现，现在包含它所需的所有数据。但是我怀疑这是一种纯粹的方法。

我确定这是一个非常常见的情况，因此有一些正确的方法可以解决此问题。

Answer 1

据我了解，您有一个用例，其中不同的活动可能与您的组件相关联，因此您很难管理它们。有几种解决方法，最容易维护的是，将您的核心组件逻辑拆分为：

Components：仅关注视图的无状态组件。即，给定一些数据，它将呈现一个UI。它不在乎数据来自何处或由谁获取。它总是为相同的数据呈现相同的UI，因此称为纯组件。所有交互都是通过事件处理程序进行的，并且组件本身不应存储任何业务逻辑。
容器：负责获取和维护活动数据的组件。这些负责进行实际的网络调用并管理数据状态。根据数据，容器将通过数据和事件处理程序作为道具传递来安装纯组件。

如果您有大量的活动，则始终可以为每个活动创建多个容器。

通过这种方式，您可以清楚地分离关注点，并且易于维护。如果多个容器具有相同的UI，则它们可以由多个容器使用。

我建议您阅读此article。

Answer 2

首先，将任何React组件视为支持渲染的代码。在模型-视图-控制器体系结构样式中，React被视为 View 。因此，React Component中发生的所有事情都在增加以支持渲染。通常，您的组件应该了解将要渲染的对象，并预先请求渲染所需的所有内容（例如，响应单击某些按钮或使用一定间隔）

您可以考虑将应用分为展示组件和容器组件（即使您不打算使用Redux，也可以作为Redux suggests）

第一个设计演示组件，将仅基于道具呈现UI。

例如

export function PresetationOfObject (porps) {
    return <div>My object is {props.myObject.toString()}</div>
}

这里什么也没拿。您可以根据收到的道具有条件地进行渲染，但不请求任何新数据。

另一方面，

容器组件将获取呈现所需的所有内容。它应该 own 对象将被渲染。通过拥有，我的意思是对象起源于容器组件，并且容器组件了解有关对象可能更改的所有信息。

大多数对象（或任何其他数据）随用户操作而变化，因此当用户单击某些按钮时，容器组件将重新获取数据。

例如

export class ContainerOfObject extends React.Component {
    constructor () {
        super();
        this.state = {
            object = {}
        }
        this.refreshObject();
    }

    async refreshObject () {
        let newObject = await get('http://backend.com/object');
        this.setState ({ object: newObject });
    }

    handleClieck () {
        refreshObject();
    }

    render () {
        return <div>
            <PresetationOfObject object={this.state.object}/>
            <button onClick={this.handleClick.bind(this)}>Update object</button>
        </div>
    }
}

Answer 3

是的

didMount（）有助于组件的首次使用，但如果对象以某种方式（其他活动）更新和/或其现在活动组件的新对象/不同对象。

使用componentDidUpdate()，它会在每次更新数据（第一次除外）之后触发。

https://reactjs.org/docs/react-component.html#componentdidupdate

什么/如果“ render（）”需要做“工作”（不是100％纯净的？）

3 个答案: