Question

React组件是否建议拥有其他对象？这样做有什么不利之处吗？我看到它已完成here

这是我的例子：

import React, {Component} from 'react';
import Utility from './Utility';

export default class MyComponent extends Component {
    static defaultProps = {
        message: 'Hello',
        name: 'John!'
    };
    constructor(props) {
       super(props);
       this.utility = new Utility();
    }
    render() {
        return (
            <h1>{this.props.message}, {this.props.name} {this.utility.getText()}</h1>
        );
    }
}

实用程序将是一些为组件提供更多功能的类。我检查的大多数例子都没有这种东西。如果可以使用，那么在构造函数或mount函数中实例化会更好吗？

Answer 1

因为它是一个实用程序，所以建议使用单例设计模式。

事实上，我花了差不多6个月的时间，就像你的片段节目一样。

但是，我现在切换到单身设计模式，如下所示：

Utility.js

Joi

然后，在你的React组件中：

class Utility {
   // methods

}

export const utility = new Utility();
export default  Utility; // i know, you are using only this .. use also the above  to export the singleton

Answer 2

没关系。我宁愿在构造函数中这样做，因为我觉得这更像是一个初始化过程。生命周期方法相互通信的唯一方法是查看状态（或道具）或// parent class { // constructor { ... this.addWindowListener(new GUIFrameListener()); ... } class GUIFrameListener extends WindowAdapter { public void windowClosing(WindowEvent e) { System.out.println("Window Closed"); } } } // end of parent class变量。

大多数时候将随机内容放入状态只会通过反复调用渲染来导致性能问题，因此您应该尝试将这些变量移动到这样：

this

此外，如果这是在多个地方使用的东西，请考虑从父母传递道具。这样，您可以在子组件中的任何位置使用相同的初始化对象（但这取决于您的用例）。

React组件拥有对象

2 个答案:

Utility.js