javascript - 使用计算字段 react 状态

Question

我有一个 react 组件，它有属性和状态。状态的某些字段包含输入数据(从输入控件中提取)，但状态中也有一些字段必须根据当前状态和 Prop 进行计算:

问题什么是更新状态计算字段的最佳方法(基于其他状态字段和 Prop )？

丑陋的做法:

componentDidUpdate(){
    this.setState({calculatedField:calculate(this.props,this.state)})) 
}

在这种情况下，我得到更新的无限循环，或者在最好的情况下(如果我使用 PureComponent)双重渲染调用。

目前我找到的最好的解决方案(但仍然很丑):就是在state中创建一个calculated对象，其中包含计算字段并在componentWillUpdate中更新避免setState:

componentWillUpdate(nextProps,nextState){
   nextState.calculated.field1=f(nextProps,nextState)
}

class ParentComponent extends React.Component {
  constructor(props, ctx) {
    super(props,ctx)
    this.state={A:"2"}
  }

  render() {
    console.log("rendering ParentComponent")
    return <div>
      <label>A=<input value={this.state.A} onChange={e=>{this.setState({A:e.target.value})}} /></label> (stored in state of Parent component)
      <ChildComponent A={this.state.A} />
    </div>
  }
}

class ChildComponent extends React.PureComponent {
  constructor(props,ctx) {
    super(props,ctx);
    this.state={
      B:"3",
      Calculated:{}
    }
  }

  render() {
    console.log("rendering ChildComponent")
    return <div>
      <label>B=<input value={this.state.B} onChange={e=>{this.setState({B:e.target.value})}} /></label> (stored in state of Child component state)
      <div>
        f(A,B)=<b>{this.state.Calculated.result||""}</b>(stored in state of Child component)
        <button onClick={e=>{ this.setState({Calculated:{result:new Date().toTimeString()}}) }}>Set manual value</button>
      </div>
    </div>
  }

  componentWillUpdate(nextProps, nextState) {
    this.state.Calculated.result = getCalculatedResult(nextProps.A, nextState.B)
  }

  componentWillReceiveProps(nextProps) {
    this.state.Calculated.result = getCalculatedResult(nextProps.A, this.state.B)
  }

  componentWillMount() {
    this.state.Calculated.result = getCalculatedResult(this.props.A, this.state.B)
  }
}

function getCalculatedResult(a,b) {
  const aNum = Number(a)||0
  const bNum = Number(b)||0;
  const result = (aNum*bNum).toString();
  return result;
}

ReactDOM.render(<ParentComponent/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<div id="root"></div>

这也是一个丑陋的解决方案，React 不建议通过 setState 改变状态。那么什么是正确的解决方案呢？

注意:

在我的实际应用程序中，我无法在渲染期间每次都重新计算 f(a,b)，因为它实际上是复杂的对象，所以我需要以某种方式缓存它，最好的方法是在状态中。

Answer 1

如果您使用的是 React 16.8.0 及以上版本，则可以使用 React hooks API。我认为这是您可能需要的 useMemo() Hook 。例如:

import React, { useMemo } from 'react'

const MyComponent = ({ ...props }) => {
  const calculatedValue = useMemo(
    () => {
      // Do expensive calculation and return.
    },
    [a, b]
  )

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

有关详细信息，请参阅 React documentation