Hook的常用方法

作者: _双眸 | 来源:发表于2021-08-26 18:16 被阅读0次

useState

useState接收一个初始值，返回的是一个解构出来的数组，第一个是当前状态(似state)，第二个是状态的更新函数(似setState)，更新函数与react的setState不同的是，useState的更新函数会将状态替换(replace)而不是合并(merge)。

使用场景：函数组件中需要用到状态值，类似react类组件的state

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量，0是默认值
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example;

默认值：useState()括号后面，可传入值，也可以传函数，该函数只会渲染一遍

const [ count, setCount ] = useState(() => {
  return props.count || 0
})

更新渲染：当我们在使用 useState 更新值时，组件重新渲染。若传入的更新值时为不变时，组件不会重新渲染。

useReducer

使用场景：由于useState的更新函数采用的是替换的方式，当我们要在函数组件中处理复杂状态时，如对象和数组等等，使用useState就不尽人意了。因此，我们使用useReducer来解决这一问题

const [state, dispatch] = useReducer(reducer, initialArg, init);

它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法，initialArg为初始值。

import React, { useReducer } from 'react';
// 修改一个状态对象中的某属性，如果用useState，则要重新赋值一个对象，每个属性名都要写一遍
const initialState = {count: 0, name: '名字', age: 1};

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

function Example() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
export default Example;

init是个函数，并以initialArg为入参，用于操作initialArg，返回自定义的初始值。

import React, { useReducer } from 'react';
function init(initialCount) {
  return {count: initialCount};
}
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}
function Example({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
export default Example;

useEffect

使用场景：useEffect副作用，使函数组件拥有了类似react的声明周期。useEffect会在组件每次render之后调用，useEffect有两个参数，第一个为执行函数，第二个为数组[]

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [dataSources, setDataSources] = useState([]);

  /* 
   * 情况一：useEffect无第二个参数 
   */
  //组件初始化和render后，都会执行该useEffect
  useEffect(() => {
    console.log("相当于生命周期：componentDidMount+componentDidUpdate")
  });

  /* 
   * 情况二：useEffect有第二个参数 
   */
  //第二个参数为空数组时：组件初始化才执行
  useEffect(() => { 
    console.log("相当于生命周期：componentDidMount"); 
  }, []);
  
  //第二个参数为指定状态值时：组件初始化时和dataSources发生变化才执行
  useEffect(() => { 
    console.log("相当于生命周期：componentDidMount")
    console.log("相当于依赖dataSources状态值的生命周期：componentDidUpdate")
  }, [dataSources]);

  //执行函数内return一个函数：初始化时执行函数体，组件卸载unmount时执行return后的函数
  useEffect(() => {
    console.log("相当于生命周期：componentDidMount")
    // 执行函数中直接使用return返回一个函数，这个函数会在组件unmount时执行。
    return () => {
      console.log('相当于声明周期：componentWillUnmount');  
    }
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
export default Example;

官方提示：与 componentDidMount 或 componentDidUpdate 不同，useEffect是异步的，使用
useEffect 调度的 effect
不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。官方建议尽可能使用useEffect，effect 不需要同步地执行

在个别情况下（例如测量布局,页面状态值闪烁bug时），才使用useLayoutEffect代替useEffect, 形成同步，在DOM更新完成后立即执行，但是会在浏览器进行任何绘制之前运行完成,阻塞了浏览器的绘制

React.memo和useCallback和useMemo
React.memo
使用场景：React.memo就类似React.PureComponent，专门用于纯函数组件，起作用是对内部对象进行浅比较，判断是否重新渲染。
import React, { useState, useCallback } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>addCount</button>
      <button onClick={() => setList([...list, 1])}>changeList</button>
      <Child list={list} />
    </div>
  );
}
const Child = (props) => {
  console.log("进入了组件child")
  return (
    <div>这里是child：list为{props.list.join(',')}</div>
  )
}
export default Example;

此时，无论是改变count状态值，还是name状态值，Child组件都会重新渲染，如果我们想让Child组件在其props传入的值，即list改变时才渲染
用React.memo解决，修改Child如下

const Child = React.memo((props) => {
  console.log("进入了组件child")
  return (
    <div>这里是child：{props.list.join(',')}</div>
  )
})

useCallback

使用场景：useCallback用来缓存方法，类似react组件构造函数里面定义的：this.onChange =
this.onChange.bind(this)，返回一个缓存的函数

上面例子还存在一个问题，如果Child组件传入一个函数作为参数，由于函数为引用类型，使得每次传入Child组件都是一个新的函数实例，如下

import React, { useState, useCallback } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([]);

  const handleChange = () => {
    console.log(`selected`);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>addCount</button>
      <button onClick={() => setList([...list, 1])}>changeList</button>
      <Child list={list} handleChange={handleChange} />
    </div>
  );
}
const Child = React.memo((props) => {
  console.log("进入了组件child")
  return (
    <div>这里是child：list为{props.list.join(',')}</div>
  )
})
export default Example;

此时，无论是改变count状态值，还是list状态值，Child组件都会重新渲染
用useCallback解决，修改handleChange方法如下：

// 第二个参数为空数组，也可以指定依赖于某一状态值，即该状态值变化时才重新改变handleChange方法

const handleChange = useCallback(() => {
  console.log(`selected`);
},[])// 或[list]

useMemo

使用场景：useMemo函数用于缓存需计算操作的状态值，类似Vue的计算属性。第一个参数为计算函数，且必须return返回一个结果，返回一个缓存的值，第二个参数是一个数组[]，useMemo执行依赖于次数组的状态值

import React, { useState, useCallback, useMemo } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([]);

  const [a, setA] = useState(0)
  const [b, setB] = useState(0)

  const handleChange = useCallback(() => {
    console.log(`selected`);
  },[])

  //使用useMemo缓存一个计算值，计算函数的执行依赖于状态值a和b，当a和b变化时才执行计算函数
  const memoizedValue = useMemo(() => a + b, [a, b]);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>addCount</button>
      <button onClick={() => setList([...list, 1])}>changeList</button>
      <button onClick={() => { setA(a+1)}}>点我A</button>
      <button onClick={() => { setB(b+1)}}>点我B</button>
      <Child list={list} memoizedValue={memoizedValue} handleChange={handleChange} />
    </div>
  );
}
const Child = React.memo((props) => {
  console.log("进入了组件child")
  return (
    <div>这里是child：list为{props.list.join(',')}, 计算总和：{props.memoizedValue}</div>
  )
})
export default Example;

