react hook（基础详解）

首先我们知道Hook是可以100%向下兼容的，就是说即便在你以前的代码中加入hook写法也没有问题，同时提供了一个更直接的API包括props， state，context，refs以及生命周期，hook编写时使用的代码量也会更少，但这也是一个过渡，hook的使用去掉了class的概念，虽然以前的写法依旧可行，但新增hook的同时官方也表示没有计划移除class，这对程序员来说是很友好的，但react更推荐用户使用hook来编写代码

首先我们看一下state在传统和hook中的使用方式区别

首先演示第一个hook：

State Hook

下面用两种写法表现同样的计数器
传统：

import React from 'react'
export default class extends React.Component {constructor(props) {super(props);this.state = {count: 0,}}//添加数字并刷新add(){let {count} = this.statethis.setState({count:count+1})}render() {return <div onClick={()=>this.add()}>{this.state.count}</div>}
}

Hook：（方括号中的时候第一个参数就是自定义的state元素，可以通过第二个自定义方法来刷新这个state）

import React,{useState} from 'react'
const Main = (props) =>{//方括号中第一个参数就是自定义的state元素，可以通过第二个自定义方法来刷新这个stateconst [count,setCount] =useState(0)function add() {setCount(count+1)//刷新count值}return (<div onClick={()=>add()}>{count}</div>)
}
export default Main

在这里我们使用hook中自定义的setCount()替换了传统的setState({})

我们可以看到使用了Hook之后Main变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状态（setCount）这两个写法可以显示一个同样的计数器效果,但是可以明显感觉出来hook写出来的更简洁，更明晰。

组件函数的写法有两种：

function Main(props) {return <div />;
}

或者箭头函数

const Main= (props) => {return <div />;
}

当然，如果我们想要使用多个state 变量，它允许我们给不同的 state 变量取不同的名称：

// 声明多个 state 变量const [age, setAge] = useState(42);const [fruit, setFruit] = useState('banana');

Effect Hook

在使用前我们还是要先引入useEffect

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

这个hook可以让你在函数组件中执行副作用操作简单来说如果你以前了解react的生命周期，那么你就可以把useEffect Hook 看做componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

接下来我们在前面使用hook写的计数器的基础上把useEffect放进去

import React,{useState,useEffect} from 'react'
function Main(props){//方括号中第一个参数就是自定义的state元素，可以通过第二个自定义方法来刷新这个stateconst [count,setCount] =useState(0)useEffect(() => {console.log(count)});//添加function add() {setCount(count+1)//刷新count值}return (<div onClick={()=>add()}>{count}</div>)
}
export default Main

这样就可以大家不难发现useEffect 会在每次渲染后都执行

使用effect时有一些副作用是需要清除的，例如订阅外部数据源

这种情况就可以这样清除

useEffect(() => {//使用需要结束后清除的方法/*...*/return function cleanup() {//在这里清除/*...*/};
});

Hook规则：

1.只在最顶层使用 Hook
2.只在 React 函数中调用 Hook

react hook（基础详解）相关推荐

React Router路由详解
React Router路由详解一.基础 1.安装使用 2.React Router 中通用的组件路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
React 路由react-router-dom详解
React 路由react-router-dom详解 ( 路由嵌套 + 路由传参 + 路由权限 + 路由优化按需导入 + 404页面 ) 前面我们先了解一下路由是什么? 路由分类有哪些?内置API ...
视频教程-React Hooks 案例详解（React 进阶必备）-其他
React Hooks 案例详解(React 进阶必备) Leo 1978年8月生,河北石家庄人. 曾任职中软股份. 计算科学导师: 刘坤起博士. 开发的<电商分销系统>获得淘宝Top10 ...
c 语言中 %是什么运算符,C 语言基础----详解C中的运算符
C语言中又有哪些运算符呢? 如下所示: ※ 算术运算符 ※ 赋值运算符 ※ 关系运算符 ※ 逻辑运算符 ※ 三目运算符 C语言基本算术运算符如下表: 除法运算中注意: 如果相除的两个数都是整数的话,则 ...
Python学习二：词典基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...
【云原生之k8s】k8s基础详解
[云原生之k8s]k8s基础详解前言一.kubernetes介绍 (1)kubernetes简介 (2)应用部署方式的演变二.kubernetes组件 (1)kubernetes架构 (2)ma ...
微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
线程状态,优先级，守护线程基础详解
线程状态,优先级,守护线程基础详解线程状态停止线程线程休眠线程礼让线程强制执行线程状态检测线程的优先级守护线程线程同步线程状态创建状态(new 之后就是创建状态就绪状态(调用s ...
03 html基础详解
02html基础详解文章目录 02html基础详解 1.HTML编辑器 2.标签 html常用标签 3.元素 4.属性常用属性 5.标题水平线注释 6.段落折行 7.格式化标签属性dir ...
视频教程-FPS游戏逆向与安全+UE4引擎基础详解-其他
FPS游戏逆向与安全+UE4引擎基础详解想把自己的知识传播出去,让更多人学习到苏瑞兵 ¥188.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取 ...

react hook（基础详解）

State Hook

Effect Hook

react hook（基础详解）相关推荐

最新文章

热门文章