以前文章中咱們有講到的 useState hook 和 useEffect hook 的一些概念和基本用法，趁着週末空閒時間，咱們一塊兒來看看 React 爲咱們提供的其餘 hooks 的一些基本使用吧。javascript
useReducerjava
useReducer hook 接收兩個參數，第一個是參數是一個函數（這是一個 reducer函數：它接收兩個參數 state 和 action，它會根據 action 類型返回一個新的state），第二個參數是一個初始狀態（intialState）。語法以下：react
web
緩存
微信
const [newState, dispatch] = useReducer((state, action) => { //根據派發出去的 action 類型，返回一個 newState}, intialState)
看一個例子：ide
函數
性能
flex
const Counter = () => { //count對應 reducer 返回的nweState //dipatch 負責派發一個 action(動做) //action是一個具備 type 屬性的一個javascript對象 const [count, dispatch] = useReducer((state, action) => { switch (action.type) { case 'add': return state + 1; case 'sub': return state - 1; default: return state; } }, 0) return ( <div> <div>CountSum: {count}</div> <button onClick={() => dispatch({ type: 'add' })}>Add</button> <button onClick={() => dispatch({ type: 'sub' })}>Substract</button> </div> )}export default Counter;
useReducer hook 的流程能夠總結爲：
事件發生 -->調度方法（dispatch）派發一個動做（action） --> reducer 根據派發的動做類型（action.type）返回一個新的狀態（newState）
useRef hook
Refs 用於訪問在 render 呈現的 DOM 或 React 元素。在之前的 React 版本中使用refs的標準方法是這樣的：
//16.3提供class RefHook extends React.Component { constructor(props) { super(props); //建立ref this.myRef = React.createRef(); } render() { return <div ref={this.myRef}></div> }}export default RefHook;
如今可使用 useRef hook：
//16.8提供function RefHook() { const myRef = useRef(); function handleChange() { console.log(myRef); } return <div onChange={handleChange} ref={myRef}></div>}export default RefHook;
useContext hook
Context API 解決了 React 最大的問題之一就是 props 多層組件傳遞。在之前的版本中：
const ThemeContext = React.createContext();function ContextComponent() { return ( <ThemeContext.Provider value="dark"> <ThemeButton /> </ThemeContext.Provider> )}function ThemeButton() { return ( <ThemeContext.Consumer> {(theme) => <div> This is theme: {theme} </div>} </ThemeContext.Consumer> )}export default ContextComponent;
useContext hook 提供了使用上下文的不少優化的方式。
import React, { useContext } from 'react';const ThemeContext = React.createContext();function ContextComponent() { return ( <ThemeContext.Provider value="dark"> <Theme /> </ThemeContext.Provider> )}function Theme() { const theme = useContext(ThemeContext); return ( <div> This is theme: {theme} </div> )}export default ContextComponent;
useMemo hook
React有一個名爲 useMemo 的鉤子，它讓咱們記憶複雜而昂貴的函數，這樣咱們就能夠避免每次重複的渲染。
它是採用了 Memoization 思想 它是 JavaScript 中的一種技術，經過緩存結果並在下一個操做中從新使用緩存來加速查找費時的操做。
比方說，咱們必須編寫一個函數來查找給定數字的平方。
const calc = num => { return num * num;}calc(4); // 16calc(5); // 25calc(35); // 1225calc(35); // 1225calc(5); // 25calc(35); // 36
咱們計算了兩次 35 的平方，這還好由於它不是什麼密集的操做，若是是很是耗時的操做，就會變得很昂。採用 Memoization 能夠這麼作：
const cache = {};const calc = num => { let result = cache[num]; if(!result) { result = num * num; cache[num] = result; } return result;}calc(4);calc(5);calc(35); //1225calc(35); //1225console.log(cache); // {4: 16, 5: 25, 35: 1225}
從上邊的例子中咱們能夠看到，當咱們再計算 35 的平方時，不須要從新計算，而直接從緩存中選擇值便可，提升了程序的性能。
在 React 中，有些時候咱們不想每次都從新渲染組件，基於 Memoization 思想 useMemo hook 就是負責記憶相應的組件，只有在數據發生變化時組件纔會從新渲染。
function Parent({ a, b }) { // 當 a b 有一個發生變化時 才從新渲染 const child1 = useMemo(() => <Child1 a={a} b={b}/>, [a, b]); // 當 b 發生變化時 才從新渲染 const child2 = useMemo(() => <Child2 b={b} />, [a, b]); return ( <> { child1 } { child2 } </> )}
若是公衆號裏的文章對您有所幫助，麻煩你們點擊關注並幫助分享下，在這裏謝謝你們啦。
本文分享自微信公衆號 - 像素搖擺（pxDance）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。