首页 » JavaScript » 正文

【React】React render渲染两次的问题?

发表于: PHP,JS,Golang,Shopify学习交流博客 – 咪啪咪啪的小木屋 · 2021-12-17 ·  588 views  ·  0 replies 
import React, { Component } from "react";

// 全局变量,用于记录组件渲染次数
var renderTimes = 0;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1,
    };
  }

  handleClick = () => {
    this.setState({ count: 1 });
  };

  render() {
    console.info("---renderTimes---", renderTimes);
    renderTimes += 1;

    return (
      <div>
        <h3>场景复现:</h3>
        <p>每次点击“设置”按钮,当前组件的状态都会被设置成相同的数值。</p>
        <p>当前组件的状态: {this.state.count}</p>
        <p>
          当前组件发生渲染的次数:
          <span style={{ color: "red" }}>{renderTimes}</span>
        </p>
        <div>
          <button onClick={this.handleClick}>设置</button>
        </div>
      </div>
    );
  }
}

export default App;

在本地开发环境下,点击设置,renderTimes会直接从1跳到3,这是因为react本地运行的时候是在严格模式下,不过,官网也说了,这仅适用于开发模式,在生产模式下,不会重复调用生命周期

React在严格模式下会执行两次render以帮忙检查额外的副作用。-----sf某友
https://blog.csdn.net/weixin_43297321/article/details/108231573?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.no_search_link&spm=1001.2101.3001.4242.1

如果不知道这个设定,可能在运行效果的时候对自己产生怀疑,不想使用严格模式,直接修改index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  // <React.StrictMode> 注释掉这里就可以了
  <App />,
  // </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

也有群友说

react 文档有明文说明,不要在 render 里处理副作用和突变一些值

如果是这样,平常还是按着文档来吧

«上一篇: :下一篇»

0 thoughts on “【React】React render渲染两次的问题?”

  1. 还没有任何评论,你来说两句吧

Leave a reply