useRef 和 useContext 等其他 Hooks

其他 Hooks

• useRef
• useContext
• useReducer
• useMemo
• useCallback

useRef 使用

例子

import React, {useEffect, useRef} from "react";

function UseRefDemo() {
  const btnRef = useRef(null) // 初始值
  const numRef = useRef(100);
  console.log(numRef.current) // 100

  useEffect(() => {
    console.log(btnRef.current) // DOM 节点 <button>click</button>
  }, [])

  return <div>
    <button ref={btnRef}>click</button>
  </div>
}

export default UseRefDemo

useContext 使用

例子

import React, {useContext} from "react";

const themes = {
  light: {
    foreground: '#000',
    background: '#eee'
  },
  dark: {
    foreground: '#fff',
    background: '#222'
  }
}
// 创建 Context
const ThemeContext = React.createContext(themes.light)

// 孙子组件
function ThemeButton() {
  const theme = useContext(ThemeContext);
  return <button style={{background: theme.background, color: theme.foreground}}>
    hello world
  </button>
}

// 子组件
function Toolbar() {
  return <div>
    <ThemeButton></ThemeButton>
  </div>
}

// 父组件
function UseContextDemo() {
  return <ThemeContext.Provider value={themes.dark}>
    <Toolbar></Toolbar>
  </ThemeContext.Provider>
}

export default UseContextDemo

useReducer 的使用

useReducer 能代替 redux 吗

• useReducer 是 useState 的替代方案，用于 state 复杂变化
• useReducer 是单个组件状态管理，组件通讯还需要 props
• redux 是全局的状态管理，多组件共享数据

例子

import React, {useReducer} from "react";

const initialState = {count: 0}
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment' :
      return {count: state.count + 1}
    case 'decrement':
      return {count: state.count - 1}
    default:
      return state
  }
}

function UseReducerDemo() {
  // 很像 const [count,setCount] = useState(0)
  const [state, dispatch] = useReducer(reducer, initialState)

  return <div>
    count: {state.count}
    <button onClick={() => dispatch({type: 'increment'})}>increment</button>
    <button onClick={() => dispatch({type: 'decrement'})}>decrement</button>
  </div>
}

export default UseReducerDemo

useMemo 使用

使用 useMemo 做性能优化

• React 默认会更新所有子组件
• class 组件使用 SCU 和 PureComponect 做优化
• Hooks 中使用 useMemo，但优化的原理是相同的

例子

import React, {memo, useMemo, useState} from "react";

// 子组件
// function Child({userInfo}) {
//   console.log('child render ...', userInfo)
//
//   return <div>
//     <p>this is child {userInfo.name} {userInfo.age}</p>
//   </div>
// }

// 类似 class PureComponent，对 props 进行浅层比较
const Child = memo(({userInfo}) => {
  console.log('child render ...', userInfo)

  return <div>
    <p>this is child {userInfo.name} {userInfo.age}</p>
  </div>
})

// 父组件
function UseMemoDemo() {
  console.log('parent render ...')

  const [count, setCount] = useState(0)
  const [name, setName] = useState('lzw')

  // const userInfo = {name, age: 20}
  // 用 useMemo 缓存数据，有依赖
  const userInfo = useMemo(() => {
    return {name, age: 21}
  }, [name])

  return <div>
    <p>
      count is {count}
      <button onClick={() => setCount(count + 1)}>click</button>
    </p>
    <Child userInfo={userInfo}></Child>
  </div>
}

export default UseMemoDemo

useCallback 使用

使用 useCallback 做性能优化

• useMemo 缓存数据
• useCallback 缓存函数
• 两者是 React Hooks 的常见优化策略

例子

import React, {memo, useMemo, useState, useCallback} from "react";

// 子组件， memo 类似 class PureComponent，对 props 进行浅层比较
const Child = memo(({userInfo, onChange}) => {
  console.log('child render ...', userInfo)

  return <div>
    <p>this is child {userInfo.name} {userInfo.age}</p>
    <input onChange={onChange}/>
  </div>
})

// 父组件
function UseCallbackDemo() {
  console.log('parent render ...')

  const [count, setCount] = useState(0)
  const [name, setName] = useState('lzw')

  // 用 useMemo 缓存数据，有依赖
  const userInfo = useMemo(() => {
    return {name, age: 21}
  }, [name])

  // function onChange(e) {
  //   console.log(e.target.value)
  // }
  // 用 useCallback 缓存函数
  const onChange = useCallback(e => {
    console.log(e.target.value)
  }, []);


  return <div>
    <p>
      count is {count}
      <button onClick={() => setCount(count + 1)}>click</button>
    </p>
    <Child userInfo={userInfo} onChange={onChange}></Child>
  </div>
}

export default UseCallbackDemo