zoukankan      html  css  js  c++  java
  • React 学习(四) setState

    setState[^setState]

    • Asynchronous: In the Liefcycles and the CompositeEvent of React

      import React, { Component } from "react";
      
      class App extends Component {
        constructor() {
          super();
      
          this.state = {
            message: "default Text",
          };
        }
      
        // Call back after the render function is executed
        componentDidUpdate() {
          console.log("componentDidUpdate", this.state.message); // Smallstars
        }
      
        changeText() {
          this.setState(
            {
              message: "Smallstars",
            },
            () => {
              // Call back after the datas are updated
              console.log("changeText", this.state.message); // Smallstars
            }
          );
      
          console.log("changeText", this.state.message); // default Text
        }
      
        render() {
          const { message } = this.state;
          return (
            <div>
              <div>{message}</div>
              <button
                onClick={() => {
                  this.changeText();
                }}
              >
                synchronous
              </button>
            </div>
          );
        }
      }
      
      export default App;
      
    • Synchronous: In setTimeout and native event of DOM

      import React, { Component } from "react";
      
      class App extends Component {
        constructor() {
          super();
      
          this.state = {
            message: "default Text",
          };
        }
      
        componentDidMount() {
          document.getElementById("btn_synchronous").addEventListener("click", () => {
            this.setState({
              message: "Smallstars",
            });
      
            console.log("document", this.state.message); // Smallstars
          });
      
          // this.setState({
          //   message: "Smallstars",
          // });
          // console.log("componentDidMount", this.state.message); // default Text
        }
      
        changeText() {
          setTimeout(() => {
            this.setState({
              message: "Smallstars",
            });
            console.log("setTimeout", this.state.message); // default Text
          }, 0);
      
          this.setState({
            message: "Smallstars",
          });
          console.log("changeText", this.state.message); // default Text
        }
      
        render() {
          const { message } = this.state;
          return (
            <>
              <div>message: {message}</div>
              <button id="btn_synchronous">synchronous</button>
              <button
                onClick={() => {
                  this.changeText();
                }}
              >
                synchronous
              </button>
            </>
          );
        }
      }
      
      export default App;
      
    • Data merging[^setStateMerging]

      import React, { Component } from "react";
      
      export default class App extends Component {
        constructor(props) {
          super();
          this.props = props;
      
          this.state = {
            message: "Default Text",
            name: "Smallstars",
          };
        }
      
        render() {
          return (
            <div>
              <h2>message: {this.state.message}</h2>
              <h2>{this.state.name}</h2>
              <button
                onClick={(e) => {
                  this.changeText();
                }}
              >
                execute
              </button>
            </div>
          );
        }
      
        changeText() {
          // Use Object.assign({}, this.state, {message: "Smallstars"})
          this.setState({
            message: "Smallstars",
          });
        }
      }
      
    • setState merging[^setStateMerging]

      import React, { Component } from "react";
      
      export default class App extends Component {
        constructor(props) {
          super();
          this.props = props;
      
          this.state = {
            counter: 0,
          };
        }
      
        render() {
          return (
            <div>
              <h2>Number: {this.state.counter}</h2>
              <button
                onClick={(e) => {
                  this.increment();
                }}
              >
                +
              </button>
            </div>
          );
        }
      
        increment() {
          // It is merged each time, and the front is covered by later
          // this.setState({
          //   counter: this.state.counter + 1,
          // });
      
          // this.setState({
          //   counter: this.state.counter + 1,
          // });
      
          // this.setState({
          //   counter: this.state.counter + 1,
          // });
          // couter is 1
      
          //Accumulate when meraging
          // Each time a meraging is made, the later state is used for accumulation, and then a new one is returned
          this.setState((prevState, props) => {
            return {
              counter: prevState.counter + 1,
            };
          });
          this.setState((prevState, props) => {
            return {
              counter: prevState.counter + 1,
            };
          });
          this.setState((prevState, props) => {
            return {
              counter: prevState.counter + 1,
            };
          });
          // couter is 3
        }
      }
      
    每天进步一点点
  • 相关阅读:
    cygwin 开发平台(windows版 iPhone SDK) 开发教程
    使用Java编写Palm OS程序的解决方案
    BREW究竟是什么-BREW本质之我见
    项目开发管理技术之项目版本控制、软件建模、软件测试、项目文档管理及进度管理
    【尼古拉·特斯拉传】
    Android应用协调器Intent
    异构环境下的Single Sign On 解决方法
    WSE2.0的BUG?!
    Oracle 9.2下的“System.Exception: System.Data.OracleClient requires Oracle client software version 8.1.7 or greater”
    Next Gen Offline Capable Web Apps with HTML & Java Script Dion Almaer & Ben Galbraith
  • 原文地址:https://www.cnblogs.com/smallstars/p/14043546.html
Copyright © 2011-2022 走看看