需要 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]