react 响应式数据

1.class组件

调用setState修改

1.setState是异步的,多次调用会合并为一次

2.修改同样数值的数据,仍会触发更新(解决方案:使用PureComponent)

  class Cc extends React.Component {
    state = {
      a: 1,
      c: [1, 2, 3]
    }
    fix() {
      // 调用setState修改
      // 1.setState是异步的,多次调用会合并为一次
      // 2.修改同样数值的数据,仍会触发更新(解决方案:使用PureComponent)
      this.setState({
        a: this.state.a + 1
      }, () => {
        // 得到异步后的值
        console.log(this.state)
      })
      console.log(this.state)
    }
    fixArr() {
      // 在PureComponent下,数组和对象判断是否改变,由其内存地址判断
      // 一般先拷贝一份,再进行操作
      let _arr = [...this.state.c]
      _arr.push(4)
      this.setState({
        c: _arr
      })
    }
    render() {
      console.log(1)
      return <div>
        <Button type="primary">class组件</Button>
        <div>{this.state.a}</div>
        <div>{this.state.c}</div>
        <Button type="primary" onClick={this.fix.bind(this)}>修改数据</Button>
        <br></br>
        <Button type="primary" onClick={this.fixArr.bind(this)}>修改数组</Button>
      </div>
    }
  }

2.函数组件

借用useState hook来解决响应式问题

  let [mes, setMsg] = useState(111)
  // mes值本身
  // setMsg修改方法
  function fixMsg() {
    setMsg(mes+1)
  }
  return <div className={styles.container}>
    <div>响应式数据</div>
    <Button type="primary">函数组件</Button>
    <div>{mes}</div>
    <Button type="primary" onClick={fixMsg}>修改数据</Button>
    <Cc></Cc>
  </div>