useRef和React.forwardRef

useRef

useRef可以接受一个默认值，并返回一个含有current属性的可变对象;

使用场景：
1、获取子组件的实例(子组件需为react类继承组件)；

2、获取组件中某个DOM元素；

3、用做组件的全局变量，useRef返回对象中含有一个current属性，该属性可以在整个组件色生命周期内不变，不会因为重复render而重复申明，类似于react类继承组件的属性this.xxx一样。

原因：由于useState保存的变量会触发组件render，而使用useRef定义全局变量不会触发组件render

import React, { useState, useRef } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 获取DOM元素span
  const spanEl = useRef(null);
  const getSpanRef = () => {
    console.log(2, spanEl.current)
  };
  // 获取react类组件实例
  const sunEl = useRef(null);
  const getRefBySun = () => {
    console.log(1, sunEl.current)
  };
  // 全局变量isClick，默认值false赋予isClick.current，相当于react类组件的this.isClick = false
  const isClick = useRef(false);
  const addCount = () => {
    if (!isClick.current) {
      setCount(count + 1)
      isClick.current = true
    }
  };
  return (
    <>
      <button onClick={addCount}>addCount</button>
      <Sun ref={sunEl} count={count} />
      <span ref={spanEl}>我是span</span>
      <button onClick={getSpanRef}>获取DOM元素Span</button>
      <button onClick={getRefBySun}>获取Sun组件</button>
    </>
  );
}
//Sun子组件
class Sun extends React.Component {
  render () {
    const { count } = this.props
    return (
      <div>{ count }</div>
    )
  }
}
export default Example;

React.forwardRef:

使用场景：比较少用，用于在父组件获取子组件的DOM元素作为自己的ref，然后操作子组件的DOM元素

import React, { useRef } from 'react';

function Example() {

  //ref
  const inputEl = useRef(null);
  const onButtonClick = () => {
    console.log(inputEl)
    inputEl.current.focus();
  };
  return (
    <>
      <TextInputWithFocusButton ref={inputEl} onButtonClick={onButtonClick} />
      <span>我是span</span>
    </>
  );
}
// 子组件
const TextInputWithFocusButton = (props) => {
  return (
    <>
      <input ref={props.ref} type="text" />
      <button onClick={props.onButtonClick}>Focus the input</button>
    </>
  );
}
export default Example;

上面代码报错：Warning: TextInputWithFocusButton: ref is not a prop.

需使用React.forwardRef包裹注入一个新的ref，修改TextInputWithFocusButton组件如下：

