react-hooks官方文档笔记-FreeNAS中文网

admin 管理员组

文章数量: 887031

2024年1月5日发(作者：标准个人简历模板下载)

Every time we re-render, we schedule a different effect, replacing the previous 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 set up a subscription in

componentDidMount, and clean it up in

componentWillUnmount.

Notice how

componentDidMount and

componentWillUnmount need to mirror each cle methods force us to split this logic even though conceptually code in both of them is related to the same effect.

useEffect(() => {　　function setFriendStatus (status) {　　}　　beToFriendStatus(id,setFriendStatus);　　return function cleanUp () {　　　　cibeFromFriendStatus(id,setFriendStatus);　　} // We don’t have to return a named function from the effect. We called it

cleanup here to clarify its purpose, but you could return anarrow function or call it something different. });You might be thinking that we’d need a separate effect to perform the code for adding and removing a subscription is so tightly related that

useEffect is designed to keep it 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 effect may return a function that cleans up after lets us keep the logic for adding and removing subscriptions close to each ’re part of the same effect!

When exactly does React clean up an effect?

React performs the cleanup when the component r, as we learned earlier, effects run for every render and not just is why React also cleans up effects from the previous render before running the effects next time.

Tip: Optimizing Performance by Skipping EffectsuseEffect(() => { = `You clicked ${count} times`; }, [count]); // Only re-run the effect if count changes

3、Rules of HooksOnly Call Hooks at the Top LevelDon’t call Hooks inside loops, conditions, or nested functions.

Instead, always use Hooks at the top level of your React following this rule, you ensure that Hooks are called in the same order each time a component ’s what allows React to correctly preserve the state of Hooks between multiple

useState and

useEffect calls.

Only Call Hooks from React FunctionsDon’t call Hooks from regular JavaScript functions. Instead, you can:

本文标签：模板标准作者下载

版权声明：本文标题：react-hooks官方文档笔记内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1704454210h460457.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。