我正在使用 Redux 订阅商店并更新组件。
这是一个没有 Redux 的简化示例。它使用模型商店进行订阅和分发。
请按照片段下方的步骤重现问题。
编辑：请跳到更新下的第二个演示片段，以获得更简洁和更接近现实生活的场景。问题不在于 Redux。这是关于 React 的 setState 函数标识在某些情况下导致重新渲染，即使状态没有改变。
编辑 2 ：在“更新 2 ”下添加了更简洁的演示。
const {useState, useEffect} = React;
let counter = 0;
const createStore = () => {
const listeners = [];
const subscribe = (fn) => {
listeners.push(fn);
return () => {
listeners.splice(listeners.indexOf(fn), 1);
};
}
const dispatch = () => {
listeners.forEach(fn => fn());
};
return {dispatch, subscribe};
};
const store = createStore();
function Test() {
const [yes, setYes] = useState('yes');
useEffect(() => {
return store.subscribe(() => {
setYes('yes');
});
}, []);
console.log(`Rendered ${++counter}`);
return (
<div>
<h1>{yes}</h1>
<button onClick={() => {
setYes(yes === 'yes' ? 'no' : 'yes');
}}>Toggle</button>
<button onClick={() => {
store.dispatch();
}}>Set to Yes</button>
</div>
);
}
ReactDOM.render(<Test />, document.getElementById('root'));<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>怎么了
- ✅ 单击“设置为是”。由于 的值
yes已经是“yes”，状态没有改变，因此组件不会重新渲染。 - ✅ 点击“切换”。
yes设置为“否”。状态已经改变，所以组件被重新渲染。 - ✅ 单击“设置为是”。
yes设置为“是”。状态再次改变，所以组件被重新渲染。 - ⛔ 再次单击“设置为是”。状态没有改变，但组件仍然重新渲染。
- ✅ 后续点击“设置为是”不会按预期导致重新渲染。
预计会发生什么
在第 4 步，不应重新渲染组件，因为状态未更改。
更新
正如React 文档所述，useEffect是
适用于许多常见的副作用，例如设置订阅和事件处理程序...
一个这样的用例可能是监听浏览器事件，例如online和offline。
在这个例子中，我们在组件第一次渲染时调用内部函数useEffect一次，方法是传递一个空数组[]。该函数为在线状态更改设置事件侦听器。
假设，在应用程序的界面中，我们还有一个按钮可以手动切换在线状态。
请按照片段下方的步骤重现问题。
const {useState, useEffect} = React;
let counter = 0;
function Test() {
const [online, setOnline] = useState(true);
useEffect(() => {
const onOnline = () => {
setOnline(true);
};
const onOffline = () => {
setOnline(false);
};
window.addEventListener('online', onOnline);
window.addEventListener('offline', onOffline);
return () => {
window.removeEventListener('online', onOnline);
window.removeEventListener('offline', onOffline);
}
}, []);
console.log(`Rendered ${++counter}`);
return (
<div>
<h1>{online ? 'Online' : 'Offline'}</h1>
<button onClick={() => {
setOnline(!online);
}}>Toggle</button>
</div>
);
}
ReactDOM.render(<Test />, document.getElementById('root'));<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>怎么了
- ✅ 组件首先呈现在屏幕上，消息记录在控制台中。
- ✅ 点击“切换”。
online设置为false。状态已经改变，所以组件被重新渲染。 - ⛔ 打开开发工具并在网络面板中切换到“离线”。
onlinewas alreadyfalse，因此状态没有改变，但组件仍在重新渲染。
预计会发生什么
在步骤 3 中，不应重新渲染组件，因为状态未更改。
更新 2
const {useState, useEffect} = React;
let counterRenderComplete = 0;
let counterRenderStart = 0;
function Test() {
const [yes, setYes] = useState('yes');
console.log(`Component function called ${++counterRenderComplete}`);
useEffect(() => console.log(`Render completed ${++counterRenderStart}`));
return (
<div>
<h1>{yes ? 'yes' : 'no'}</h1>
<button onClick={() => {
setYes(!yes);
}}>Toggle</button>
<button onClick={() => {
setYes('yes');
}}>Set to Yes</button>
</div>
);
}
ReactDOM.render(<Test />, document.getElementById('root'));
<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>怎么了
- ✅ 单击“设置为是”。由于 的值
yes已经true是 ，因此状态不变，因此不会重新渲染组件。 - ✅ 点击“切换”。
yes设置为false。状态已经改变，所以组件被重新渲染。 - ✅ 单击“设置为是”。
yes设置为true。状态再次改变，所以组件被重新渲染。 - ⛔ 再次单击“设置为是”。尽管组件通过调用函数开始渲染过程，但状态没有改变。尽管如此，React 会在流程中间的某个地方退出渲染，并且不会调用效果。
- ✅ 后续点击“设置为是”不会按预期导致重新渲染（函数调用）。
问题
为什么组件仍然重新渲染？我做错了什么，还是这是一个 React 错误？