React useState和setState

初步学习，在 useState 与 setState使用中总是懵懵懂懂，特地总结一下。

常遇问题👇

1. useState 与setState设置方法常常不奏效
2. useState 与setState 多次的更新合并
3. useState 遇到复杂的数据类型，视图不更新，但是数据已更新

正确使用State😀

🏃‍跟着我一起码起代码理解一下吧~

同步异步情况下，使用 setState🏊‍

class StateClass extends React.Component {
    state = {
        a: 1,
        b: 'b'
    }
    handleClickWithPromise= () => {
        Promise.resolve().then(() => {
            // this.setState({...this.state, a: 'aa'})
            // this.setState({...this.state, b: 'bb'})

            // this.setState({a: this.state.a + 1})
            // this.setState({a: this.state.a + 1})

            this.setState((state) => ({
                a: state.a++
            }))
            this.setState((state) => ({
                a: state.a++
            }))
        })
    }
    handleClickWithoutPromise= () => {
        // this.setState({...this.state, a: 'aa'})
        // this.setState({...this.state, b: 'bb'})

        // this.setState({a: this.state.a + 1})
        // this.setState({a: this.state.a + 1})

        this.setState((state) => ({
            a: state.a++
        }))
        this.setState((state) => ({
            a: state.a++
        }))
    }
    render() {
        console.log('render')
        const {a, b} = this.state
        return (
            <Fragment>
                <h2>State</h2>
                <button onClick={this.handleClickWithPromise}>
                    {a}-{b} 异步执行
                </button>
                <button onClick={this.handleClickWithoutPromise}>
                    {a}-{b} 同步执行
                </button>
            </Fragment>
        )
    }
}

【输出】：

1. 异步执行，render输出俩次
2. 同步执行，render 执行一次

同步异步情况下，使用 useState🏋️‍

function useStateFunc() {
    const [a, setA] = useState([{a:1}])
    // const [a, setA] = useState(1)
    const [b, setB] = useState(1)
    console.log('render')

    function handleClickWithPromise () {
        Promise.resolve().then(() => {
            setA((a) => [{a:2}, {a: 1}])
            // setA((a) => a + 1)
            setB('bb')
        })
    }
    function handleClickWithoutPromise () {
        setA((a) => [1, 2])
        // setA((a) => a + 1)
        setB('bb')
    }
    return (
        <Fragment>
            <h2>useState</h2>
            <button onClick={handleClickWithPromise}>
                {a.a}-{b} 异步执行
            </button>
            <button onClick={handleClickWithoutPromise}>
                {a.a}-{b} 同步执行
            </button>
        </Fragment>
    )
}

【输出】：

1. 异步执行，render输出俩次
2. 同步执行，render 执行一次
3. 页面数据不更新，初始数据为1是更新数据成功

基于现象总结🐌

1. setState 与 useState 在正常的 React 事件流中，异步执行，合并更新
2. setState 与 useState 在 setTimeout，Promise.then等异步事件中，同步执行，使用即立即更新
3. setState 与 useState 在复杂的数据类型下，数据不发生变化，可知，数据只做替换，数据地址未发生变化，react 监听不到，页面不做渲染

更新数据小技巧🔧

提出问题就要去解决问题🌱

1. 官方认证正确使用方法🌼
2. 布噜布噜总结🐜

　// 1、修改object中某项
 
this.setState({
  object: {...object, key: value}
});
　　// 2、删除数组首位
 
array.splice(0, 1);
this.setState({
  array
});
　　// 3、删除数组尾部
 
array.splice(array.length - 1);
this.setState({
  array
});
　　// 4、删除数组任意一项
 
array.splice(index, 1);
this.setState({
  array
});
　　// 5、数组尾部添加一项
 
this.setState({
  array: [...array, item]
});
　// 　6、数组头部添加一项
 
this.setState({
  array: [item, ...array]
});
　　7、数组任意位置添加一项
 
array.splice(index, 0, item);
this.setState({
  array
});
　//　8、修改数组中任意一项中值
 
function updateArrayItem(index, key, value) {
  this.setState({
    array: array.map((item, _index) => _index == index ? {...item, [key]: value} : item)
  });
}
//　　9、复杂类型修改
 
this.setState(prevState => return newState);