function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
这种写法有重大限制,必须是纯函数,不能包含状态,也不支持生命周期方法,因此无法取代类。
const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
const count = 42; // ... <p>You clicked {count} times</p>
//初始值 function Counter() { const count = 0; // ... <p>You clicked {count} times</p> // ... } // 点击一次 function Counter() { const count = 1; // ... <p>You clicked {count} times</p> // ... } // 点击两次 function Counter() { const count = 2; // ... <p>You clicked {count} times</p> // ... }
function Counter() { const [count, setCount] = useState(0); function handleAlertClick() { setTimeout(() => { alert(‘You clicked on: ‘ + count); }, 3000); } return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> <button onClick={handleAlertClick}> Show alert </button> </div> ); }
//第一次渲染 const [age, setAge] = useState(42); const [fruit, setFruit] = useState(‘banana‘); const [todos, setTodos] = useState([{ text: ‘Learn Hooks‘ }]); //第二次渲染 useState(42); //读取状态变量age的值(这时候传的参数42直接被忽略) useState(‘banana‘); //读取状态变量fruit的值(这时候传的参数banana直接被忽略) useState([{ text: ‘Learn Hooks‘ }]); //...
let showFruit = true; const [age, setAge] = useState(42); if(showFruit) { const [fruit, setFruit] = useState(‘banana‘); showFruit = false; } const [todos, setTodos] = useState([{ text: ‘Learn Hooks‘ }]); //第二次渲染 useState(42); //读取状态变量age的值(这时候传的参数42直接被忽略) // useState(‘banana‘); useState([{ text: ‘Learn Hooks‘ }]); //读取到的却是状态变量fruit的值,导致报错
<div className="App"> <Navbar/> <Messages/> </div>
const AppContext = React.createContext({});
<AppContext.Provider value={{ username: ‘superawesome‘ }}> <div className="App"> <Navbar/> <Messages/> </div> </AppContext.Provider>
export default function Header() { const { username } = useContext(AppContext) return ( <div> <p>my name is {username}</p> </div> ); }
export default function Content() { const { username } = useContext(AppContext) return ( <div> <p>Hello, {username}</p> </div> ); }
(state, action) => newState
const [state, dispatch] = useReducer(reducer, initialState);
const myReducer = (state, action) => { switch(action.type) { case(‘countUp‘): return { ...state, count: state.count + 1 } default: return state; } }
export default () => { const [state, dispatch] = useReducer(myReducer, { count: 0 }); return ( <div> <button onClick={() => dispatch({ type: "countUp" })}>+1</button> <p>Count: {state.count}</p> </div> ); };
useEffect(() => { setLoading(true); fetch(`https://cnodejs.org/api/v1/topics?page=${pageId}`) .then(response => response.json()) .then(data => { setTitle(data.data[0].title); setLoading(false); }); }, [pageId]);
// 第一次渲染 useEffect(() => { fetch(`https://cnodejs.org/api/v1/topics?page=${1}`) }); //第二次渲染 useEffect(() => { fetch(`https://cnodejs.org/api/v1/topics?page=${2}`) }); //...
class Counter extends React.Component { state = { count: 0, }; componentDidMount() { this.interval = setInterval(this.tick, 1000); } componentWillUnmount() { clearInterval(this.interval); } tick = () => { this.setState({ count: this.state.count + 1 }); } render() { return <h1>{this.state.count}</h1>; } }
```js function Counter() { const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, []); return <h1>{count}</h1>; } ```
```js setCount(count + 1); ``` 等价于 ```js setCount(0 + 1); ``` 而我们的依赖为[],effect不会重新执行,所以之后每一次其实都在调用 ```js setCount(0 + 1); ```
```js useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); ```
```js useEffect(() => { const id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); => useEffect(() => { const id = setInterval(() => { setCount(c => c + 1); }, 1000); return () => clearInterval(id); }, [count]); ```
```js const useTitle = (pageId) => { const [loading, setLoading] = useState(true); const [title, setTitle] = useState(‘‘); useEffect(() => { setLoading(true); fetch(`https://cnodejs.org/api/v1/topics?page=${pageId}`) .then(response => response.json()) .then(data => { setTitle(data.data[0].title); setLoading(false); }); }, [pageId]); return [loading, title] } ```
原文:https://www.cnblogs.com/yolkpie/p/14356478.html