理解React hooks常用方法useState, useEffect, useMemo, useCallback, useContext

  • Post author:
  • Post category:其他




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>
  );
}



版权声明:本文为u010633266原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。