javascript - 如何在 React 渲染函数中不使用 setState

Question

我有一个完整的运行代码，但是它有一个缺陷。它从 render() 内部调用 setState()。因此，React 会抛出反模式警告。

无法在现有状态转换期间更新(例如在渲染或另一个组件的构造函数中)。渲染方法应该是 props 和 state 的纯函数；构造函数副作用是一种反模式，但可以移至 componentWillMount

我的逻辑是这样的。在 index.js 父组件中，我有如下代码。 constructor() 以初始值调用 graphs() 以显示图形。用户还有一个表单来指定新值并提交表单。它使用新值再次运行 graphs() 并重新呈现图形。

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

const initialval = '8998998998';

class Dist extends Component {
  constructor() {
    this.state = {
      checkData: true,
      theData: ''
    };
    this.graphs(initialval);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.cost !== nextProps.cost) {
      this.setState({
        checkData: true
      });
    }
  }

  graphs(val) {
    //Calls a redux action creator and goes through the redux process
    this.props.init(val);
  }

  render() {
    if (this.props.cost.length && this.state.checkData) {
      const tmp = this.props.cost;
      //some calculations
      ....
      ....
      this.setState({
        theData: tmp,
        checkData: false
      });
    }

    return (
      <div>
        <FormComponent onGpChange={recData => this.graphs(recData)} />
        <PieGraph theData={this.state.theData} />
      </div>
    );
  }
}

FormComponent 是一个带有输入字段和提交按钮的普通表单，如下所示。它将回调函数发送到父组件，这会触发 graphs() 和 componentWillReceiveProps。

handleFormSubmit = (e) => {
    this.props.onGpChange(this.state.value);
    e.preventdefaults();
}

代码一切正常。有更好的方法吗？没有在 render() 中执行 setState ？

Answer 1

切勿在渲染中执行 setState。您不应该这样做的原因是，对于每个 setState，您的组件都将重新渲染，因此在渲染中执行 setState 将导致无限循环，这是不推荐的。

不需要 checkData bool 变量。你可以在 componentWillReceiveProps 中直接比较之前的成本和当前的成本，如果它们不相等则使用 setState 将成本分配给 theData。请参阅下面更新的解决方案。

同时开始在所有有状态组件中使用 shouldComponentUpdate 方法来避免不必要的重新渲染。这是每个有状态组件的最佳实践和推荐方法。

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

const initialval = '8998998998';

class Dist extends Component {
  constructor() {
    this.state = {
      theData: ''
    };
    this.graphs(initialval);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.cost != nextProps.cost) {
      this.setState({
        theData: this.props.cost
      });
    }
  }

  shouldComponentUpdate(nextProps, nextState){
     if(nextProps.cost !== this.props.cost){
         return true;
     }
     return false;
  }
  graphs(val) {
    //Calls a redux action creator and goes through the redux process
    this.props.init(val);
  }

  render() {
    return (
      <div>
        <FormComponent onGpChange={recData => this.graphs(recData)} />
        {this.state.theData !== "" && <PieGraph theData={this.state.theData} />}
      </div>
    );
  }
}

PS:- 以上解决方案适用于版本 React v15。