React Hooks实践应用

React-Hooks.png

React16.8 发布已经很长世间, 这段时间项目不忙, 正好准备使用 React Hooks 进行重构升级。React Hooks 的特性是它可以让你在不编写 class 的情况下使用 state 以及其他的 React 的特性,下面来让我们一起进入 React Hooks的新特性实践吧！

React Hook 特性

  1. 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
  2. 100% 向后兼容的。 Hook 不包含任何破坏性改动。
  3. 现在可用。 Hook 已发布于 v16.8.0

官方 10 种 React Hooks

1.useState

useState 可以让我们在不编写 class 的情况下使用 state,以此可以达到让函数组建重新渲染

initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

function useState<S = undefined>(): [
  S | undefined,
  Dispatch<SetStateAction<S | undefined>>
]

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props)
  return initialState
})

const App = () => {
  const [count, setCount] = useState(0) // number 类型
  const [obj, setObject] = React.useState({
    count: 0,
    name: "alex",
  }) // object 类型
  const [todos, setTodos] = useState([{ text: "Learn Hooks" }]) // 数组类型

  return (
    <div>
      <p>current value {obj.count}</p>
      <button onClick={() => setCount({ ...obj, count: count + 1 })}>+</button>
      <button onClick={() => setCount({ ...obj, count: count + 1 })}>-</button>
    </div>
  )
}

setState 可以局部的更新,但是 useState 必须把真个对象修改后的只丢进去来进行更新,useState 覆盖式更新 setState 调合 Object.assign()

const App = () => {
  const [name, setName] = React.useState('jack')
  return (
    <div>
      <p>{name}</p>
      <button onClick={() => setName('rose')}>SET NEW NAME</button>
    </div>
  )
}

const AppChild = React.memo({{ data }:{ data: string }}) => {
  const [name, setName] = React.useState(data)
  return (
    <div>{name}---{data}</div>
  )
}

const AppChild = React.memo({{ data }:{ data: string }}) => {
  const [name, setName] = React.useState(data)

  React.useEffect(() => {
    setName(data)
  }, [data])

  return (
    <div>{name}---{data}</div>
  )
}

initialState 参数只会在组件的初始渲染中起作用, 可以使用 useEffect

2、9.useEffect、 useLayoutEffect

useEffect:

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。

React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，因此会使得处理额外操作很方便。

在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。

使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

useLayoutEffect:
其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect.

function useEffect(effect: EffectCallback, deps?: DependencyList): void

let timer = null
const App = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    document.title = "componentDidMount" + count
  }, [count])

  React.useEffect(() => {
    timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1)
    }, 1000)
    // 一定注意下这个顺序：
    // 告诉react在下次重新渲染组件之后，同时是下次执行上面setInterval之前调用
    return () => {
      document.title = "componentWillUnmount"
      clearInterval(timer)
    }
  }, [])

  return (
    <div>
      Count: {count}
      <button onClick={() => clearInterval(timer)}>clear</button>
    </div>
  )
}
  1. 比如第一个 useEffect 中,理解起来就是一旦 count 值发生改变，则修改 documen.title 值.
  2. 而第二个 useEffect 中传递了一个空数组[],这种情况下只有在组件初始化或销毁的时候才会触发,用来代替 componentDidMount 和 componentWillUnmount 慎用.
  3. 还有另外一个情况,就是不传递第二个参数,也就是 useEffect 只接收了第一个函数参数,代表不监听任何参数变化.每次渲染 DOM 之后,都会执行 useEffect 中的函数,类似替代 componentDidUpdate.

注意点

  1. useEffect 里面使用到的 state 的值, 固定在了 useEffect 内部， 不会被改变，除非 useEffect 刷新，重新固定 state 的值
  2. useEffect 不能被判断包裹
if (x < y) {
  React.useEffect(() => {
    document.title = "hello world"
  })
}
  1. 不能被打断, 在函数中提前使用 return， 会提前结束，不会去执行 return 之后的代码
const App = () => {
  return <div>hello world</div>

  React.useEffect(() => {
    document.title = "hello world"
  })
}

3.useContext

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。

如果你在接触 Hook 前已经对 context API 比较熟悉，那应该可以理解，useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>。

useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context。

function useContext<T>(
  context: Context<T> /*, (not public API) observedBits?: number|boolean */
): T

const colorContext = React.createContext("gray")

const Bar = () => {
  // useContext 的参数必须是 context 对象本身
  const color = React.useContext(colorContext)
  return <div>{color}</div>
}

const Foo = () => <Bar />

const App = () => {
  return (
    <colorContext.Provider value={"red"}>
      <Foo />
    </colorContext.Provider>
  )
}

useContext 可以解决 Consumer 多状态嵌套的问题

4.useReducer

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

function useReducer<R extends Reducer<any, any>>(
  reducer: R,
  initialState: ReducerState<R>,
  initializer?: undefined
): [ReducerState<R>, Dispatch<ReducerAction<R>>]

interface IState{
  count: number
}

interface IAction{
  type: 'increment' |　'decrement'
}

const initialState: IState = { count: 0 }

