React hooks使用方法全面汇总

更新时间：2022年10月14日 08:54:58 作者：爱思考的猪

这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下

1. 前言

react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。

2. useState

useState类似于class组件的state功能,用于更新视图

import React, { Component, useState } from 'react';
export default function Hello() {
  const [count, setCount] = useState(0); //设置默认值为0
  return <div>
    {count}
    <button onClick={()=>setCount(count + 1)}>增加</button>
  </div>
}
//useState还可以使用函数进行赋值
 const [count, setCount] = useState(()=>0); //设置默认值为0

3. useEffect

useEffect接受两个参数,第一个参数是要执行的回调函数,第二个参数是依赖的参数,如下面的例子里只有当count发生变化的时候才会打印count,当第二个参数为空数组的时候,组件在渲染完成后会执行一次,第二个参数不传递的时候每次渲染都会执行

export default function Hello() {
  const [count, setCount] = useState(() => 0); //设置默认值为0
  // useEffect
  useEffect(() => {
  }, [count])
  return <div>
    {count}
    <button onClick={() => setCount(count + 1)}>增加</button>
  </div>
}

带有返回值的useEffect用于清除执行过程中的副作用

  useEffect(()=>{
    const timer = setInterval(() => {
      console.log(count);
    }, 1000);
    window.addEventListener('resize',handleResize);
    return function(){
      clearInterval(timer);
      window.removeEventListener('resize',handleResize);
    }
  }, [count])

如果每次执行useEffect都定义一个定时器,那定时器会越来越多,通过在返回函数中清除定时器取消这个副作用。useEffect返回函数的执行时机是下一次useEffect执行之前。

利用这一点可以实现防抖和节流函数

4. useLayoutEffect

dom渲染之前的useEffect: useLayoutEffect =》 dom渲染 =》useLayout

export default function Hello (props){
  const [count, setCount]  = useState(0);
  useEffect(()=>{
    console.log('useEffect');
  },[count]);
  useLayoutEffect(()=>{
    console.log('useLayoutEffect');
  },[count])
  return <div>
    {count}
    <button onClick={()=> setCount(count+1)}>增加</button>;
  </div>
}

使用useEffect和useLayoutEffect去更新视图状态会产生不同的效果,useEffect会有一个状态到另一个状态的过程(闪动效果),useLayoutEffect直接渲染最终状态

5. useMemo

useMemo的作用就是缓存,减少代码的执行次数。

下面的代码点击按钮count状态发生变化,整个Hello函数体内的代码都会执行,每次点击按钮都会打印str的值

export default function Hello (props){
  const [count, setCount]  = useState(0);
  const [str, setStr] = useState('hello hooks!');
  useEffect(()=>{
    console.log('useEffect');
  },[count]);
  console.log('str'); //每次渲染都会执行
  return <div>
    {count}
    {str}
    <button onClick={()=> setCount(count+1)}>增加</button>
  </div>
}

使用useMemeo进行缓存,当str发生变化的时候再执行打印语句

useMemo(()=>{
  console.log(str);
},[str])

useMemo还可以用来缓存函数

export default function Hello (props){
  const [count, setCount]  = useState(0);
  const [str, setStr] = useState('hello hooks!');
  useEffect(()=>{
    console.log('useEffect');
  },[count]);
  // 使用useMemo缓存函数
  const hanldeClick = useMemo(()=>{
    return function(){
      console.log(count);
    };
  },[count]);
  return <div>
    {count}
    {str}
    <button onClick={()=> setCount(count+1)}>增加</button>
    <button onClick={hanldeClick}>测试</button>
  </div>
}

6. useCallback

useCallback的功能是缓存函数,取的是useMemo的运行结果

  const handleClick = useMemo(()=>{
    return function(){
      console.log(count);
    };
  },[count]);
  const handleClick = useCallback(()=>{
    console.log(count);
  },[count])

上面两个实现的功能是一样的,在平时的开发中要尽量使用useMemo去缓存函数

7. useRef

获取元素dom ref.current
缓存数据

使用useRef获取元素

