React hooks使用方法全面汇总

目录
  • 1. 前言
  • 2. useState
  • 3. useEffect
  • 4. useLayoutEffect
  • 5. useMemo
  • 6. useCallback
  • 7. useRef
  • 8. useReducer
  • 9. useContext
  • 10. memo

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React Hooks获取数据实现方法介绍

    目录 前言 useState useEffect 获取数据 前言 react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强. useState useState类似于class组件的state功能,用于更新视图 import React, { Component, useState } from 'react'; export default function Hello() { const [count, setCount] = useState(0);

  • React hooks useState异步问题及解决

    目录 React Hooks useState异步问题 原因 解决方法 React中useState异步更新小坑 问题点 React Hooks useState异步问题 最近在开发中遇到一个问题 我接口请求回来的数据 用useState存储起来. 但是我后面 去改变这个数据的时候每次拿到都是上次的数据没办法及时更新. 原因 useState 返回的更新状态方法是异步的,要在下次重绘才能获取新值.不要试图在更改状态之后立马获取状态. 解决方法 应该使用useRef 存储这个数据,在useEffe

  • React Hooks钩子中API的使用示例分析

    目录 hooks是什么 Hooks的作用 使用Hooks组件前后开发模式的对比 Hooks使用策略 为什么要有Hooks useState useEffect使用 useEffect依赖项 使用情景 useMemo使用 useMemo缓存组件方式 useMemo和useEffect的区别 useCallback使用 useContext使用 useRef使用 为什么在函数组件中无法使用ref 如何在类组件中使用ref属性 自定义hooks hooks是什么 hooks理解字面意思就是钩子,是一些

  • 在 React 项目中全量使用 Hooks的方法

    目录 前言 React Hooks useState useReducer 基础用法 进阶用法 useContext useEffect useLayoutEffect useRef useImperativeHandle useCallback useMemo React Redux Hooks useSelector useDispatch React Router Hooks useHistory useLocation useParams useRouteMatch 参考 结语 前言 此

  • React组件学习之Hooks使用

    目录 一.前言 二.React Hooks 2.1 useState 2.2 useEffect 2.3 useMemo 2.4 useCallback 2.5 useContext 2.6 useRef 三.总结 一.前言 react组件分为类(class)组件和函数(function)组件. class 组件是通过继承模版类(Component.PureComponent)的方式开发新组件的,继承是 class 本身的特性,它支持设置 state,会在 state 改变后重新渲染,可以重写一

  • react hooks实现原理解析

    目录 react hooks 实现 Hooks 解决了什么问题 Hooks API 类型 首先接触到的是 State hooks 其次接触到的是 Effect hooks 最后接触到的是 custom hooks Hooks 实现方式 问题一:useState dispatch 函数如何与其使用的 Function Component 进行绑定 react hooks 实现 Hooks 解决了什么问题 在 React 的设计哲学中,简单的来说可以用下面这条公式来表示: UI = f(data)

  • React-hooks面试考察知识点汇总小结(推荐)

    目录 什么是hooks?解决了什么问题? Hook 简介 Hook API useState 指定初始 state 惰性初始化 自定义 Hook 什么是hooks?解决了什么问题? Hooks 是react16.8新增特性,它可以使用一些state的新特性,简化逻辑复用,副作用统一数据. Hooks就是把某个目标结果钩到某个可能会变化的数据源或者事件源上,那么当被钩到的数据或者事件发生变化时,产生这个目标结果的代码会重新执行,产生更新后的结果. Hook 简介 Hook出世之前React存在的问

  • React hooks使用方法全面汇总

    目录 1. 前言 2. useState 3. useEffect 4. useLayoutEffect 5. useMemo 6. useCallback 7. useRef 8. useReducer 9. useContext 10. memo 1. 前言 react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强. 2. useState useState类似于class组件的state功能,用于更新视图 import React, { Compon

  • 详解React hooks组件通信方法

    目录 一.前言 二.父子组件通信 1)父组件传值给子组件 2)子组件传值给父组件 3)跨组件传值(父传孙子组件) 一.前言 组件通信是React中的一个重要的知识点,下面列举一下 react hooks中常用的父子.跨组件通信的方法 二.父子组件通信 1)父组件传值给子组件 子组件代码: //子组件 const Child = ({ param1, param2 }) => { return <>父组件传递的参数:{param1},{param2}</> } param1.p

  • 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

  • React Hooks的深入理解与使用

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

  • React Hooks 实现和由来以及解决的问题详解

    与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比如 state,那如果有 Hooks 之后呢? 函数组件性能比类组件好,但是在现代浏览器中,闭包和类的原始性能只有在极端场景下才会有明显的差别. 性能主要取决于代码的作用,而不是选择函数式还是类组件.尽管优化策略有差别,但性能差异可以忽略不计. 参考官网:(https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-b

  • 详解如何使用React Hooks请求数据并渲染

    前言 在日常的开发中,从服务器端异步获取数据并渲染是相当高频的操作.在以往使用React Class组件的时候,这种操作我们已经很熟悉了,即在Class组件的componentDidMount中通过ajax来获取数据并setState,触发组件更新. 随着Hook的到来,我们可以在一些场景中使用Hook的写法来替代Class的写法.但是Hook中没有setState.componentDidMount等函数,又如何做到从服务器端异步获取数据并渲染呢?本文将会介绍如何使用React的新特性Hook

  • React Hooks常用场景的使用(小结)

    前言 React 在 v16.8 的版本中推出了 React Hooks 新特性.在我看来,使用 React Hooks 相比于从前的类组件有以下几点好处: 代码可读性更强,原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中,容易使开发者不利于维护和迭代,通过 React Hooks 可以将功能代码聚合,方便阅读维护: 组件树层级变浅,在原本的代码中,我们经常使用 HOC/render props 等方式来复用组件的状态,增强功能等,无疑增加了组件树层数及渲染,而在 React Hooks

  • react hooks入门详细教程

    State Hooks 案例: import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); //count:声明的变量:setCount:改变count值的函数:0:count的初始值 return ( <div> <p>You clicked {count} times</p> <button onClick={() => set

随机推荐