接下来，我们将会以大量的实践案例来展开 React 19 新 hook 的运用。
本文模拟的实践案例为点击按钮更新数据。这在开发中是一个非常常见的场景。
案例完成之后的最终演示效果图如下：
我们直接用 React 19 新的开发方式来完成这个需求。
首先创建一个方法用于请求数据。
const getApi = async () => { const res = await fetch('https://api.chucknorris.io/jokes/random') return res.json()}这里一个非常关键的地方就在于，当我们要更新的数据时，我们不再需要设计一个 loading 状态去记录数据是否正在发生请求行为，因为 Suspense 帮助我们解决了 Loading 组件的显示问题。
与此同时，use() 又帮助我们解决了数据获取的问题。那么问题就来了，这个就是，好像我们也不需要设计一个状态去存储数据。那么应该怎么办呢？
这里有一个非常巧妙的方式，就是把创建的 promise 作为状态值来触发组件的重新执行。每次点击，我们都需要创建新的 promise
代码如下：
// 记住这个初始值const [api, setApi] = useState(null)这个时候，当我们点击事件执行时，则只需要执行如下代码去触发组件的更新。
function __clickToGetMessage() { // 每次点击，都会创建新的 promise setApi(getApi())}getApi() 执行，新的请求会发生。他的执行结果，又返回了一个新的 promise。
因此，点击之后会创建的新 promise 值，api 此时就会作为状态更改触发组件的更新。
完整代码如下：
export default function Index() { const [api, setApi] = useState(null) function __clickToGetMessage() { setApi(getApi()) } return ( <div> <div id='tips'>点击按钮获取一条新的数据</div> <button onClick={__clickToGetMessage}>获取数据</button> <div className="content"> <Suspense fallback={<div>loading...</div>}> <Item api={api} /> </Suspense> </div> </div> )}const Item = (props) => { if (!props.api) { return <div>nothing</div> } const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}案例写完之后。我们基本上就能够实现最开始截图中的交互效果了。但是现别急，还没有完。我们还需要进一步分析一下这个案例。
这里我们需要注意观察两个事情。
一个是观察当前组件更新，更上层的父组件是否发生了变化。我们可以在 App 组件中执行一次打印。
此时可以发现，当我们重新请求时，当前组件更新，但是上层组件并不会重新执行。
我们可以出得结论：更简洁的状态设计，有利于命中 React 默认的性能优化规则。
具体的规则请在 React 知命境合集中查看。
更简洁的状态设计，也是 React 19 所倡导的开发思路。
另外一个事情，是我们要特别特别注意观察子组件 Item 的实现。
首先因为我们初始化时，给 api 赋予的默认值是 null。
// 记住这个初始值const [api, setApi] = useState(null)之后，我们就将 api 传给了子组件 Item。
<Item api={api} />然后在 Item 组件的内部实现中，因为我们直接把 api 传给了 use，那么此时直接执行肯定会报错。
const joke = use(props.api)要注意的是，我们刚才说，使用 Suspense 会捕获子组件的异常，但是不是捕获所有异常，它只能识别 promise 的异常。因此，这里的报错会直接影响到整个页面。
所以，为了处理好初始化时传入 api 值为 null，我在内部实现代码逻辑中，使用了 if 判断该条件，然后执行了一次 return。我试图让 use(null) 得不到执行的时机。
const Item = (props) => { if (!props.api) { console.log('初始化时，api == null') return <div>nothing</div> } const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}那么，我的意图是否能成功呢？
我们在 return 后面插入一个 console.log 来观察代码的执行情况，代码如下：
const Item = (props) => { if (!props.api) { console.log('初始化时，api == null') return <div>nothing</div> } console.log('初始化时这里是否执行'); const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}演示效果如下图所示：
我们发现，当我反复刷新页面，让初始化流程执行时，return 后面的代码并不会执行。
再然后，我们新增一点内容，比如在 return 后面使用一个 useEffect。
const Item = (props) => { if (!props.api) { console.log('初始化时，api == null') return <div>nothing</div> } useEffect(() => { console.log('xxx') }, []) console.log('初始化时这里是否执行') const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}然后演示再看看。我们发现 effect 也不会执行。然后我们还可以搞点好玩的。
Item 代码改造如下：
const Item = (props) => { if (!props.api) { const [count, setCount] = useState(0) console.log('初始化时，api == null') return <div onClick={() => setCount(count + 1)}>nothing, {count}</div> } console.log('初始化时这里是否执行') const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}注意看，我们在 if 条件判断中，单独创建了一个 useState，并在对应的元素上添加了一个让 count 递增的交互。
这段在之前版本的开发中一定会触发语法错误提示的代码。
最终也是能勉强运行，但是代码会疯狂报错。
然后，我继续一个骚操作，我在 if 中条件判断中，使用 useEffect，代码如下：
const Item = (props) => { if (!props.api) { useEffect(() => { console.log('useEffect 在 if 中执行') }, []) return <div>nothing</div> } console.log('初始化时这里是否执行') const joke = use(props.api) return ( <div className='a_value'>{joke.value}</div> )}也能正常执行。观察一下演示效果：
结论：
很明显，react 19 的 hook 在底层发生了一些优化更新，我们可以不用非得把所有的 hook 都放在函数组件的最前面去执行了。
在 React 19 中，我们可以把 hook 放到 return 之后，也可以放到条件判断中去执行。
但是，我们一定要注意的是，并非表示我们可以随便乱写。当条件互斥时，状态之间如果存在不合理的耦合关系，依然不能正常执行。我们列举两个案例来观察这个事情。
第一个案例，我们依然在 if 中执行一个 useEffect，但是不同的是，我把在 if 之外的状态 counter 作为依赖项传入。
代码如下。
const Item = (props) => { const [counter, setCounter] = useState(0) if (!props.api) { useEffect(() => { console.log('useEffect 在 if 中执行') }, [counter]) return <div>nothing</div> } console.log('初始化时这里是否执行') const joke = use(props.api) return ( <div className='a_value' onClick={() => setCounter(counter + 1)}>{joke.value}</div> )}此时一个很明显的问题就是，if 内部在 UI 逻辑上本和外部是互斥的关系，但是我们在状态逻辑上却相互关联。因此这个之后，代码执行就会报错，明确的告诉你这种写法不合理。
非常的方便省事。
当然这样写会造成冗余的接口请求执行。因此我们可以稍作调整就可以了。
这里需要根据需求调整，案例只做演示。
const _initApi = getApi()function Index() { const [api, setApi] = useState(_initApi) ...}OK，今天的案例就介绍到这里，后续的章节我们还会继续更多的实战案例的分析。
本文链接：http://www.28at.com/showinfo-26-92464-0.html喔！React19 中的 Hook 可以写在 If 条件判断中了。Use 实践：点击按钮更新数据
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号