const TextInputWithFocusButton = React.forwardRef((props, ref) => {
  return (
    <>
      <input ref={ref} type="text" />
      <button onClick={props.onButtonClick}>Focus the input</button>
    </>
  );
})

useContext

使用场景：useContext需要和React.createContext结合起来使用，解决夸组件间的数据传递问题，类似redux。

使用useContext方式

import React, { useRef, useContext } from 'react';
//Context，createContext接收一个参数为默认值
const ThemeContext = React.createContext('white');
const AgeContext = React.createContext();

function Example() {
  return (
    <>
      <ThemeContext.Provider value={'blue'}>
        <div>
          <ChildOfContext />
        </div>
      </ThemeContext.Provider>
      <span>我是span</span>
    </>
  );
}
// 子组件
const ChildOfContext = (props) => {
  console.log("进入了子组件ChildOfContext")
  return (
    <div>
      这里是子组件ChildOfContext
       <GrandChildOfContext />
    </div>
  )
}
// 孙子组件
const GrandChildOfContext = (props) => {
  console.log("进入了孙子组件GrandChildOfContext")
  const color = useContext(ThemeContext);
  return (
    <div>
      这里是子组件GrandChildOfContext
      颜色是：{color} 
    </div>
  )
}
export default Example;

使用传统React API方式，修改孙子组件如下：

const GrandChildOfContext = (props) => {
  console.log("进入了孙子组件GrandChildOfContext")
  // 使用 Consumer 从上下文中获取 value
  return (
    <ThemeContext.Consumer>
      {value => (
        <div>
        这里是子组件GrandChildOfContext
        颜色是：{color} 
      </div>
      )}
    </ThemeContext.Consumer>
    
  )
}

使用contextType方式，只支持React类组件，修改孙子组件如下：

class GrandChildOfContext extends React.Component {
  static contextType = ThemeContext
  render () {
    const color = this.context
    return (
      <div>
        这里是子组件GrandChildOfContext
         颜色是：{color}
      </div>
    )
  }
}

多个context嵌套使用时使用useContext方式

import React, { useRef, useContext } from 'react';
//Context，createContext接收一个参数为默认值
const ThemeContext = React.createContext('white');
const AgeContext = React.createContext();

function Example() {
  return (
    <>
      <ThemeContext.Provider value={'blue'}>
        <div>
          <ChildOfContext />
        </div>
      </ThemeContext.Provider>
      <span>我是span</span>
    </>
  );
}
// 子组件进行嵌套一层Context
const ChildOfContext = (props) => {
  console.log("进入了子组件ChildOfContext")
  return (
    <div>
      这里是子组件ChildOfContext
      <AgeContext.Provider value={21}>
        <div>
          <GrandChildOfContext />
        </div>
      </AgeContext.Provider>
    </div>
  )
}
// 孙子组件
const GrandChildOfContext = (props) => {
  console.log("进入了孙子组件GrandChildOfContext")
  const color = useContext(ThemeContext);
  const age = useContext(AgeContext);
  return (
    <div>
      这里是子组件GrandChildOfContext
      颜色是：{color} 
      嵌套Context
      年龄是：{age} 
    </div>
  )
}
export default Example;

使用传统React API方式，修改孙子组件如下：
// 传统reactAPI方式

const GrandChildOfContext = (props) => {
  console.log("进入了孙子组件GrandChildOfContext")
  return (
    <ThemeContext.Consumer>
      {color => (
        <div>
          这里是子组件GrandChildOfContext
          颜色是：{color} 
          <AgeContext.Consumer>
            {age => (
              <div>
              嵌套Context
              年龄是：{age} 
            </div>
            )}
          </AgeContext.Consumer>
      </div>
      )}
    </ThemeContext.Consumer>
  )
}

contextType方式不支持多个Context嵌套，由此可见，useContext方式最为简单

官方提醒：接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的

context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext
provider 的 context value 值。即使祖先使用 React.memo 或
shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。
因此，<MyContext.Provider>包裹的组件越多，嵌套越多，对子组件的影响越大，导致不必要的重渲染太多，所以Context最好就近用，别跨那么多级组件

Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook。不要在其他
JavaScript 函数中调用。

import React, { useState } from 'react';

let isName = true;
function Example() {
  //报错：React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render 
  // 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
  const [count, setCount] = useState(0);
  if(isName){
    const [name, setName] = useState('名字');
    isName = false;
  }
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Hook的常用方法

useState

useReducer

useEffect

useCallback

useMemo

useRef和React.forwardRef

useRef

React.forwardRef:

useContext

Hook 使用规则

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读