javascript - 为什么在声明状态后我的 React 渲染两次？

Question

我的 React 项目似乎将所有内容渲染两次(我在调用 console.log 并获取它 2x 后注意到)，当我第一次在我的应用程序中声明状态时，似乎会发生这种情况，状态渲染之前的日志是 2x 之后的日志。

此外，声明状态后的 componentDidMount 仅渲染一次

import React, { Component } from "react";
import { getProteins } from "./services/proteinsService";
import ProteinBuilder from "./containers/ProteinToolbar/ProteinBuilder.jsx";
import BlendOutput from "./containers/BlendOutput/BlendOutput";
import "./App.css";

console.log("App before state");
class App extends Component {
  state = { proteins: getProteins() };
  componentDidMount() {
    console.log("componentDidMount");
  }

  render() {
    console.log("App after state");
    return (
      <div className="container">
        <div className="row">Nav</div>
        <div className="row">
          <div className="col col-sm-3">
            <ProteinBuilder proteins={this.state.proteins} />
          </div>
          <div className="col-sm-9">
            <div className="row">
              <div className="col-12 BlendOutput  border rounded">
                <BlendOutput proteins={this.state.proteins} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

我的 getProteins() 从以下内容中提取:

const proteins = [
  {
    _id: 1,
    name: "Pea Protein Isolate",
    description: "Pea Protein Isolate",
    digestibility: 0.98,
    AA: {
      His: 2.5,
      Ile: 4.5,
      Leu: 8.4,
      Lys: 7.2,
      MetCys: 2.1,
      PheTyr: 9.3,
      Thr: 3.9,
      Trp: 1,
      Val: 5
    },
    percentOfBlend: 0.382
  },

  {
    _id: 2,
    name: "Texturized Pea Protein",
    description: "Texturized Pea Protein",
    digestibility: 0.94,
    AA: {
      His: 2.0,
      Ile: 3.91,
      Leu: 6.84,
      Lys: 5.96,
      MetCys: 2.69,
      PheTyr: 7.31,
      Thr: 3.02,
      Trp: 0.84,
      Val: 4.23
    },
    percentOfBlend: 0.448
  },

  {
    _id: 3,
    name: "Sacha Inchi Protein",
    description: "Sacha Inchi",
    digestibility: 0.92,
    AA: {
      His: 2.6,
      Ile: 5,
      Leu: 6.4,
      Lys: 4.3,
      MetCys: 3.7,
      PheTyr: 7.9,
      Thr: 4.3,
      Trp: 2.9,
      Val: 4
    },
    percentOfBlend: 0.17
  },

  {
    _id: 4,
    name: "Potato Protein",
    description: "Potato protein isolate",
    digestibility: 0.95,
    AA: {
      His: 1.7,
      Ile: 5.6,
      Leu: 9.2,
      Lys: 7.1,
      MetCys: 3.2,
      PheTyr: 11.6,
      Thr: 4.4,
      Trp: 1.4,
      Val: 8
    },
    percentOfBlend: 0.0
  }
];

export function getProteins() {
  return proteins;
}

export function multiplyProteins() {
  proteins.map(proteins.AA.map());
}

Answer 1

我在下面的代码片段中创建了您的案例的简化版本，并且如果从未调用 setState ，则不会看到相同的行为。因此我认为问题出在以下之一:

• 子组件正在调用 setState，并导致重新渲染
• 父组件导致重新渲染
• 你有StrictMode已启用。

此片段详细介绍了渲染生命周期中发生的情况。注释掉设置状态的部分，您将得到一个与您发布的示例相同的示例，减去子组件。

console.log("create App component");
function setFoo(){console.log('setting foo'); return 'bar'}
class App extends React.Component {
  state = { foo: setFoo() };
  componentDidMount() {
    console.log("componentDidMount. Current state", this.state);
    this.setState(
      {qux: 'quo'}, 
      () => console.log('setState callback (set state has been fully applied) has state', this.state)
    )
    console.log("componentDidMount -> this.setState() was called (but may not have been applied). Current state", this.state)
  }

  render() {
    console.log("App.render() with state", this.state);
    return (
      <div>
        {JSON.stringify(this.state)}
      </div>
    );
  }
}

console.log('before dom render')
ReactDOM.render(<App/>, document.getElementById('app'))
console.log('after dom render')

<div id="app" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果您想试验该代码片段，您可能还需要尝试连续多次调用 setState，并查看每次调用后状态会发生什么情况。