React Hooks 全解:零基础入门

这篇具有很好参考价值的文章主要介绍了React Hooks 全解:零基础入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Hooks 的由来

你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? ——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? ——拥有了Hooks,生命周期钩子函数可以先丢一边了。

你在还在为组件中的this指向而晕头转向吗? ——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。

什么是 Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components

上面是官方解释。从中可以看出 Hooks 是函数,有多个种类,每个 Hook 都为Function Component提供使用 React 状态和生命周期特性的通道。Hooks 不能在Class Component中使用。

React 提供了一些预定义好的 Hooks 供我们使用,下面我们来详细了解一下。

 常用hooks

React Hooks 全解:零基础入门,react.js,javascript,前端

useState(重点掌握)

1.参数:
  • 常量:组件初始化的时候就会定义
import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量,初始值为0,后续通过setCount改变它能让视图重新渲染
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
  • 函数:只有开始渲染的时候函数才会执行
// initialState 参数只会在组件的初始渲染中起作用,后续渲染时会被忽略。
// 如果初始 state 需要通过复杂计算获得,则可以传入一个函数,在函数中计算并返回初始的 state,
// 此函数只在初始渲染时被调用:
const [count, setCount] = useState(() => {
  const initialCount = someExpensiveComputation(props);
  return initialState;
})

复制

2.返回值

useState返回值时一个长度为2的数组,数组第一项为为定义的变量(名称自己定),第二项时改变第一项的函数(名称自己定),具体示例可看上述代码。

useEffect(重点掌握)

该 Hook 有两个参数,第一个参数是一个包含命令式、且可能有副作用代码的函数,第二个参数是一个数组,此参数来控制该Effect包裹的函数执不执行,如果第二个参数不传递,则该Effect每次组件刷新都会执行,相当于class组件中的componentDidMount和componentDidupdate生命周期的融合

1.基本使用方法
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

复制

2.控制函数的执行

和上述代码类似,我们给useEffect传递第二个参数[count],这样只有count改变的时候才会执行

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 只有count改变时才会执行
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  },[count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

复制

import React, { useEffect } from 'react';

function Example() {
  // 组件挂载时只执行一次
  useEffect(() => {
    console.log("只执行一次,类似componentDidMount")
  },[]);

  return (
    <div>只执行一次的Effect</div>
  );
}

复制

3.需要清除的副作用

有一些副作用是需要清除的。例如订阅外部数据源。这种情况下,清除工作是非常重要的,可以防止引起内存泄露!

useCallback(重点掌握)

把内联回调函数及依赖项数组作为参数传入 useCallback,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新

  • 常见应用场景:父组件向子组件传递会回调函数(但是react官方不推荐这种方式,官方推荐使用useReducer hook,通过传递dispatch来避免这种形式,具体原因参考官方解释)
  • 示例:
import React, { useEffect, useState, useCallback } from 'react';
// 子组件
function Son({callback}) {
    renturn (
        <a onClick={()=>callback("小红")}>点击切换姓名</a>
    )
}
// 父组件
function Parent() {
  const [name,setName] = useState("")
  useEffect(() => {
    console.log("获取数据并更新state")
    setName("小明")
  },[]);
  const callback = useCallback(name => {
    setName(name);
  }, []);
  return (
    <>
      <Son callback={callback} />;
      name:{name}
    <>
  )
}

复制

useMemo(重点掌握)

useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

把“创建”函数和依赖项数组作为参数传入 useMemo,它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

如果没有提供依赖项数组,useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证!

应用场景:

  • 存储一次昂贵的计算
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

复制

  • 跳过一次子节点的昂贵的重新渲染
function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

复制

 

React Hooks 全解:零基础入门 - 掘金

React Hooks教程之基础篇-腾讯云开发者社区-腾讯云文章来源地址https://www.toymoban.com/news/detail-674441.html

到了这里,关于React Hooks 全解:零基础入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 章节 1:入门React.js -《React.js手把手教程:从初学者到实战高手》- 第一部分:React.js基础

    《React.js手把手教程:从初学者到实战高手》 第一部分:React.js基础 在我们开始探索 React.js 的奇妙世界之前,让我们先来认识一下这个“ 人人都在谈论 ”的家伙。你可以把 React.js 想象成是一个全栈工程师的一大碗甜品,不仅好吃,还可以让你的应用更美味!那么,究竟什么

    2024年02月11日
    浏览(52)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(四)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: API介绍合集:

    2024年02月11日
    浏览(34)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 前面的API:aho

    2024年02月12日
    浏览(30)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(一)

    ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。 使用npm或yarn安装ahooks: 1. useRequest useR

    2024年02月12日
    浏览(32)
  • 前端基本功 用 React Hooks + Antd 实现一个 Todo-List

    To-do list(待办事项列表)是用来记录和管理要完成的任务、活动或项目的列表。它是一种简单而常见的工具,用于帮助人们组织和安排日常生活中的任务。每当您有一项任务需要完成或者要记住某些事情时,您可以将它添加到待办事项列表中。 学习前端的一些新知识时,经

    2024年02月17日
    浏览(35)
  • 〖大前端 - 基础入门三大核心之JS篇㉓〗- JavaScript 的「数组」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月04日
    浏览(67)
  • 〖大前端 - 基础入门三大核心之JS篇㉟〗- JavaScript 的DOM简介

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(53)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(58)
  • 【React】React Hooks解析

    React 16.8 + 为什么需要Hook? Hook是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期) 我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面的优势: class组件可以 定义自己的state ,用来 保存组件自己内

    2024年02月11日
    浏览(55)
  • 〖大前端 - 基础入门三大核心之JS篇㉔〗- JavaScript 的数组的常用方法 (一)

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包