企业网站的基本类型包括,成都建模培训,网站建设综合实训ppt,hyper cache wordpress1. setState概述
setState 是React框架中#xff0c;用于更新组件状态的方法。 setState 方法由React组件继承自 React.Component 类的一部分。通过调用 setState#xff0c;可以告诉 React要更新组件的状态#xff0c;并触发组件的重新渲染。
this.setState(newState, ca…1. setState概述
setState 是React框架中用于更新组件状态的方法。 setState 方法由React组件继承自 React.Component 类的一部分。通过调用 setState可以告诉 React要更新组件的状态并触发组件的重新渲染。
this.setState(newState, callback);newState 是一个对象它包含了需要更新的状态属性和值。它将合并到组件的当前状态中。 callback 是一个回调函数它在 setState 更新状态完成之后被调用。
2. setState为何使用不可变值
什么是 不可变值
React框架中的“不可变值”的概念通常指的是在编写React组件时尽量避免直接修改数据而是创建新的数据副本。
setState为何使用不可变值
在React中组件的状态state应该保持不变。通过使用 setState 方法更新状态时React会合并现有状态和新状态而不是直接修改状态。 这确保 React 可以正确地追踪状态的变化并进行必要的更新。
同时直接修改数据可能会引发意外的副作用尤其是在多个组件之间共享数据时。通过使用不可变值可以减少出现这种问题的可能性。
常用的处理不可变值的工具包括 Object.assign、数组的 concat、slice 等方法。对数组或者对象使用slice()方法可以生成该数组或对象的副本类似于深拷贝。
const list5Copy this.state.list5.slice()
list5Copy.splice(2, 0, a) // 中间插入/删除this.setState({list1: this.state.list1.concat(100), // 追加list2: [...this.state.list2, 100], // 追加list3: this.state.list3.slice(0, 3), // 截取list4: this.state.list4.filter(item item 100), // 筛选list5: list5Copy // 其他操作
})3. setState可能是异步的
setState是一个异步方法。这意味着React可能会对多个 setState 调用进行批处理然后一次性更新组件的状态而不是每次调用都立即更新。
然而setTimeout 函数中的 setState 是同步的。在自定义的DOM事件中setState也是同步的。
state要在构造函数中定义
constructor(props){this.state {count: 0}
}因为 setState 是异步的因此在 setState 方法执行完后打印状态是拿不到更新后的值只能拿到当前状态的值。
this.setState({count: this.state.count 1;
})
console.log(this.state.count) //打印结果为 0如果想要拿到最新的状态需要在setState中写一个回调函数。此时count的结果为1
this.setState({count: this.state.count 1},() {console.log(this.state.count)}
)setTimeout 中的 setState 是同步的。此时打印出来的count结果就是1
setTimeout((){this.setState({count: this.state.count 1})console.log(this.state.count) // 打印结果为1
}, 0)在自定义的DOM事件中setState也是同步的。
bodyClickHandler () {this.setState({count: this.state.count 1})console.log(this.state.count) // 打印结果为1
}componentDidMount(){document.body.addEventListener(click, this.bodyClickHandler)
}4. setState何时合并state
setState是异步更新的话传入的参数是一个对象那么多次更新同一个状态只会执行1次。
constructor(props){this.state {count: 0}
}this.setState({count: this.state.count 1
})
this.setState({count: this.state.count 1
})
this.setState({count: this.state.count 1
})
console.log(this.state.count) // 打印结果为 1由于 setState 是异步的React 会将这些更新一起批处理然后应用它们。这意味着所有三个 setState 调用可能几乎同时执行使用初始值 this.state.count导致增加只有 1 而不是 3。
上述代码的思想类似于
Object.assign({count: 1}, {count: 1}, {count: 1}) // 执行结果为 {count: 1}为了防止这种情况发生可以在setState中传入更新函数updater function它接受先前的状态并返回更新后的状态。这能够确保使用的是最新的状态。
constructor(props){this.state {count: 0}
}this.setState((prevState) ({count: prevState.count 1
}));
this.setState((prevState) ({count: prevState.count 1
}));
this.setState((prevState) ({count: prevState.count 1
}));console.log(this.state.count) // 打印结果为 35. React18中的setState
当React的版本小于等于17时在组件中直接使用setState更新状态是批处理的即异步更新且合并相同状态。在setTimeout方法和自定义DOM事件中使用setState方法更新状态是同步的不是批处理的。然而在React18版本中无论是在组件中直接更新状态还是在自定义DOM事件和setTiemout方法中更新都是自动批处理Automatic Batching。
