React入门之ReactHooks基本使用，源码解析

const [books, setBooks] = useState([

{ title: ‘我们仨’, id: 1 },

{ title: ‘我的阿勒泰’, id: 2 },

{ title: ‘蒋勋说《红楼梦》’, id: 3 }

])

然后我们就可以使用books来获取数据，使用setBooks来更新数据

// 使用setBooks更新数据，即增加书目

// params:title 书名

const addBook = (title)=>{

setBooks([…books,{title, id:uuidv4()}])

}

return (

{/* 展示数据：书目 */}

{books.map(book => {

return (

• {book.title}

• )

  })}

  {/* 将更新书目的方法传递给子组件，让子组件执行 */}

  )

  由子组件辅助完成更新数据的操作：

  import React, { useState } from ‘react’ // 引入必要的库

  // 添加新书目

  // 接收addBook方法

  const AddBook = ({addBook}) => {

  // 初始化title为空，即用户还未输入想要增加的书目

  const [ title, setTitle ] = useState(‘’);

  // 提交时，调用addBook方法，把新增的title返回

  const handleSubmit = (e)=>{

  e.preventDefault();

  addBook(title);

  setTitle(“”);

  }

  return (

  // 用户输入书名并提交

  <input type=“text” placeholder=‘书名’

  onChange={(e) => setTitle(e.target.value)} value={title} />

  )

  }

  效果：

  蓝色背景就是我们初始化时写入的数据；

  从文本框输入的文字，通过提交，更新到state，并展示出来

  

  ---

  useEffect的使用

  ---

  之前我们谈到React的生命周期，里面有三个比较常用的钩子函数，分别是：

  • componentDidMount()：会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方

  • componentDidUpdate()：会在更新后会被立即调用。首次渲染不会执行此方法。

  • componentWillUnmount()：会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

  

  但函数组件没有生命周期，如果想要在页面渲染或更新时执行某些操作，可以使用Hooks的useEffect来完成

  下面是一个小例子：

  当页面加载或重新渲染(数据更新）时，打印出提示语

  引入：

  import React, { useState, useEffect } from ‘react’

  使用：

  // 当页面加载或重新渲染时，打印提示语

  useEffect(()=>{

  console.log(“useEffect正在执行中。。。”)

  })

  效果：

  当页面刷新时，打印一次；

  当添加了书目时，又打印了一次：

  

  不论是哪个数据更新，都会触发useEffect的执行。如果希望useEffect只追踪某几个变量的变化，可以在useEffect的第二个参数中，传入一个数组；当数组中的变量发生改变时，useEffect就会执行

  先来看看多个state时，其中一个state更新，useEffect的反应（同一个组件中可以多次使用useState）

  // 另起一个用来存储年龄的state（允许多次使用useState）

  const [age, setAge] = useState(22);

  // 更新age

  const handleClick = ()=>{

  setAge(age+1);

  }

  // 当页面加载或重新渲染时，打印提示语

  useEffect(()=>{

  console.log(“useEffect正在执行中。。。”,age)

  })

  创建一个button按钮，点击一下，就修改age：

  点击一下年龄+1

  效果：

  此处我修改了useEffect的输出函数，多加了年龄的打印，这样看得更清楚些。可以看到，无论是修改age还是添加书目，都会触发useEffect

  

  然后，我们使用useEffect的第二个参数，限定useEffect的使用范围

  // 添加第二个参数，当book更新时，才触发打印

  useEffect(()=>{

  console.log(“useEffect正在执行中。。。”,age)

  },[ books ])

  效果：一开始页面加载，useEffect会先执行一次；然后我点击增加age，点击两次，都是没有打印输出的（但age有在修改，点击两次，age值为24）；最后我添加了书目，才有了打印。可见，限制useEffect的使用范围已生效

  

  我们还可以在useEffect中将输入的书目进行本地存储

  本地存储：localStorage

  从文本框输入的书名，网页刷新后就不见了。如果我们存储起来，刷新的时候也能展示新输入的书目

  • 每次数据更新时都存到localStorage：

  // 本地存储 BookList.js

  useEffect(()=>{

  // console.log(“useEffect正在执行中。。。”)

  localStorage.setItem(“books”, JSON.stringify(books));

  },[ books ])

  • 刷新页面时从localStorage中取出之前的数据，如果第一次加载，就展示初始化的书目即可（也就是《我们仨》《我的阿勒泰》《蒋勋说<红楼梦>》三本书）：

  // 刷新页面时从localStorage中取出之前的数据

  const [books, dispatch] = useReducer(BookReducer, initBooks, ()=>{

  const result = localStorage.getItem(‘books’);

  return result ? JSON.parse(result) : initBooks

  })

  效果：

  1. 一开始加载页面，展示初始化的三本书；

  2. 然后我加了一本书名，页面展示4本书名；

  3. 最后我点击左上角的刷新，4本书名还在

  

  useContext的使用

  ---

  接着是useContext。

  Context-API获取props数据，有两种方法：

  • 一种是通过contextType，只能获取离该组件最近的context，且函数组件不能使用；

  • 另一种是consumer，需要包裹住想要渲染的标签，可以获取多个context。

  上一篇文章中，我们嵌套使用多个context时，代码是这样的：

  

  代码稍微长了一点

  如果用useContext，就会简洁很多

  import React, { Component,useContext } from ‘react’

  import { ThemeContext } from ‘…/contexts/ThemeContext’;

  import { GreetingContext } from ‘…/contexts/GreetingContext’;

  const Navbar = ()=>{

  const greetingContext = useContext(GreetingContext); // GreetingContext使用

  const themeContext = useContext(ThemeContext); // ThemeContext使用

  const { isAGirl, toggleGreeting } = greetingContext;

  const { isLightTheme, light, dark } = themeContext;

  const theme = isLightTheme ? light : dark;

  return (

  Context App

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  常用的JavaScript设计模式

  • 单体模式

  • 工厂模式

  • 例模式

    

  函数

  • 函数的定义

  • 局部变量和全局变量

  • 返回值

  • 匿名函数

  • 自运行函数

  • 闭包

    CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    

  0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70)

  函数

  • 函数的定义

  • 局部变量和全局变量

  • 返回值

  • 匿名函数

  • 自运行函数

  • 闭包

    CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】