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="aHR0cHM6Ly91bnBrZy5jb20vcmVhY3QvdW1kL3JlYWN0LmRldmVsb3BtZW50Lmpz"></script>
<script src="aHR0cHM6Ly91bnBrZy5jb20vcmVhY3QtZG9tL3VtZC9yZWFjdC1kb20uZGV2ZWxvcG1lbnQuanM="></script>

发生了什么

1. ✅单击"设置为是"。由于yes的值已为"yes"，因此状态不变，因此不会重新呈现组件。
2. ✅点击"切换"。yes设置为"no"。状态已更改，因此将重新呈现该组件。
3. ✅单击"设置为是"。yes设置为"yes"。状态再次更改，于是重新呈现该组件。
4. ⛔再次单击"设置为是"。状态未更改，但组件仍在重新呈现。
5. ✅后续单击"设置为是"不会导致按预期重新呈现。

预计会发生什么

在步骤4中，不应重新呈现该组件，因为状态未更改。

更新

作为React docs状态，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="aHR0cHM6Ly91bnBrZy5jb20vcmVhY3QvdW1kL3JlYWN0LmRldmVsb3BtZW50Lmpz"></script>
<script src="aHR0cHM6Ly91bnBrZy5jb20vcmVhY3QtZG9tL3VtZC9yZWFjdC1kb20uZGV2ZWxvcG1lbnQuanM="></script>

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="aHR0cHM6Ly91bnBrZy5jb20vcmVhY3QvdW1kL3JlYWN0LmRldmVsb3BtZW50Lmpz"></script>
<script src="aHR0cHM6Ly91bnBrZy5jb20vcmVhY3QtZG9tL3VtZC9yZWFjdC1kb20uZGV2ZWxvcG1lbnQuanM="></script>