函数式的 React 组件在渲染以后可以使用 useEffect 这个 Hook 安排执行一些动作，这些动作就是 effect，也就是效应。

在组件文件的顶部先从 react 这个包里导入 useEffect 这个 Hook，然后在组件内部，用一下 useEffect，提供一个函数参数，这个函数就是副作用，也就是每次组件被渲染以后要执行的动作。可以先在控制台上输出点内容 ，useEffect，后面加上组件里的这个 emoji 这个状态的值。

在浏览器观察一下控制台，你会发现组件渲染以后就会在控制台上输出 useEffect 然后是 emoji 这个状态的值，这就是在这个组件里使用 useEffect 安排要做的事情。

按一下表情符号按钮，会修改组件里的 emoji 状态，这样组件会重新渲染，每次渲染之后都会执行使用 useEffect 这个 Hook 添加的效应。

清理 effect

有时候在组件里添加的效应在更新或者取消挂载组件的时候做一些清理工作，使用 useEffect 这个 Hook 的时候，可以让它返回一个函数，我们可以把要做的清理动作放到这个返回的函数里执行。

比如这里可以让这个 effect 返回一个函数，这里我们只是为了证明 react 会执行这个清理动作，所以可以简单的在控制台上输出一行文字，useEffect: 清理 effect ~~~

然后在浏览器再测试一下，点击表情符号，这回组件每次重新渲染的时候都会执行我们设置的清理动作。

执行效应的条件

在组件里添加的效应可以让它在特定数据有变化的时候再执行，比如根据组件里的某些属性或者状态，当它们发生变化的时候再执行使用 useEffect 添加的效应。

现在组件无论是组件里的 emoji 还有 quantity，只在它们有变化都会执行添加的效应。 这里我们可以设置一下效应的依赖，设置一下这个 useEffect 的第二个参数，值是一个数组，里面的项目就是依赖的数据，比如添加一个 emoji。这样只有在 emoji 发生变化的时候，才会执行这里添加的这个效应。

在浏览器上测试一下，点击表情符号会改变 emoji 这个状态的值，这种情况下会执行刚才我们用 useEffect 添加的效应。再试一下点击 + 号或 - 号，这会改变组件里的 quantity 状态的值，这种情况不会执行在组件里添加的那个效应。

只执行一次效应

有些效应只需要在组件初始渲染之后执行一次，这种情况可以给 useEffect 的依赖参数提供一个空白的数组。在这个组件里再用一下 useEffect ，提供一个 effect，用 console.log 在控制台上输出一行文字，useEffect: 初次渲染组件。再把 useEffect 的第二个参数值设置成空白的数组。这样这个效应只会执行一次。

在浏览器测试一下，控制台上现在会输出 useEffect: 初次渲染组件，点击表情符号或者加减号按钮改变组件里的状态，组件重新渲染以后并没有在控制台上再次输出 useEffect: 初次渲染组件 这行文字。