react中state和dva中的state状态变化

react中state和dva中的state状态变化

react中直接写state

我们写一个代码

this.state={
  data:1
} 
componentWillMount() {
    console.log('将加载')
    this.setState({
      data: 2
    })
    k = this.state.data + 3;
  }
  render() {
    
    return (
      <div>
        {this.state.data}
        {k}
      </div>
    );
  }

运行得到结果为

24

这说明不管setState放在哪里，在它执行之前，都会先执行了render，另外如果在constrator()里使用setState会报错，如果我们需要从数据库里获取数据更新应该将代码放到componentDidMount()中。

然后把data改为一个对象

      data:{name:1} 
    }

改k

 k = this.state.data;
    delete k.name;

运行程序结果为空

不止只有k的结果改变了，data对象也变了，说明k获取的是data对象的引用，改变k会影响state里的值。

再来测试一下dva

添加如下代码：

constructor(props) {
    super(props);
    k=this.props.cardList.data;
  }
  componentDidMount() {
    this.props.test();
  }
  <div>
        {this.props.cardList.data+1}<br></br>
        {k+1}
      </div>
  //dva model
test(state, { payload: data } ) {
          return {
            data:100
          }
         }, 

运行结果

101 2

渲染的时候只会重新渲染this.props.cardLidt.data的值，k是不会渲染的，但如果data是对象，k也会同步变化。

总结

1.setState是个异步过程，不管放在哪里都是要先render，之后再执行。
2.如果data里的内容是个对象，那么要注意改变对象的引用会直接改变对象的值，不管是在react里还是到dva里都是这样，这样会导致不可预料的后果，如果加以应用的话也可以的直接操作data的值而不需要通过返回hook的方法。