在 React 的函数式组件里，如果需要做比较重的运算得到一个值，可以考虑使用 useMemo 这个 hook，把运算的方法交给它，再设置一些依赖，这样只有在依赖的数据发生变化以后，才会重新执行运算方法得到新的值。

打开 app-hook.tsx ，在组件里定义一个函数，名字是 makeEmojiView。 这个函数有个参数，名字是 emoji，类型是 string。

它可以根据传递的 emoji，返回组件的一块视图。在函数里声明一个 weather ，它的值是一组跟天气相关的表情符号。下面再声明一个 randomWeather，它的值是上面这个 weather 数组里的一个随机的项目，用一下 weather 方括号，里面用一下Math.floor，提供一个 Math.random() 乘以 weather.length。

下面可以在控制台输出 makeEmojiView，然后是 randomWeather，再加上 emoji 参数的值。这个函数返回的东西是用 JSX 表示的 React 元素，一组括号，里面先用一个 Fragment 的简写形式，这样这里就不需要额外的包装元素了。

里面用一组 div 元素，添加 style 属性，提供一个对象值，把 fontSize 设置成 32px，元素里的内容是上面随机得到的一个天气表情符号，randomWeather。div 元素的下面，再添加一个 emoji。

然后在组件里，声明一个 emojiView，它的值可以执行一下 makeEmojiView ，提供一个 emoji 参数。

测试

在浏览器测试一下，现在界面上会显示的这个表情符号这块视图是用组件里的 makeEmojiView 函数制造出来的。它里面会出现一个随机的天气，点击表情符号按钮或者加减号按钮，每次重新渲染组件都会执行 makeEmojiView 函数得到表情符号这块视图。

我希望只有在组件里的 emoji 状态有变化的时候，再去执行 makeEmojiView，其它状态有变化的时候不需要重新执行这个函数。

useMemo

在组件文件的顶部，先从 react 这个包里把 useMemo 导入进来。

然后在组件里，剪切一下执行 makeEmojiView 这个函数的代码，这里用一下 useMemo 这个 hook，第一个参数是一个函数，返回的东西就是执行这个 makeEmojiView 以后返回的值，第二个参数是依赖列表，一个数组，里面添加一个 emoji。

这样只有在 emoji 这个数据的值发生变化之后，才会重新执行 makeEmojiView 得到新的值，不然就使用之前得到的值。

在浏览器测试一下，点击加减号按钮，表情界面这块视图没有变化，说明没有执行 makeEmojiView ，因为如果执行了这个函数会在控制台上输出一行文字，天气表情符号也会随机变化。

之所以没有变化，是因为我们在组件里用了 useMemo，只有在组件的 emoji 数据有变化的时候，才会重新执行指定的函数得到新的值。点击加减号改变的是组件里的 quantity 这个状态的值，所以表情符号不会发生改变。

按一下表情符号按钮，组件里的 emoji 数据发生了变化，这样就会触发执行指定的方法获取到新的值。你会发现，点击表情符号按钮以后，天气表情符号会随机发生改变，说明执行了 makeEmojiView 计算出了新的值。