React Hook

最新推荐文章于 2024-07-09 14:24:37 发布

mkmin

最新推荐文章于 2024-07-09 14:24:37 发布

阅读量336

点赞数 1

分类专栏： react 文章标签： react hook react-hook

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/104006990

版权

react 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前言

假设读者已经有对react有基本得入门基础，那么现在就可以直接讲讲react-16.8.0开始，主推得react-hook

文档链接：react-hooks文档（记得选择语言为中文版本）

其实看完文档，就可以知到我这个文章是在水经验得，但是还是有很多不喜欢看文档得同志，毕竟我也是一个，所以就写写几个常用得api，然后后面自己再去看文档，有了个理解，就不会那么蒙了，

最基本的版本

import React from 'react';
function TestIndex() {
  return (<div>测试页面</div>);
}
export default TestIndex;

这个是最开始的版本，不要找我解释什么，毕竟都没啥好说的，就是一个模板，非要理解就是把class换成了function，然后熟悉的render没了，直接return就可以显然我们的页面了

接着，开始一个一个来扩展，先看看页面，放心，不会讲什么todolist那种的，就展示一个简单的，我们开发可能会用到的场景就好了

接下来，一个一个来测试吧

常用的API

useState

usestate的作用主要是我们定义变量的时候不需要再设置一个state去存储我们的变量，用法大概是这样

import React, { useState } from 'react';
function TestIndex() {

  const [stage1, setStage1] = useState(0);
  return (<div>stage1的值是:  {stage1}
    <button value='点击添加' onClick={() => setStage1(2)} />
  </div>);
}
export default TestIndex;

大概的解析下：

大概讲解下这几个点

设置一个变量名字为stage1的变量，
当改变stage1的时候，我们需要调用setstage1这个方法，然后传一个值，或则函数，去改变stage1的值，同时页面就会改变
stage1的值的初始化为0
在页面种使用stage1，注意，此时不需要用this/this.state之类的写法了
如何去使用setstage1这个方法（也不需要纠结用箭头函数还是用bind，以及哪个的性能更好了）

大概页面效果是这样的

接下来是第二个了，

useEffect

这个兄弟比较好玩，就是他有三个要注意点的点，我们一个一个来，首先，他的解释是：

啥是副作用，没有太大的区分，就个人理解的，就是‘异步线程’差不多这个概念，直接讲使用吧

最简单的使用莫过于直接使用，不带清除的以及触发条件的，如下面这个版本

import React, { useState, useEffect } from 'react';
function TestIndex() {
  useEffect(() => {
    alert("触发了useeffect函数");
  }, []);
  const [stage1, setStage1] = useState(0);
  return (<div>stage1的值是:  {stage1}
    <button value='点击添加' onClick={() => setStage1(2)} />
  </div>);
}
export default TestIndex;

先不解释，直接展示页面

可以看出页面一开始的时候就弹出了。在页面渲染之前，所以我们可以联想到，文档种的这句话

那么接下来的问题是我们怎么去区分componentwillunmount呢？

这时候就需要用到了return了

比如是这样

import React, { useState, useEffect } from 'react';
function TestIndex() {
  useEffect(() => {
    alert("触发了useeffect函数");
    return ()=>{
      alert("useeffect的return函数");
    }
  }, []);
  const [stage1, setStage1] = useState(0);
  return (<div>stage1的值是:  {stage1}
    <button value='点击添加' onClick={() => setStage1(2)} />
  </div>);
}
export default TestIndex;

效果是这样的：

这儿有个问题不太严谨，就是这人应该用setInvertal（）来坐替换，这样子大家才可以知道到底useeffect有没有触发/被取消才可以的

接下来，讲讲‘控制’useeffecr刷新的问题，毕竟要有个触发的刷新条件，这儿就需要在刚刚的【】中添加我们的刷新条件，比如以stage1为例子

代码大概是这样的

import React, { useState, useEffect } from 'react';
function TestIndex() {
  useEffect(() => {
    alert("触发了useeffect函数");
    return () => {
      alert("useeffect的return函数");
    }
  }, [stage1]);
  const [stage1, setStage1] = useState(0);
  return (<div>stage1的值是:  {stage1}
    <button value='点击添加' onClick={() => setStage1(2)} />
  </div>);
}
export default TestIndex;

效果大概是这样的

可以看到后面变为2的时候，无论点击几次都没反应，是因为触发的条件是stage1改变，当stage1不改变的时候就没事儿了

注意，可以使用多个useeffect

useMemo

第三个个人觉得使用useMemo会比较频繁，而不是useref，先删除掉其他的代码，留下必要的，不然有点乱

代码如下

import React, { useState, useMemo } from 'react';
function TestIndex() {
  const [stage1, setStage1] = useState(0);
  const stage2 = useMemo(() => { return stage1 + 1 }, [stage1])
  return (<div>stage2的值是:  {stage2}
    <br />
    <button value='点击添加' onClick={() => setStage1(2)} >改变stage1的值</button>
  </div>);
}
export default TestIndex;

可以看出stage2的值关联的是stage1，这样，当stage1改变的时候，stage2也就自动的刷新了，是的，就类似vue的commputed一样。而[]中的值，也可以看出关联值