需要 React 16.7.0 以上:
import React, {useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
let histories = [];
const App = function(props){
let _style = {
textAlign: 'center',
margin: '100px',
fontSize: '50px',
lineHeight: '100px'
}
const [counter,setCounter] = useState(10);
useEffect(() => {
histories.push(counter);
console.log(histories);
},[counter]);
return (
<div style={_style}>
{counter}
<br />
<button onClick={() => {setCounter(counter + 1)}}>Increment</button>
<button onClick={() => {setCounter(counter)}}>Just Kidding</button>
<button onClick={() => {setCounter(counter - 1)}}>Decrement</button>
</div>
)
}
ReactDOM.render(
<App />
,
document.getElementById('root')
);
Console Output:
main.js:21594 https://fb.me/react-devtools main.js:24846 [10] main.js:24846 (2) [10, 11] main.js:24846 (3) [10, 11, 12] main.js:24846 (4) [10, 11, 12, 11] main.js:24846 (5) [10, 11, 12, 11, 10] main.js:24846 (6) [10, 11, 12, 11, 10, 9] main.js:24846 (7) [10, 11, 12, 11, 10, 9, 10] main.js:24846 (8) [10, 11, 12, 11, 10, 9, 10, 11] main.js:24846 (9) [10, 11, 12, 11, 10, 9, 10, 11, 12] main.js:24846 (10) [10, 11, 12, 11, 10, 9, 10, 11, 12, 11]




