文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

聊聊React Hook的那些事儿

2024-12-02 03:33

关注

它将函数组件的功能升级了,原来只能在类组件中使用的state,context等都可以在函数组件中使用了。

react hook一般是以use开头,比如useState,useEffect,通过使用这种方式,我们就能够在函数组件中使用react的库的功能。

react hook 的优点

相比于类组件,函数组件更好理解,类组件中的this关键词,事件绑定都很让人头疼,而使用了react hook之后,这些问题就都可以避免了。

相比于类组件,你会发现函数组件的代码要少得非常多,代码看起来很简洁,使用起来也非常的方便,虽然官方没有说要移除类组件,但是官方更倾向使用函数组件,如果你是新入门react的话,强烈建议你使用react hook。

使用react hook 的几个准测

虽然react hook很方便,但是也要遵循几个原则来书写。

只有在组件的最顶层才可以使用react hook,也就意味着,你不能在循环,条件,嵌套函数中使用它。方便点记的话就是在return之前使用它。

只在react functions 中使用hook,不要在普通的js函数中使用它,当然你可以在自定义的hooks中使用hook。

React 常用内置hook

(1) useState

顾名思义,通过使用useState,我们可以在函数组件中创建,更新,操作state.

useState使用方法很简单,通过返回一个state变量和一个更新state变量的函数。

import { useState } from "react";

function Counter() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
Current Cart Count: {count}
<div>
<button onClick={() => setCount(count - 1)}>Add to cart</button>
<button onClick={() => setCount(count + 1)}>Remove from cart</button>
</div>
</div>
);
}

(2) useEffect

在react的生命周期中,我们有componentDidMount,componentDidUpdate,componentWillUnmount等方法,而useEffect就是整合了这些方法。

useEffect主要用在Api数据请求,更改状态变量等地方。

useEffect有两个参数,一个是要运行的函数,一个是包含组件的props,context,state等变量的数组。如果没有后面依赖的数组,就表示每次渲染都要执行第一个参数的函数。

import { useState, useEffect } from "react";
function Counter() {
// Declare state variables
const [count, setCount] = useState(0);
const [product, setProduct] = useState("Eggs");
useEffect(() => {
console.log(`${product} will rule the world!`);
}, [product]);
return (
<div>
Current {product}'s count: {count}
<div>
<button onClick={() => setCount(count + 1)}>Add to cart</button>
<button onClick={() => setCount(count - 1)}>Remove from cart</button>
Change Product:{" "}
<input type="text" onChange={(e) => setProduct(e.target.value)} />
</div>
</div>
);
}

(3) useContext

它提供了一个方法可以让数据被整个应用程序的所有组件访问到,相当于声明了一个全局变量,无论它被嵌套使用,还是如何使用,其它组件总是能够访问使用它。

它只有一个参数,就是React.createContext函数的返回值。

import React from "react";
// some mock context values
const users = [
{
name: "Harry Potter",
occupation: "Wizard",
},
{
name: "Kent Clark",
occupation: "Super hero",
},
];

export const UserContext = React.createContext(users);
import React, { useContext } from "react";
import { UserContext } from "./App";

export function UserProfile() {
const users = useContext(UserContext);
return (
<div>
{users.map((user) => (
<li>
I am {user.name} and I am a {user.occupation}!
</li>
))}
</div>
);
}

(4) useReducer

这是一个和useState很类似的hook,唯一的不同就是它允许操作逻辑更复杂的状态更新。

它接收两个参数,一个是更新函数,一个是初始状态。它的返回值有两个,一个是被处理的状态state,一个是分派的函数。

简单理解就是useReducer通过提供的更新函数对state进行相应的更新处理。

import { useReducer } from "react";
import ReactDOM from "react-dom";

const initialTodos = [
{
id: 1,
title: "Todo 1",
complete: false,
},
{
id: 2,
title: "Todo 2",
complete: false,
},
];

const reducer = (state, action) => {
switch (action.type) {
case "COMPLETE":
return state.map((todo) => {
if (todo.id === action.id) {
return { ...todo, complete: !todo.complete };
} else {
return todo;
}
});
default:
return state;
}
};

function Todos() {
const [todos, dispatch] = useReducer(reducer, initialTodos);

const handleComplete = (todo) => {
dispatch({ type: "COMPLETE", id: todo.id });
};

return (
<>
{todos.map((todo) => (
<div key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.complete}
onChange={() => handleComplete(todo)}
/>
{todo.title}
</label>
</div>
))}
</>
);
}

ReactDOM.render(<Todos />, document.getElementById('root'));

自定义Hooks

通过组合使用react内置的hook,我们可以生成我们自己的hook。

//useFetch.js
import { useState, useEffect } from "react";

export function useFetch(url) {
//values
const [data, setData] = useState(null);
const [error, setError] = useState("");
useEffect(() => {
fetch(url)
.then(res => {
if (!res.ok) {
throw Error("something wrong, çould not connect to resource");
}
setData(res.json());
})
.then(() => {
setError("");
})
.catch( error => {
console.warn(`sorry an error occurred, due to ${error.message} `);
setData(null);
setError(error.message);
});
}, [url]);
return [data, error];
}

总结

通过使用hook,我们可以解决复杂组件之间的状态问题,可以让组件变得更加轻量化,更加好理解。

通过使用Hook,我们可以在无需修改组件结构的情况下复用状态逻辑。

因为组件是有状态的,因此才有了hook的诞生。

来源:今日头条内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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