「React」setState 知识点

setState 知识点

setState(updater, [callback]);

1. setState 默认情况下是异步的，目的是收集一段时间内的所有修改，执行一次更新，避免短时间内多次更改导致频繁更新 DOM 造成不必要性能消耗。

由于此特性，在setState后立即读取state往往得到的是未更新的值，可以使用生命周期 componentDidUpdate 或 setState第二参数回调函数来解决这个问题

class App extends React.Component {
constructor() {
super();
this.state = {
name: "lim",
};
}
changeName() {
this.setState({
name: "Jesse",
});
this.setState({
name: "Alice",
});
this.setState({
name: "Hanke",
});
this.setState({
name: "5k",
});
console.log(this.state.name); // 异步原因，此处打印 lim
}
render() {
console.log("渲染"); // 只执行一次
return <button onClick={() => this.changeName()}>更改名字</button>;
}
}

2.setState 不是所有情况都是异步的如在定时器、原生事件中，是同步的。

// 定时器中
setTimeout(() => {
this.setState({
name: "5k",
});
console.log(this.state.name); // 5k
}, 0);
// 原生事件中
class App extends React.Component {
constructor() {
super();
this.state = {
name: "lim",
};
}
componentDidMount() {
const btn = document.getElementById("nameBtn");
btn.onclick = () => {
this.setState({
name: "5k",
});
console.log(this.state.name); // 5k
};
}
render() {
return <button id={"nameBtn"}>更改名字</button>;
}
}

3. 想要获取到 state 更新之后的值，可以通过 setState 的第二个参数 callback，它在完成合并并重新渲染组件后执行。

官网建议使用生命周期 componentDidUpdate() 来替代此方式

class App extends React.Component {
constructor() {
super();
this.state = {
name: "",
};
}
changeName() {
this.setState(
{
name: "5k",
},
() => {
console.log(this.state.name); // 5k
}
);
}
render() {
return <button onClick={() => this.changeName()}>更改名字</button>;
}
}

4. 要获取上一次更新的值，可以通过第一参数传递函数「updater」的方式，updater 函数中接收的 state 和 props 都保证为最新，updater 的返回值会与 state 进行浅合并

第一参数可选为对象或者函数，函数使用场景通常是你后续状态取决于你当前状态时。

this.setState((state, props) => {
// 第二参数 props 就是组件接受的参数
return {
count: state.count + 1,
};
});

官网直通车 state核心概念 API

最后

以上就是直率海燕为你收集整理的「React」setState 知识点的全部内容，希望文章能够帮你解决「React」setState 知识点所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。