Question

我不太确定在反应组件中启动计算值的位置。所以这就是我现在正在做的事情：

<Button
  onClick={(el) => {
    el.target.blur();
  }}>
  Button Text
</Button>

或者我应该在render () { const { foo } = this.props const { bar } = this.state const calculatedValue = bar ? foo * bar : foo return ( <div>{calculatedValue}</div> ) }

中发起calculatedValue

Answer 1

我认为这取决于你正在做多少计算。对于像上面例子一样简单的事情，我通常会在render()中执行此操作。

任何以上非常基本的功能，我会把它拆分成一个单独的功能，例如getFooBarCalcValue()。

通过这种方式，您的渲染方法不会太混乱其他地方的其他内容。

Answer 2

这取决于您的计算值在应用程序中的变化方式。如果是一个不会改变的值，那么你只想在第一次渲染组件时（你可能没有），你可以在componentDidMount中计算并分配给一个属性（this.calculatedValue = ...）和使用this.calculatedValue进行渲染访问，但这不是“反应方式”。

假设您正在使用state，这会在您的应用程序中发生变化，那么您需要将计算放在其他地方。

以下是保留计算值的一些选项：

<强> 1。在您的渲染方法中，就像您一样：

很好的简单计算，但相信我，这认为可以增长......

render () {
    const { foo } = this.props
    const { bar } = this.state

    const calculatedValue = bar ? foo * bar : foo

    return (
        <div>{calculatedValue}</div>
    )
}

<强> 2。在getter方法中：

保持渲染方法的计算分开

getCalculatedValue() {
    const { foo } = this.props
    const { bar } = this.state

    return bar ? foo * bar : foo
}

render () {
    return (
        <div>{ this.getCalculatedValue() }</div>
    )
}

第3。 [ES6]使用getter属性：

上面的选项只是一个变体，但是由于你没有调用方法，只是访问一个属性而你的函数正在“在桌面下”运行，所以更加清洁一点。

get calculatedValue() {
    const { foo } = this.props
    const { bar } = this.state

    return bar ? foo * bar : foo
}

render () {
    return (
        <div>{ this.getCalculatedValue }</div>
    )
}

<强> 4。在父组件中，使这个只显示值：

这个有点复杂，但通常对于发展项目更好。在这里，我们将您的组件分成两部分：第一部分将计算（这里您可以访问某些API或您的价值来自的任何地方），而孩子只会显示它的价值。这样，您可以将逻辑和ui保存在不同的组件中，从而提高项目中代码的重用率。将UI组件（子组件）保持在没有状态的功能组件中是一种很好的模式，但这是另一个问题。

/* A functional component. Is just like a class, but without state */
const MyUIComponent = props => <div>{ props.value }</div>


class MyLogicalComponent extends React.Component {
    render(){
        /* you can choose any of the options above to calculate */
        const computedValue = 5 + 8;

        return (
            <div>
                <MyUIComponent value={ computedValue } />
            </div>
        )
    }
}

希望它有所帮助！

Answer 3

calculatedValue是一个const变量，在Render函数中具有块作用域。如果您需要在Render函数中使用其值，则除了仅在Render函数中计算它之外没有其他选项。

componentDidMount = () => {
  const { foo } = this.props
  const { bar } = this.state

  const calculatedValue = bar ? foo * bar : foo //block scope
}

如果您在calculatedValue函数中声明变量componentDidMount()，如上所示，则Render函数将无法访问该函数，该函数将在reactJs组件的生命周期中稍后调用。

render = () => {

  //calculatedValue will give undefined error. calculatedValue is not known to render function
  return (
    <div>{calculatedValue}</div>
  )
}

React：在render（）或componentDidMount（）中启动值？

3 个答案: