第一手 Taste of React Hooks: useState & useEffect

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