文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

React中10种Hook的使用方法

2023-06-25 15:13

关注

本篇文章给大家分享的是有关React中10种Hook的使用方法,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

React Hook是什么?

React官网是这么介绍的: Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想,你不必现在就去学习或使用 Hook。

100% 向后兼容的 Hook 不包含任何破坏性改动。

现在可用 Hook 已发布于 v16.8.0。

没有计划从 React 中移除 class 你可以在本页底部的章节读到更多关于 Hook 的渐进策略。

Hook 不会影响你对 React 概念的理解 恰恰相反,Hook 为已知的 React 概念提供了更直接的 API:props, state,context,refs 以及生命周期。稍后我们将看到,Hook 还提供了一种更强大的方式来组合他们。

如果对react还不够了解建议先看下react官方文档,写写demo再来看文章,因为有的react基础的东西我就一笔带过不细说。
react 官方文档 https://zh-hans.reactjs.org/docs/hooks-state.html

React目前提供的Hook

hook用途
useState设置和改变state,代替原来的state和setState
useEffect代替原来的生命周期,componentDidMount,componentDidUpdate 和 componentWillUnmount 的合并版
useLayoutEffect与 useEffect 作用相同,但它会同步调用 effect
useMemo控制组件更新条件,可根据状态变化控制方法执行,优化传值
useCallbackuseMemo优化传值,usecallback优化传的方法,是否更新
useRef跟以前的ref,一样,只是更简洁了
useContext上下文爷孙及更深组件传值
useReducer代替原来redux里的reducer,配合useContext一起使用
useDebugValue在 React 开发者工具中显示自定义 hook 的标签,调试使用。
useImperativeHandle可以让你在使用 ref 时自定义暴露给父组件的实例值。

1.useState

import React from 'react';import './App.css';//通常的class写法,改变状态class App extends React.Component {  constructor(props){    super(props)    this.state = {      hook:'react hook 是真的好用啊'    }  }  changehook = () => {    this.setState({      hook:'我改变了react hook 的值'    })  }  render () {    const { hook } = this.state    return(         <header className="App-header">          {hook}          <button onClick={this.changehook}>            改变hook          </button>        </header>      )  }}export  {App}//函数式写法,改变状态function App() {//创建了一个叫hook的变量,sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊' const [hook, sethook] = useState("react hook 是真的好用啊");  return (     <header className="App-header">      {hook}{}      <button onClick={() => sethook("我改变了react hook 的值")}>        改变hook      </button>    </header>  );}export  {App}//箭头函数的函数写法,改变状态export const App = props => {  const [hook, sethook] = useState("react hook 是真的好用啊");  return (    <header className="App-header">      {hook}      <button onClick={() => sethook("我改变了react hook 的值")}>        改变hook      </button>    </header>  );};

使用方法备注在上面的demo中
看完上面useState的对比使用,一个小的demo结构更清晰,代码更简洁,更像写js代码,运用到项目中,那岂不是美滋滋。

2.useEffect & useLayoutEffect

useEffect代替原来的生命周期,componentDidMount,componentDidUpdate 和 componentWillUnmount 的合并版
useEffect( ()=>{ return ()=>{ } } , [ ])

import React, { useState, useEffect, useLayoutEffect } from 'react';//箭头函数的写法,改变状态const UseEffect = (props) => { //创建了一个叫hook的变量,sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊' const [ hook, sethook ] = useState('react hook 是真的好用啊'); const [ name ] = useState('baby张'); return (  <header className="UseEffect-header">   <h4>UseEffect</h4>   <Child hook={hook} name={name} />   {}   <button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button>  </header> );};const Child = (props) => { const [ newhook, setnewhook ] = useState(props.hook); //这样写可以代替以前的componentDidMount,第二个参数为空数组,表示该useEffect只执行一次 useEffect(() => {  console.log('first componentDidMount'); }, []); //第二个参数,数组里是hook,当hook变化时,useEffect会触发,当hook变化时,先销毁再执行第一个函数。 useEffect(  () => {   setnewhook(props.hook + '222222222');   console.log('useEffect');   return () => {    console.log('componentWillUnmount ');   };  },  [ props.hook ] ); //useLayoutEffect 强制useeffect的执行为同步,并且先执行useLayoutEffect内部的函数 useLayoutEffect(  () => {   console.log('useLayoutEffect');   return () => {    console.log('useLayoutEffect componentWillUnmount');   };  },  [ props.hook ] ); return (  <div>   <p>{props.name}</p>   {newhook}  </div> );};export default UseEffect;

3.useMemo & useCallback

他们都可以用来优化子组件的渲染问题,或者监听子组件状态变化来处理事件,这一点在以前是很难做到的,因为shouldComponentUpdate 里能监听到是否变化,但没法控制其他的外部方法,只能返回true和false,而componentDidUpdate只能在更新后执行,所以想在渲染之前做些事情就不好搞了。
useCallback目前还不能用

