未名天
react-hooks官⽅⽂档笔记reali是什么意思
1、uState
import { uState } from 'react';
function Example （） {
const [count, tCount] = uState(0);
return (<div>
<span>{count}</span>
<button onClick={ () => { tCount(count+1) } }>增加次数</button>
</div>);
}69什么意思
2、uEffect
Effects without cleanup
import { uEffect } from 'react;
uEffect(() => {
document.title = 'try to underStand what is effects';
});
What does uEffect do?zoetrope
By using this Hook, you tell React that your component needs to do something after render.
React will remember the function you pasd (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we t the document title, but we could also perform data fetching or call some other imperative API.
// Data fetching, tting up a subscription, and manually changing the DOM in React components are all examples of side effects. // uEffect is similar to componentDidMount and componentDidUpdate
Why is uEffect called inside a component?
Placing uEffect inside the component lets us access the count state variable (or any props) right from the effect.
We don’t need a special API to read it — it’s already in the function scope.
Hooks embrace JavaScript closures and avoid introducing React-specific APIs where JavaScript already provides a solution.
Does uEffect run after every render?
Yes!By default, it runs both after the first render andafter every update.
Instead of thinking in terms of “mounting” and “updating”,
you might find it easier to think that effects happen “after render”.
海外考试报名中心React guarantees the DOM has been updated by the time it runs the effects.
Experienced JavaScript developers might notice thatthe function pasd to uEffect is going to be
different on every render. This is intentional. In fact, this is what lets us read the count value from inside the effect without worrying about it getting stale.henry什么意思
Every time we re-render, we schedule a different effect, replacing the previous one.
In a way, this makes the effects behave more like a part of the render result — each effect “belongs” to a particular render.
Effects with cleanup
In a React class, you would typically t up a subscription in componentDidMount, and clean it up in componentWillUnmount.
Notice how componentDidMount and componentWillUnmount need to mirror each other.
Lifecycle methods force us to split this logic even though conceptually code in both of them is related to the same effect.
uEffect(() => {
function tFriendStatus (status) {
}
chatApi.subscibeToFriendStatus(id,tFriendStatus);
return function cleanUp () {
chatApi.unSubscibeFromFriendStatus(id,tFriendStatus);attacker
} // We don’t have to return a named function from the effect. We called it cleanup here to clarify its purpo, but you could return an arrow function or call it something different.
旅美大熊猫回国});
You might be thinking that we’d need a parate effect to perform the cleanup.
But code for adding and removing a subscription is so tightly related that uEffect is designed to keep it together.
If your effect returns a function, React will run it when it is time to clean up:
Why did we return a function from our effect?
This is the optional cleanup mechanism for effects.
Every effect may return a function that cleans up after it.
This lets us keep the logic for adding and removing subscriptions clo to each other.
They’re part of the same effect!
When exactly does React clean up an effect?
React performs the cleanup when the component unmounts.加班费 英文
However, as we learned earlier, effects run for every render and not just once.
This is why React also cleans up effects from the previous render before running the effects next time.
Tip: Optimizing Performance by Skipping Effects
uEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // Only re-run the effect if count changes
3、Rules of Hooks
Only Call Hooks at the Top Level
Don’t call Hooks inside loops, conditions, or nested functions.
Instead, always u Hooks at the top level of your React function.
By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly prerve the state of Hooks between multiple uState and uEffect calls.
Only Call Hooks from React Functions
Don’t call Hooks from regular JavaScript functions. Instead, you can:
Call Hooks from React function components.
holoceneCall Hooks from custom Hooks