const init = (initialCount) => {
  return { count: 0 }
}

function reducer(state: IState, action: IAction){
  switch(action.type){
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count:state.count - 1 }
    default:
      throw new Error()
  }
}

const App = () => {
  const [state, dispatch] = React.useReducer(reducer, initialState)

  // 惰性传值
  const [state, dispatch] = React.useReducer(reducer, initialCount, init)
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch('decrement')}>-</button>
      <button onClick={() => dispatch('increment')}>+</button>
    <>
  )
}

useReducer 可以直接传值,也可以惰性传值,惰性传值可以达到重置,直接访问外部 Reducer
如果 Reducer Hook 的返回值与当前 state 相同，React 将跳过子组件的渲染及副作用的执行

5、6 useCallback、useMemo

useMemo 返回一个 memoized 值
useCallback 返回一个 memoized 回调函数。
当传入的依赖项改变时,函数才会执行更新,当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用

function useCallback<T extends (...args: any[]) => any>(
  callback: T,
  deps: DependencyList
): T

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T

useCallbacl(fn, deps) === useMemo(() => fn, deps)

const memoizedCallback = useCallback(() => {
  doSomething(a, b)
}, [a, b])

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

useMemo 和 useCallback 实践

const App = () => {
  const [count, setCount] = React.useState(0)
  const [name, setName] = React.useState("jack")
  const [text, setText] = React.useState("hello world")
  // 每次setCount时都会在内存中生成一个新的地址去存储name,所以发现应用的地址不同,AppChild会重新渲染
  const data = {
    name: name === "jack" ? "rose" : "rose",
  }
  // 使用useMemo暂存name的值，只有当name变化时才data才会在内存中生成一个新的地址去存储name,在去重新渲染
  const data = React.useMemo(() => {
    return {
      name: name === "jack" ? "rose" : "jack",
    }
  }, [name])

  // 同理
  const handleOnChange = (e: Event) => {
    setText(e.target.value)
  }

  const handleOnChange = React.useCallback((e: Event) => {
    setText(e.target.value)
  })

  return (
    <div>
      <p>{count}</p>
      <p>{name}</p>
      <button onClick={() => setCount(count - 1)}>decrement</button>
      <button onClick={() => setName("jack")}>set new name</button>
      <AppChild text={text} data={data} onChange={handleOnChange} />
    </div>
  )
}

interface IFunctionProps {
  text: string
  data: { name: string }
  onChange: (e: Event) => void
}

// React.memo 浅比较
const AppChild = React.memo(({ data, text, onChange }: IFunctionProps) => {
  return (
    <div>
      <p>{data.name}</p>
      <input value={text} onChange={onChange} />
    </div>
  )
})

useCallback 作用于缓存一个函数,useMemo 作用于缓存计算后的值

7 useRef

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。

useRef 就像是可以在其 .current 属性中保存一个可变值的"盒子"

ref 这是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: ...} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象。

当 ref 对象内容发生变化时，useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

function useRef<T>(initialValue: T): MutableRefObject<T>

useEffect 里面的 state 的值，是固定的, 可以使用 useRef,作为全局变量

const App = () => {
  const [count, setCount] = React.useState(0)
  const countRef = React.useRef(0)
  React.useEffect(() => {
    const timer = setInterval(() => {
      setCount(++countRef.current)
    }, 1000)
    return () => clearInterval(timer)
  }, [])
  return <div>{count}</div>
}

基本用法，用来操作 dom

function TextInputWithFocusButton() {
  const inputEl = useRef(null)
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus()
  }
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  )
}

8 useImperativeHandle

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用

function useImperativeHandle<T, R extends T>(
  ref: Ref<T> | undefined,
  init: () => R,
  deps?: DependencyList
): void

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

渲染 <FancyInput ref={inputRef} /> 的父组件可以调用 inputRef.current.focus()

10.useDebugValue

useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签。

function useDebugValue<T>(value: T, format?: (value: T) => any): void

这个我用的比较少,就暂不赘叙、有兴趣可以查看官网的 demo

11.自定义 Hooks 定时器

const useIntervalTime = (callback, delay) => {
  React.useEffect(() => {
    if (delay !== null) {
      const timer = setInterval(callback, delay)
      return () => clearInterval(timer)
    }
  }, [delay])
}

const App = () => {
  const [count, setCount] = React.useState(0)

  useIntervalTime(() => {
    setCount(count + 1)
  }, 2000)

  return <div>{count}</div>
}

此时你会发现 count 显示始终是 0,但是 setInterval 会一直引用旧的状态，count 值始终为 0
可以改为 setCount(++count),每一次定时到点去获取最新的 count 赋值给 count,再去更新渲染

同样也可以使用 useRef 全局作用域

const useIntervalTime = (callback, delay) => {
  const saveCallback = React.useRef(0)

  React.useEffect(() => {
    saveCallback.current = callback
  })

  React.useEffect(() => {
    if (delay !== null) {
      const timer = setInterval(() => saveCallback.current(), delay)
      return () => clearInterval(timer)
    }
  }, [delay])
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350