import React, { useState, useMemo } from 'react';const Child = ({ age, name, children }) => {    //在不用useMemo做处理的时候,只要父组件状态改变了,子组件都会渲染一次,用了useMemo可以监听某个状态name,当name变化时候执行useMemo里第一个函数    console.log(age, name, children, '11111111'); function namechange() {  console.log(age, name, children, '22222222');  return name + 'change';    }     {}    //useMemo有两个参数,和useEffect一样,第一个参数是函数,第二个参数是个数组,用来监听某个状态不变化 const changedname = useMemo(() => namechange(), [ name ]); return (  <div style={{ border: '1px solid' }}>   <p>children:{children}</p>   <p>name:{name}</p>   <p>changed:{changedname}</p>   <p>age:{age}</p>  </div> );};const UseMemo = () => {    //useState 设置名字和年龄,并用2两个按钮改变他们,传给Child组件 const [ name, setname ] = useState('baby张');  const [ age, setage ] = useState(18); return (  <div>   <button    onClick={() => {     setname('baby张' + new Date().getTime());     }}   >    改名字   </button>   <button    onClick={() => {     setage('年龄' + new Date().getTime());    }}   >    改年龄   </button>   <p>    UseMemo {name}:{age}   </p>   <Child age={age} name={name}>    {name}的children   </Child>  </div> );};export default UseMemo;

4.useRef

ref跟之前差不多,useRef创建–绑定–使用,三步走,详细看代码以及备注

import React, { useState, useRef } from 'react';const UseRef = () => { //这里useState绑定个input,关联一个状态name const [ name, setname ] = useState('baby张'); const refvalue = useRef(null);// 先创建一个空的useRef function addRef() {  refvalue.current.value = name;   //点击按钮时候给这个ref赋值  // refvalue.current = name  //这样写时,即使ref没有绑定在dom上,值依然会存在创建的ref上,并且可以使用它  console.log(refvalue.current.value); } return (  <div>            <input                defaultValue={name}    onChange={(e) => {     setname(e.target.value);                }}   />   <button onClick={addRef}>给下面插入名字</button>   <p>给我个UseRef名字:</p>   <input ref={refvalue} />  </div> );};export default UseRef;

5.useContext

之前使用过context的小伙伴一看就懂,useContext的话跟之前的context基本用法差不多,代码内有详细注释说明,创建,传值,使用

import React, { useState, useContext, createContext } from 'react';const ContextName = createContext();//这里为了方便写博客,爷爷孙子组件都写在一个文件里,正常需要在爷爷组件和孙子组件挨个引入创建的Contextconst UseContext = () => { //这里useState创建一个状态,并按钮控制变化 const [ name, setname ] = useState('baby张'); return (  <div>   <h4>UseContext 爷爷</h4>   <button    onClick={() => {     setname('baby张' + new Date().getTime());    }}   >    改变名字   </button>   {}}   <ContextName.Provider value={{ name: name, age: 18 }}>    {}    <Child />   </ContextName.Provider>  </div> );};const Child = () => { //创建一个儿子组件,里面引入孙子组件 return (  <div style={{ border: '1px solid' }}>   Child 儿子   <ChildChild />  </div> );};const ChildChild = () => { //创建孙子组件,接受爷爷组件的状态,用useContext,获取到爷爷组件创建的ContextName的value值 let childname = useContext(ContextName); return (  <div style={{ border: '1px solid' }}>   ChildChild 孙子   <p>    {childname.name}:{childname.age}   </p>  </div> );};export default UseContext;

6.useReducer

这里的usereducer会返回state和dispatch,通过context传递到子组件,然后直接调用state或者触发reducer,我们常用useReducer 与useContext createContext一起用,模拟reudx的传值和重新赋值操作。

import React, { useState, useReducer, useContext, createContext } from 'react';//初始化stroe的类型、初始化值、创建reducerconst ADD_COUNTER = 'ADD_COUNTER';const initReducer = { count: 0};//正常的reducer编写function reducer(state, action) { switch (action.type) {  case ADD_COUNTER:   return { ...state, count: state.count + 1 };  default:   return state; }}const CountContext = createContext();//上面这一段,初始化state和reducer创建context,可以单独写一个文件,这里为了方便理解,放一个文件里写了const UseReducer = () => { const [ name, setname ] = useState('baby张'); //父组件里使用useReducer,第一个参数是reducer函数,第二个参数是state,返回的是state和dispash const [ state, dispatch ] = useReducer(reducer, initReducer); return (  <div>   UseReducer   {}   <CountContext.Provider value={{ state, dispatch, name, setname }}>    <Child />   </CountContext.Provider>  </div> );};const Child = () => { //跟正常的接受context一样,接受父组件的值,通过事件等方式触发reducer,实现redux效果 const { state, dispatch, name, setname } = useContext(CountContext); function handleclick(count) {  dispatch({ type: ADD_COUNTER, count: 17 });  setname(count % 2 == 0 ? 'babybrother' : 'baby张'); } return (  <div>   <p>    {name}今年{state.count}岁   </p>   <button onClick={() => handleclick(state.count)}>长大了</button>  </div> );};export default UseReducer;

附上github地址 10个hook demo 点一点star,

以上就是React中10种Hook的使用方法,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