用计算字段反应状态

5 回答

• 1

  我不建议你将你的计算值存储在你的州内 . 我的方法更像是这样的：

  import PropTypes from 'prop-types';
  import React from 'react';
  
  class Component extends React.Component {
    static defaultProps = { value: 0 };
  
    static propTypes = { value: PropTypes.number };
  
    state = { a: 0, b: 0 };
  
    result = () => this.state.a + this.state.b + this.props.value;
  
    updateA = e => this.setState({ a: +e.target.value });
  
    updateB = e => this.setState({ b: +e.target.value });
  
    render() {
      return (
        <div>
          A: <input onChange={this.updateA} value={this.state.a} />
          B: <input onChange={this.updateB} value={this.state.b} />
          Result: {this.result()}
        </div>
      );
    }
  }
  

  将计算存储在您的状态中的问题是，计算可以由多个源进行变更 . 如果你使用我的解决方案，没有办法，任何东西都可以覆盖计算而不使用正确的函数来计算它们 .

  回复于 2024-05-02T07:15:44+08:00
• 1

  

  您可以将计算结果保存在 this.calculated 而不是 this.state 中 . 它是依赖数据 . 导致更新和渲染的所有数据都已处于状态和道具状态 .

  class Component extends React.Component {
    constructor(props) {
      super(props)
      state = {
        b: 0
      }
    }
  
    updateThis = (event) => {
      this.setState({ b: event.target.value });
    }
  
    componentWillUpdate(nextProps,nextState){
      this.calculated.field1=f(nextProps.a, nextState.b)
    }
  
    render() {
      return (
        <form>
          A = <input onChange={this.props.updateParent} value={this.props.a} /> <br>
          B = <input onChange={this.updateThis} value={this.state.b} /> <br>
          f(A,B) = {this.calculated.field1} <br>
        </form>
      );
    }
  }
  
  class ParentComponent extends React.Component {
    constructor(props) {
      super(props)
      state = {
        a: 0
      }
    }
  
    render() {
       return (
         <Component
           updateParent={event=>this.setState({a: event.target.value})}
           a={this.state.a}
         />
       }
    }
  }
  

  回复于 2024-05-02T07:15:44+08:00
• 0

  不要在您的州中包含冗余信息 .

  一个简化的例子是你所在州的 firstName 和 lastName . 如果我们想在 render 方法中显示全名，您只需执行以下操作：

  render() {
      return <span>{`${this.state.firstName} ${this.state.lastName}`}</span>
  
  }
  

  我喜欢这个例子，因为很容易看到在我们的状态中添加 fullName ，只是持有 ${this.state.firstName} ${this.state.lastName} 是不必要的 . 每次我们的组件渲染时，我们都会进行字符串连接，并且我们是一个廉价的操作 .

  在您的示例中，您的计算很便宜，因此您也应该在 render 方法中执行此操作 .

  回复于 2024-05-02T07:15:44+08:00
• 0

  你第一次尝试是解决这个问题的正确方法 . 但是，您需要添加一个检查以查看状态是否实际已更改：

  componentDidUpdate(prevProps, prevState){
      if(prevState.field !== this.state.field){
          this.setState({calculatedField:calculate(this.props,this.state)})) 
      }
  }
  
  shouldComponentUpdate(nextProps, nextState) {
      return this.state.calculatedField !== nextState.calculatedField
  }
  

  您需要检查在计算方法中使用的状态和道具，并确保它们在更新状态之前已更改 . 这将阻止无限循环 .

  回复于 2024-05-02T07:15:44+08:00
• 0

  看起来“状态”是存储您需要在渲染函数上使用的所有内容（甚至是计算值）的地方，但通常我们会遇到您描述的问题 .

  自 React 16.3 以来，这种情况的新方法已经以 static getDerivedStateFromProps (nextProps, prevState) "lifecycle hook"的方式给出 .

  如果还没有，则应至少更新到此版本，并且follow the advice given by the React Team on their blog .

  Here is the official documentation for this functionality .

  这里的问题是这个函数在每次渲染之前被调用，并且是“静态的”你不能访问当前实例的先前道具，这通常需要决定是否必须再次生成计算值（我想这是你的情况） ，正如你所说，你的计算过程很繁重） . 在这种情况下，React团队建议在状态中存储相关道具的值，因此可以将它们与新的道具进行比较：

  if (nextProps.propToCompute !== prevState.propToComputePrevValue) {
    return {
      computedValue: Compute(nextProp.propToCompute),
      propToComputePrevValue: nextProps.propToCompute
    };
  }
  return null;
  

  回复于 2024-05-02T07:15:44+08:00