export default function Hello(props) {
  const ref = useRef(null);
  useEffect(() => {
    console.log(ref.current); // <input id='input'>
  })
  return <div>
    <input ref={ref} id="input" />
  </div>
}

使用useRef保存数据,当ref.current发生变化的时候视图不会重新渲染

export default function Hello(props) {
  const ref = useRef(null);
  useEffect(() => {
    ref.current = 'hello hooks!';
  });
  return <div>
    <span> {ref.current}</span>
  </div>
}

8. useReducer

useReducer用于更新复杂的state提升渲染性能,使用方法与redux类似。与redux的区别是redux管理的是全局的数据做数据共享,useReducer是useState的替代方案,只管理单个组件的状态。

onst reducer = (state, action) => {
  switch (action.name) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
};
const initState = { count: 0 };
export default function Hello() {
  const [state, dispatch] = useReducer(reducer, initState)
  return <div>
    <span> {state.count}</span>
    <button onClick={() => dispatch({ name: 'increment' })}>增加</button>
    <button onClick={() => dispatch({ name: 'decrement' })}>减少</button>
  </div>
}

9. useContext

useContext用来解决props层层传递,嵌套很深的问题。

export default function Father() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return <div>
    {count}
    <button onClick={() => handleClick()}>增加</button>
    <MyContext.Provider value={{ count }}>
      <Children />
    </MyContext.Provider>
  </div>
};
function Children() {
  const context = useContext(MyContext);
  return <div>
    父组件的count: {context.count}
  </div>
};

10. memo

在calss组件中通过对比props,子组件接收的props发生变化的时候才进行更新渲染,在函数组件中没有识别props的能力,当父组件重新渲染的时候子组件也会重新渲染,在使用memo包裹后只有props发生变化的时候才会重新渲染。memo的功能类似于calss组件对pureComponent对props进行了浅比较。

export default function Father() {
 const [count, setCount] = useState(0);
 const [str, setStr] = useState('hello hooks!');
 return <div>
   {count}
   {str}
   <button onClick={() => setCount(count + 1)}>增加count</button>
   <button onClick={() => setStr(str + 1)}>修改str</button>
   <Children count={count} />
 </div>
};
const Children = React.memo(function Children(props) {
 console.log('子组件渲染');
 return <div>
   子组件: {props.count}
 </div>
}
);

上面的例子中,count变化的时候子组件渲染更新,str变化的时候子组件不重新渲染。

到此这篇关于React hooks使用方法全面汇总的文章就介绍到这了,更多相关React hooks内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React
hooks

React中如何使用scss
这篇文章主要介绍了React中如何使用scss问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React函数组件与类的区别有哪些
函数式组件的基本意义就是,组件实际上是一个函数,不是类,下面这篇文章主要给大家介绍了关于React中函数组件与类的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-10-10
React中Ref 的使用方法详解
这篇文章主要介绍了React中Ref 的使用方法,结合实例形式总结分析了react中ref基本功能、用法及操作注意事项,需要的朋友可以参考下
2020-04-04
React函数式组件Hook中的useEffect函数的详细解析
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
2022-10-10
React useMemo与useCallabck有什么区别
useCallback和useMemo是一样的东西，只是入参有所不同，useCallback缓存的是回调函数，如果依赖项没有更新，就会使用缓存的回调函数；useMemo缓存的是回调函数的return，如果依赖项没有更新，就会使用缓存的return
2022-12-12
React 之 Suspense提出的背景及使用详解
这篇文章主要为大家介绍了React 之 Suspense提出的背景及使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
从头写React-like框架的工程搭建实现
这篇文章主要介绍了从头写React-like框架的工程搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
详解使用React进行组件库开发
本篇文章主要介绍了详解使用React进行组件库开发，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
详解React项目的服务端渲染改造(koa2+webpack3.11)
本篇文章主要介绍了详解React项目的服务端渲染改造(koa2+webpack3.11)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
解决webpack -p压缩打包react报语法错误的方法
这篇文章主要给大家介绍了关于解决webpack -p压缩打包react报语法错误的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07