React Hook

前言

假设读者已经有对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;

大概的解析下:

大概讲解下这几个点

  1. 设置一个变量名字为stage1的变量,
  2. 当改变stage1的时候,我们需要调用setstage1这个方法,然后传一个值,或则函数,去改变stage1的值,同时页面就会改变
  3. stage1的值的初始化为0
  4. 在页面种使用stage1,注意,此时不需要用this/this.state之类的写法了
  5. 如何去使用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一样。而[]中的值,也可以看出关联值

最后再讲讲怎么去获取props这个比较重要的话题,

代码大概是这样

页面是这样的

因为使用了react-router。所以跟各位可能不太一样

其他的就是一些个人感觉不怎么重要的了,如

useref

useeffectLayout

useContent

毕竟这儿只是举例子,不多说,

最最主要的是看文档,毕竟这个只是给你坐下预备功课,知道文档大概讲啥东西

https://zh-hans.reactjs.org/docs/hooks-reference.html

https://zh-hans.reactjs.org/docs/hooks-reference.html

https://zh-hans.reactjs.org/docs/hooks-reference.html

https://zh-hans.reactjs.org/docs/hooks-reference.html

参考文档

https://zh-hans.reactjs.org/docs/hooks-reference.html

发布了256 篇原创文章 · 获赞 170 · 访问量 72万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览