function App() { const [count, setCount] = useState(0) return ( <CounterButton title={`Click HERE to increment: ${count}`} onPress={() => setCount(count + 1)} /> ) }
function App() { const [count, setCount] = useState(0) useEffect(() => { document.body.style.backgroundColor = randomColor() }, []) return ( <button onClick={() => { setCount(count + 1) }} > Click HERE to increment: {count} </button> ) }
export default function App() { const [count, setCount] = useState(0) const isMultipleOf3 = Math.floor(count / 3) useEffect(() => { if (count > 0) { alert(`${count} is divisible by 3!`) } }, [isMultipleOf3]) return ( <button onClick={() => { setCount(count + 1) }} > Click HERE to increment: {count} </button> ) }
function CounterButton() { const [count, setCount] = useState(0) return ( <button onClick={() => { setCount(count + 1) }} > Click HERE to increment: {count} </button> ) }
export default function Counter() { const [count, setCount] = useState(0); return ( <div> <h3>Current count is {count}</h3> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }
export default function () { const [ count, setCount ] = useState(0); const { todos } = useModel('todos'); useEffect(() => { setCount(todos.length); }, [todos]); return { count, }; }
function DocTitleTwo() { const [count, setCount] = useState(0) useDocumentTitle(count) return ( <div style={{ width: '50%', margin: '1em auto 4em'}}> <p> <button onClick={ () => setCount(prevCount => prevCount + 1) }>Count - {count}</button> </p> </div> ) }
function HookCounterTwo() { const initialState = 0; const [count, setCount] = useState(initialState); return ( <div> <p>Count {count}</p> <button onClick={ () => setCount(initialState) }>Reset</button> <button onClick={ () => setCount(prevState => prevState + 1) }>Increment</button> <button onClick={ () => setCount(prevState => prevState - 1) }>Decrement</button> </div> ); }
function useMyCount(num) { const [ count, setCount ] = useState(0); // 格式化 debug useDebugValue(count > num ? '溢出' : '不足', status => { return status === '溢出' ? 1 : 0; }); const myCount = () => { setCount(count + 2); } return [ count, myCount ]; }
const Counter = () => { const [count,setCount] = useState(0); return( <div style={{marginBottom:"50px"}}> <h2>Challenge 1</h2> <p> Count is: {count} </p> <button onClick={() => setCount(count+1)}>Increase Count !</button> </div> ) }
function App() { const [count, setCount] = useState(0) useEffect(() => { document.body.style.backgroundColor = randomColor() }) return ( <button onClick={() => { setCount(count + 1) }} > Click HERE to increment: {count} </button> ) }
function HookCounter() { const [count, setCount] = useState(0); return ( <button onClick={ () => setCount(count + 1) }>Count {count}</button> ) }