在Canvas中使用React Hooks

在线体验地址：https://han-hooks.netlify.com/

在本文中，我将使用React Hooks创建一个html canvas 画图网站，我将使用create-react-app脚手架从零开始构建项目。最后这个应用程序有诸如清除、撤销和使用localStorage基本功能。

本文我将向您展示任何构建自定义Hooks和在普通的Hooks中重用有状态逻辑。

基本设置

我们首先使用create-react-app创建一个新的React应用程序。

$ npx create-react-app canvas-and-hooks
$ cd canvas-and-hooks/
$ yarn start

您的浏览器会打开http://localhost:3000/，然后您会看到一个旋转的React logo图片，那么，您现在可以开始了…

第一个hook：useRef

用您喜欢的编辑器打开src/App.js文件📃，然后替换成以下内容：

import React from 'react'
function App() {
  return (
    <canvas
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {
        alert(e.clientX)
      }}
    />
  )
}
export default App

在浏览器窗口中点击任意一处，如果会弹出一个弹出框：显示您鼠标🖱️点击的x坐标，很好！应用程序跑起来了。

现在，我们真正的画一些东西。这样的话我们就需要canvas 元素的ref，所以，开始使用今天的第一个hook useRef吧：

import React from 'react'
function App() {
  const canvasRef = React.useRef(null)
  return (
    <canvas
      ref={canvasRef}
      width={window.innerWidth}
      height={window.innerHeight}
      onClick={e => {        
         const canvas = canvasRef.current        
         const ctx = canvas.getContext('2d')        
         // implement draw on ctx here
      }}
    />
  )
}
export default App

通常，在React中你不需要一个ref来做更新的操作。但是canvas不像其它的DOM元素。大多数DOM元素都有一个属性，比如说：value，你可以直接更新它。在canvas中允许✅您使用context（本🌰：ctx）来画一些东西。为此，我们不得不使用ref，它是对实际canvas DOM元素的引用。

现在我们有了canvas上下文，是时候画一些东西了。为此，粘贴复制以下代码绘制一个SVG hook。它与hooks无关，如果您不理解它也不需要担心😓。

import React from 'react'
const HOOK_SVG =  'm129.03125 63.3125c0-34.914062-28.941406-63.3125-64.519531-63.3125-35.574219 0-64.511719 28.398438-64.511719 63.3125 0 29.488281 20.671875 54.246094 48.511719 61.261719v162.898437c0 53.222656 44.222656 96.527344 98.585937 96.527344h10.316406c54.363282 0 98.585938-43.304688 98.585938-96.527344v-95.640625c0-7.070312-4.640625-13.304687-11.414062-15.328125-6.769532-2.015625-14.082032.625-17.960938 6.535156l-42.328125 64.425782c-4.847656 7.390625-2.800781 17.3125 4.582031 22.167968 7.386719 4.832032 17.304688 2.792969 22.160156-4.585937l12.960938-19.71875v42.144531c0 35.582032-29.863281 64.527344-66.585938 64.527344h-10.316406c-36.714844 0-66.585937-28.945312-66.585937-64.527344v-162.898437c27.847656-7.015625 48.519531-31.773438 48.519531-61.261719zm-97.03125 0c0-17.265625 14.585938-31.3125 32.511719-31.3125 17.929687 0 32.511719 14