【React】异步处理-获取网络API数据与react组件生命周期

处理异步、动态显示

• ajax
• callback回调函数
• 程序栈stack, 先进后出
  

代码案例

import React from "react";
import robots from "./mockdata/robots.json"
import Robot from "./components/Robot"
import styles from "./App.module.css"
import ShoppingCart from "./components/ShoppingCart"

interface Props {}

interface State{
  robotGallery: any[]
}

class App extends React.Component<Props, State> {
  constructor(props){
    super(props);
    this.state = {
      robotGallery: [] 
    }
  }
  
  componentDidMount(){
    // 组件初始化时刚刚进页面挂载dom元素时调用
    fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((data) => this.setState({robotGallery:   data }));
  }
  componentWillUnmount() {
    // 组件销毁的时候调用
  }
  render() {
    return (
      <div className={styles.app}>
		<div className={styles.appHeader}>
			<img />
			<h1>罗伯特机器人</h1>
        </div>
        <ShoppingCart />
        <div className={styles.robotList}>
          {robots.map((r) => (
             <Robot id={r.id} email={r.email} name={r.name} />
           ))}
        </div>
	  </div>
	  
    )
  }

为什么用any

• 资源来源于网络请求，返回的数据类型不受控制
• 前端强行定义API数据类型，违反前后端分离的原则
• 不能为了使用ts而放弃javascript的灵活性

Setstate（）的异步更新

render() {
   return (
		<button
             onClick{() => {
					this.setState ( { count: this.state.count + 1 }, () => {
					  // 可以同步获取数据
					  console.log("count", this.state.count);
					})
               }}
          >
		 </button>
	)
}

Setstate是同步的还是异步的？

异步更新，同步执行

setState() 本身并非异步，但对state的处理机制给人一种异步的假象。state处理一般发生在生命周期变化的时候。

同时两个setState() ?

合并setState(), 只在生命周期发生变化的时候执行

如何解决setState的合并问题？

render() {
   return (
		onClick = {() => {
				this.setState((preState, preProps) => {
				       return { count: preState.count + 1 }
				   }, () => {
				       console.log("count ", this.state.count);
				   });
				   this.setState((preState, preProps) => {
				       return { count: preState.count + 1 }
				   }, () => {
				       console.log("count ", this.state.count);
				   });
		}}
   )
}

React组件的生命周期

• Mounting: 创建虚拟DOM, 渲染UI
• Updating: 更新虚拟DOM, 重新渲染UI
• Unmounting: 删除虚拟DOM, 移除UI

class App extends React.Component<Props, State> {
  // 生命周期第一阶段：初始化
  // 初始化
  constructor(props) {
    super(props);
    this.state = {
      robotGallery: [],
      count: 0
    }
  }
  
  componentDidMount() {
      // 组件初始化时刚刚进页面挂载dom元素时调用
    fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((data) => this.setState({robotGallery:   data }));
  }
}
 // 生命周期第二阶段
 // 在组件接收到一个新的prop(更新后)被调用
 // componentWillReceiveProps
 // state getDerivedStateFromProps(nextProps, prevState){}
 shouldComponentUpdate(nextProps, nextState) {
   return nextState.some !== this.state.some
 }
 // 组件更新后调用
 componentDidUpdate()

// 生命周期的第三阶段：销毁
// 组件销毁后调用
// 可以当做析构函数 destructor 来使用
componentWillUnmount() {}