10、React开发：自定义Hook、上下文与状态管理

React开发：自定义Hook、上下文与状态管理

1. React组件重渲染与自定义Hook

1.1 组件重渲染情况

在React开发中，某些组件的重渲染频率可能会比其他组件高。例如颜色选择组件，当用户在颜色轮上拖动鼠标时，颜色值会不断变化，这会导致该组件比标题字段组件重渲染的次数更多。不过，React本身设计就是为了处理这类工作负载，所以这种情况是正常的。但我们要注意，了解受控组件会频繁重渲染这一特性，能避免在组件中添加耗时且复杂的处理过程，同时在优化React组件时也会很有帮助。

1.2 创建自定义Hook

当我们有一个包含大量输入元素的大型表单时，可能会想复制粘贴以下代码：

value={title}
onChange={event => setTitle(event.target.value)}

虽然这样看似能提高开发速度，但复制粘贴代码往往意味着存在冗余，应该将其抽象成一个函数。我们可以创建一个自定义Hook来封装创建受控表单组件所需的细节，例如 useInput ：

import { useState } from "react"; 

export const useInput = initialValue => { 
  const [value, setValue] = useState(initialValue); 
  return [ 
    { value, onChange: e => s