json-server接口 和 setState

yarn add axios

npx json-server ./data.json --port 8888 --watch

data-json写入数据

import { Component } from "react";
import axios from "axios";

const http=axios.create({
  baseURL:'http://localhost:8888'
})
class Parent extends Component{
  state={
    lis:[],
    tabs:[]
  }
 async componentDidMount(){
  const tabs=await http.get('/tabs')
  const lis=await http.get('/lis')
  this.setState({lis:lis.data,tabs:tabs.data})
 }
  render(){
    console.log(this.state);
    return (
      <div>我是parent组件</div>
    )
  }
}
export default Parent

setState

1、延迟更新（非异步）

react框架内部有一个表示批量更新的标记isBatchingUpdates
当我们点击按钮时触发了react自己的事件后，这个标记就会被修改为true，表示批量更新
所有此时调用setState的时候，并不会立即更新状态，而是储存到一个队列中
将来等到所有的操作都执行完成后，React就会合并所有的状态更新，一次性的更新状态
最终，将isBatchingUpdates标记设置为false

2、setState（prevState=>{return prevState上一步操作后的结果}）

3、setState（prevState=>{return prevState上一步操作后的结果},()=>{数据会直接更新}）

4、setState在react生命周期或者处理程序中，里面表现异步合并更新，在setTimeout、setInterval及自己写的原生js中表现同步更新

import { Component } from 'react'
import ReactDOM from 'react-dom'

class Parent extends Component {
  state = {
    count: 0,
  }
  handleClick = () => {
    // react框架内部有一个表示批量更新的标记isBatchingUpdates
    // 当我们点击按钮时触发了react自己的事件后，这个标记就会被修改为true，表示批量更新
    // 所有此时调用setState的时候，并不会立即更新状态，而是储存到一个队列中
    // 将来等到所有的操作都执行完成后，React就会合并所有的状态更新，一次性的更新状态
    // 最终，将isBatchingUpdates标记设置为false
    // 三个一起写会进行覆盖  最后count是6
    // this.setState({count:this.state.count+2})
    // this.setState({count:this.state.count+4})
    // this.setState({count:this.state.count+6})


    // 注意：这种情况下，每次调用setState都会立即更新状态，并且让组件重新渲染
    // 因为 定时器 中的代码时异步代码，定时器中的代码不会立即执行而是放到了事件队列中
    // 事件队列的代码，会在js主线程都执行完成后，再执行
    // 当主线程中的代码执行完成后，React已经将isBatchingUpdates标记设置为false
    // 此时，再调用setState()，此时，因为批量合并更新的标记已经是false
    // 所以，React会调用一次setState就会立即更新一次状态，并且立即渲染

    // 三个一起写会进行相加  prevState拿到的是先前操作的state  最后count是9
    // this.setState((prevState)=>{
    //   return {count:prevState.count+1}
    // })
    // this.setState((prevState)=>{
    //   return {count:prevState.count+3}
    // })
    // this.setState((prevState)=>{
    //   return {count:prevState.count+5}
    // })

    // setState还有一个回调函数，在这个回调里面可以同步更新state里面的数据
    // this.setState(
    //   (prevState) => {
    //     return { count: prevState.count + 5 }
    //   },
    //   () => {
    //     console.log(this.state.count)
    //   }
    // )

    // setTimeout(() => {
    //     this.setState({count:this.state.count+1})
    //     this.setState({count:this.state.count+2})
    //     this.setState({count:this.state.count+3})
    // }, 0);

    setTimeout(() => {
      // 添加ReactDOM上的不稳定更新就会改变立即更新 变为异步更新
      ReactDOM.unstable_batchedUpdates(()=>{
        this.setState({count:this.state.count+1})
        this.setState({count:this.state.count+2})
        this.setState({count:this.state.count+3})
      })
    }, 0);
  }
  render() {
    console.log(this.state)
    return (
      <div>
        <span>我是parent组件</span>
        <button onClick={this.handleClick}>点击 +</button>
      </div>
    )
  }
}
export default Parent