React Hooks初体验

前言

昨天开始学习react，时隔这么久终于学习上了目前应该市场使用率最多的前端框架，之前一直使用vue，当初就告诉自己先熟练使用好一个，先别急着都学，到现在感觉用基本用了不少时间的vue，是时候接触react了，并没有谁高谁低，只有需要，你这个项目需要它你就得学习它，正好公司最近要维护的项目使用了react，所以得此契机学习。

学习

学习当然从文档开始，所以我通读了一遍文档，基本有了vue打下的基础，看起来还算轻松，主要就是表达方式是用jsx，书写形式方面的习惯，react没有自己的后缀，就是用js文件来创建组建，而且各种方法都是直接创建函数或者使用class,感觉书写更接近原生，所以感觉react结合typescript更合适一些，因为vue中我尝试一次使用ts，引入库 修饰器之类的，感觉很麻烦，而且在用vue的时候用class比较少，可以通过这个来多多练习（当然有了hooks，所有的都用函数来写就ok)

实践

看了文档之后，总得上手实践一下，于是找了个简单的项目结合广受好评的react hooks来写了个备忘录，项目中用到的hooks：

• useState
• useEffect
• useContext
• createContext

其中根据文档，useState 和useEffect是比较常用的两个，下面结合项目来梳理一下使用方式。

首先看一下最终的页面（以逻辑为主，没有设置样式）

首先有两个部分，输入框部分和下面的展示部分

useContext

在这里首先介绍一下useContext

官方文档

** 用途 ** Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

简而言之就是将Context的子组件中需要的变量都在Conext中提供，并由它来向子类提供

** 使用** useContext接受一个Context对象为参数，所以我们先用createContext这个钩子函数来创建一个Context对象，并暴露出去，这样自组建都可以通过这个Context对象来访问共享的那些变量。

import React, { createContext } from "react";
export const TaskListContext = createContext()

然后那些共享的变量都通过<MyContext.Provider> 的 value 属性决定,通过往value属性中添加变量和方法来暴露出去。

import React, { createContext } from "react";
export const TaskListContext = createContext()

const TaskListContextProvider = () => {
	return <TaskListContext.Provider value={}>
       
    </TaskListContext.Provider>
}

** 自组件中引入 **

引入之前暴露出来的Context对象，通过useContext获取，然后通过解构来获取那些共享变量

import {TaskListContext} from '../TaskListContext'
const  {你要获取的内容} = useContext(TaskListContext)

useState

** 用途 ** 之前我们要将数据共享，都得通过class的render函数配合this.state来使用，因为在class中我们要注意this的指向是否正确，稍有不慎就可能踩坑，所以我们通过这个hook来取代class的写法，十分便捷。

** 使用**
我们通过数组结构来赋值，比如

const [title,setTitle] = useState('this is a title')

首先useState返回两个值，第一个是对应的变量的值（就是我们在调用函数的时候传入的那个值，这里是“this is a title”），第二个是对应的更新函数，所以基本约定第一个是变量的名称，第二个是set+变量名称，这就是自定义hook

比如在输入框中实现一下，我们实现一下类似vue中v-model的方法，原理也很简单：
首先将输入框的value这个属性设置为一个变量，然后监听内容框输入事件来实时更新这个变量为输入的值

const [value,setValue] = useState('')
function hanldeInput(e){
	setValue(e.target.value)
}
return(
<input value={value} onChange={handleInput} />
)

ps：react真是一个函数式编程的语言，vue的话结合dom创建了一系列语法糖，各有各的好处吧，在这种情况下react直接根据背后的原理来编程，vue直接使用语法糖，可能一开始不需要理解，可能上手比较快，但终归还是要理解原理的。

useEffect

这个hook是用来执行副作用操作的，什么是副作用操作呢，首先了解一下react文档中提到的一个叫** 纯函数 ** 的概念：函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。

而副作用就是，一个函数它的行为不只依赖于参数，也不只是根据参数给出返回值。数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。

** 用处 ** 使用这个hook后可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在** 执行 DOM 更新之后 ** 调用它。

** useEffect 会在每次渲染后都执行吗？** 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

所以在我这个项目中，有一个编辑功能就通过useEffect来修改。

下一步计划

使用react hook + ts完成一个项目

总结

用了很长时间的vue，偶尔换换口味也是蛮爽的，同时vue3.0的compositionAPI之前也看过文档，现在结合react之后可能会有新的理解～，所以…感谢我们拥有这些优秀的框架～

任重道远～