是否有一种方法来刷新/渲染一个功能组件后，更新多个状态一次?
例如:
const [first, setFirst] = useState(false);
const [second, setSecond] = useState(false);
...
setFirst(true);
setSecond(true);
…然后该组件将刷新两次。是否有可能设置和刷新(或渲染)只一次?
你可以使用你的状态作为一个对象，并将它们设置为一个而不是像
那样单独的状态const [exampleState, setExampleState] = useState(
{fields: {
fieldOne: false,
fieldTwo: false
}
})
你可以这样设置
setExampleState({...exampleState, fields: {
fieldOne: true,
fieldTwo: true
},
})
我没有看到它渲染两次。它只呈现一次因为两个集合状态都得到了批处理在一起。
function App() {
const [first, setFirst] = React.useState(false);
const [second, setSecond] = React.useState(false);
const counter = React.useRef(1)
console.log('rendering: ', counter.current++)
return (
<button onClick={() => {
setFirst(p => !p)
setSecond(p => !p)
}}>{first?'t1':'f1'}, {second?'t2':'f2'}</button>)
}
ReactDOM.render(<App />, document.getElementById('mydiv'))<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<body>
<div id="mydiv"></div>
</body>也许，你看到它渲染两次作为使用StrictMode的结果。StrictMode将有意地双重调用"渲染";以及其他一些检测副作用的生命周期方法。
参见为什么React组件渲染计数器增加2?用于演示。
更新:
我认为你正在寻找@EvrenK的答案中提到的解决方案，即合并你的状态变量.
通常，在大多数情况下，您不必过于担心呈现器除非它成为一个明显的问题。issue/delay，您可以使用Reat.memo来避免因props的变化而导致的渲染。
没有办法，你可以避免由于states的变化而导致的渲染。
ref/useRef并创建一个状态数据触发最终渲染。
的例子:
const data1 = useRef()
const data2 = useRef()
const data3 = useRef()
const [renderD1D2D3, setRenderD1D2D3] = useState(false)
function handleChange1(newValue) {
data1.current = newValue // Won't trigger render
}
function handleChange2(newValue) {
data2.current = newValue // Won't trigger render
}
function handleChange3(newValue) {
data3.current = newValue // Won't trigger render
}
function allGoodLetsRenderNow() {
setRenderD1D2D3(prev => !prev) // Would trigger render
}
return (
<>
<div>{data1.current}</div>
<div>{data2.current}</div>
<div>{data3.current}</div>
</>
)