React Hooks , 这次一定会!

时间:2020-7-9 作者:admin

Hooks解决了什么问题

类组件

复用问题

  1. 虽然有状态,但是若要复用逻辑状态麻烦
  2. 即使用高阶组件逃脱不出添加最外部的父组件来控制

生命周期及其内存

  1. 每次组件render时都带有其状态、函数、变量
  2. 若有些组件中含有像定时器等则需要在组件挂载时添加,组件卸载时清除,相同逻辑的函数要分散在生命周期中,难以进行控制

State控制问题

  1. 对状态的操作频繁且分散

this的绑定问题

  1. 父组件给子组件传递函数时,必须绑定 this
//方法一:
constructor(props) {
    this.handleClickBind = this.handleClick.bind(this);
}
    //使用时:在props不变时button不刷新
<button onClick={this.handleClickBind}></button>

//方法二:由于bind返回一个新函数,所以无论props是否变化始终刷新
<button onClick={this.handleClick.bind(this)}></button>

//方法三:用箭头函数穿透,与方法二类似每次都刷新
<button onClick={()=>this.handleClick()}></button>

函数组件

没有State

没有生命周期

?Hooks的优势

  • 抽离状态层方便复用逻辑
  • 相关联函数连接更加紧密
  • effect的分离
    1. 某些生命周期与渲染冲突影响用户体验
    2. 分离使其不影响渲染
  • 完全使用函数组件解决所有问题

?Hooks开冲

  • useState
  • useEffect
  • useContext
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue

useState

?第一步:让函数组件拥有state

const [state,setState]=useState({...initialState})
  • 返回的state为最新状态,setState为更新函数
  • setState的更新为直接替换而非合并
  • 修改状态值,试图也会同时更新

useEffect

?第二步:让函数组件拥有生命周期

useEffect(() => {
    fn()
    return unfn()
},[controlparams])

使用时请注意:

  • useEffect 就是监听每当依赖变化时,执行回调函数的存在函数组件中的钩子函数。
  • effect在render后按照前后顺序执行。
  • effect在没有任何依赖的情况下,render后每次都按照顺序执行。
  • 可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
  • fn()组件挂载时执行,unfn用于卸载时的清除操作
  • 防止频繁操作时 每次render都是独立的,里面有独立的state、effects、function积累消耗性能
  • 可能有时候内部的内容并没有发生变化,这时就会产生冗余的render,这时候就需要引入依赖,当这些参数发生变化的时候才去执行我里面的函数。
  • controlparams是 Effect 的依赖项,发生变化,useEffect()就会执行。
  • 如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。
  • 将[inputRef]作为useEffect的第二个参数传递,它实际上只在初始挂载时运行一次。

useContext

?第三步:让函数组件跨组件共享状态

const context = useContext(Context);
// Context 为 context 对象(React.createContext 的返回值) 
// useContext 返回Context的返回值。
// 当前的 context 值由上层组件中距离当前组件最近的<Context.Provider> 的 value prop 决定。

useReducer

?第四步:让函数组件缓存优化(应用更多场景 更深层)

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

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case ‘decrement’:
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
  • useState 的替代方案,它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法

useCallback

?第四步:让函数组件缓存优化(diff)

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

useMemo

?第四步:让函数组件缓存优化(diff)

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

useCallback:接收一个内联回调函数参数和一个依赖项数组(子组件依赖父组件的状态,即子组件会使用到父组件的值) ,useCallback 会返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新
useMemo:把创建函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

useRef

?第五步:让函数组件能拿到一个可变,但是在组件的生命周期中指向的是同一个的ref对象

const refContainer = useRef(initialValue);

useImperativeHandle

useLayoutEffect

useDebugValue

(不太确定有无问题,持续更新…)

本文使用 mdnice排版

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。