react中state与setstate的使用

我们可以利用state来定义一些变量的初始值

//放在construcor里
this.state = {
    list: [1, 2, 3]
}

要更改state里的值，注意要遵循react里immutable规范，state不允许我们做任何改变，只能通过setState来更改

const list = [...this.state.list];
list.splice(0, 1);
this.setState({list:list});

强烈推荐setstate的写法如下：

const list = [...this.state.list];
list.splice(0, 1);
this.setState((prevState) => ({   //外面加小括号可以代替return
    list: list
}));

还可以这样写

this.setState((prevState) => {   //外面加小括号可以代替return
    const list = [...prevState.list];
    list.splice(0, 1);
    return {list}
});

setState第二个参数回调函数，在setState设置完之后执行，可以对改变后的数据进行操作

this.setState((prevState) => {   //外面加小括号可以代替return
    const list = [...prevState.list];
    list.splice(0, 1);
    return {list}
}, () => {
    console.log(this.state.list);
});