函数组件和类组件和dva视图更新问题

类组件setState视图更新：

import React from 'react'
export default class ThisSetState extends React.Component {
    state = {
        num: 1
    }
    render() {
        return <div onClick={() => {
            this.setState(() => {
                this.state.num = 2
                return this.state//新地址的state
            })
        }}>{this.state.num}</div>
    }
}

this.setState的传入的状态是引用变量的话，地址和之前的不一样react才能正常触发更新，但是由于this的不确定性（因为this是调用的时候才确定）这里的this指向新的state，所以也会触发更新。

函数组件setState视图更新：

import React, { Component, useState } from 'react'
const ThisSetState = () => {
    const [state, setState] = useState({ num: 1 })
    return (
        <div onClick={() => {
            setState(() => {
                state.num = 2
                return state//直接返回的值地址渲染前和渲染后地址没有改变
            })
        }}>{state.num}</div>
    )

}
export default ThisSetState

此时setState返回的值地址没有改变，所以点击时不会重新渲染。它类似 class 组件的 this.setState()，但是它不会把新的 state 和旧的 state 进行合并（然而，不像 class 中的 this.setState，更新 state 变量总是替换它而不是合并它。）

如果我们想要触发视图更新需要拷贝一下返回值：

import React, { Component, useState } from 'react'
const ThisSetState = () => {
    const [state, setState] = useState({ num: 1 })
    return (
        <div onClick={() => {
            setState(() => {
                state.num = 2
                return {...state}//新地址的变量
            })
        }}>{state.num}</div>
    )

}
export default ThisSetState

redux通过props视图更新：

redux中是通过dispatch来触发model层数据改变，然后props传入组件来使视图更新，props也是需要视图更新前后引用变量地址发生变化，才重新渲染视图。

export default {
    
    namespace: 'testModel',//单一状态树上的唯一标识（每一个model必须有唯一命名空间）
    state: {
    
        name: 'rayhomie'
    },
    reducers: {
    
        setName(state, payload) {
    
            console.log(payload);
            // const _state = JSON.parse(JSON.stringify(state));
            //state改变前后内存地址改变才能触发更新
            // _state.name = payload.data.name
            return {
    ...state}
        },
    },
}