javascript - React where 在组件中添加一个简单的数学函数

Question

我有一个简单的 React 组件，我想向其添加一个名为 doMath 的简单数学函数，该函数使用属性值。

class MyClass extends Component {
    constructor( props ) {
        super( ...arguments );
    }

    render() {
        const { attributes } = this.props; /* attributes passed from parent component */
        const { width, height } = attributes;

        return (
           /* render something using the width and height values */
        )
    }
}

我可以通过以下方式添加 doMath 函数...

类内部:

class MyClass extends Component {
    constructor( props ) {
        super( ...arguments );
    }

    doMath() {
       const { width, height } = this.props.attributes;
       const result = 100 / (width / height);
       return result;
    }

    render() {
        const { attributes } = this.props; /* attributes passed from parent component */
        const { width, height } = attributes;

        return (
           doMath();
        )
    }
}

类外作为常量:

const doMath = (width, height) {
  const result = 100 / (width / height);
  return result;
}

class MyClass extends Component {
    constructor( props ) {
        super( ...arguments );
    }

    render() {
        const { attributes } = this.props; /* attributes passed from parent component */
        const { width, height } = attributes;

        return (
           doMath(width, height);
        )
    }
}

内部渲染为常量:

class MyClass extends Component {
    constructor( props ) {
        super( ...arguments );
    }

    render() {
        const { attributes } = this.props; /* attributes passed from parent component */
        const { width, height } = attributes;

        const doMath = (width, height) {
           const result = 100 / (width / height);
           return result;
        }

        return (
           doMath(width, height);
        )
    }
}

似乎我也可以将它添加到 componentDidMount 或 componentDidUpdate

据我所知，将它添加到 render() 中是不好的做法，但它似乎在任何地方都有效。这种情况下的最佳做法是什么？

Answer 1

第三种方法肯定不行。在 render 方法中添加该函数将创建一个新的 doMath 函数每次您的组件重新渲染，这不是一种高效的做法东西。

如果您确定要为这个特定组件使用 doMath 函数，我建议您在组件的模块中定义它而不导出它。所以我会选择第二种方式。

如果此函数仅依赖于width 和height，那么最好将它放在组件类之外。否则，如果您觉得它可能依赖于更多的 state，您可以将它放在类中，这样您就不会被迫传递组件的状态。

结论:根据要传递给 doMath 函数的数据量，您可以在类内部或外部创建它；但永远不会在 render 方法中。

---

编辑: 我忘记提及的是使用 static 方法。基本上，如果您没有设置方法 static，它将为组件的每个实例创建，并且能够使用其他类成员:

(A) 如果方法不是static:

class MyComponent extends React.Component {
  /* private */ doMath() {
    // You have access to this particular instance and its state
    const {width, height} = this.state; 
  }
}

(B) 如果方法是静态的:

class MyComponent extends React.Component {
  /* private */ static doMath(width, height) {
    // do something with them
    // no access to state or the component's instance
  }

  render() {
    const {width, height} = this.state;

    const result = MyComponent.doMath(width, height);

    // render something
  }
}

(C) 为了完整起见，我们还要在类外定义函数:

function doMath(width, height) {
  // do magic
  return result;
}

class MyComponent extends React.Component {
  render() {
    const {width, height} = this.state;
    const result = doMath(width, height);

    // render something
    // use result
  }
}

// emphasize export
module.exports = MyComponent;

比较

当使用诸如 TypeScript 之类的东西时，方法 (B) 和 (C) 基本上会给出相同的结果:您可以通过指定 static 方法 private 来隔离功能。但是，在使用 JavaScript 时，我更喜欢 (C)，因为如果我这样做

const MyComponent = require('/path/to/MyComponent');
MyComponent.doMath(); // undefined

我不能使用 doMath 函数，因为我不应该这样做。使用这两种方法，您需要将所需数据作为参数传递给函数/方法(即您无权访问组件实例的内部状态)。

现在对于 (A)，将为组件的每个实例创建该方法(如果您有很多实例，可能需要考虑)。您将有权访问 this(因此可以访问组件的内部状态)并且您不必将任何内容作为参数传递，如果您不确定该方法需要多少数据，这可能会很方便。

我希望你能从这个解释中得出结论。