react-hooks

已于 2022-03-19 16:34:50 修改
阅读量800 收藏 2
点赞数 2
分类专栏： react 文章标签： react.js javascript 前端
于 2022-03-10 08:58:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shao_xuan_/article/details/123387287
版权

三分钟看完react-hooks

背景

介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。
但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点：

纯函数组件没有状态
纯函数组件没有生命周期
纯函数组件没有this

这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，代码会显得很重，并且每创建一个类组件，都要去继承一个React实例；至于Redux,更不用多说，很久之前Redux的作者就说过，“能用React解决的问题就不用Redux”。

useState

useState():状态钩子。纯函数组件没有状态，useState()用于为函数组件引入状态。

点击加一效果，分别用类组件和函数组件实现。可以看出用hooks写出的代码更加精简。
const [count,setCount] = useState(0);//数组解构,相当于下面三句话
let _useState = useState(0);
let count = _useState[0];
let setState = _useState[1]

类组件

import React,{Component} from "react";
class App1 extends Component{
    constructor(props) {
        super(props);
        this.state={
            count:0
        }
    }
    addCount(){
        this.setState({count:this.state.count+1})
    }
    render() {
        return(
            <div>
                <p>you clicked {this.state.count} times</p>
                <button onClick={this.addCount.bind(this)}>Click me</button>
            </div>
        )
    }

}
export default App1;

函数组件

使用sueState重写上面计数组件。

import React,{useState} from "react";
function App2(){
    const [count,setCount] = useState(0);//数组解构
    return(
        <div>
            <p>You cliked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>
        </div>
    )
}
export default App2;

在这里插入图片描述

多状态声明

使用多条语句声明不同的状态

import React,{useState} from "react";
function App3(){
    const [name,setName] = useState('刘备');//数组解构
    const [age,setAge] = useState(25);
    const [sex,setSex] = useState('男')
    return(
        <div>
            <p>姓名:{name}</p>
            <p>年龄:{age}</p>
            <p>性别:{sex}</p>
        </div>
    )
}
export default App3;

在这里插入图片描述

useEffect

useEffect()：副作用钩子。可以用来更好的处理副作用，如异步请求等，Hooks的useEffect()也是为函数组件提供了处理副作用的钩子。在类组件中我们会把请求放在componentDidMount里面，在函数组件中我们可以使用useEffect()。

useEffect相当于componentDidMount和componentDidUpdate。
缺点：由于它是异步的因此不能实时处理。

类组件中componentDidMount和componentDidUpdate

import React,{Component} from "react";
class App4 extends Component{
    constructor(props) {
        super(props);
        this.state={
            count:0
        }
    }
    componentDidMount() {
        console.log(`componentDidMount=>you clicked ${this.state.count}`)
    }
    componentDidUpdate() {
        console.log(`componentDidUpdate=>you clicked ${this.state.count}`)
    }

    addCount(){
        this.setState({count:this.state.count+1})
    }
    render() {
        return(
            <div>
                <p>you clicked {this.state.count} times</p>
                <button onClick={this.addCount.bind(this)}>Click me</button>
            </div>
        )
    }

}
export default App4;

在这里插入图片描述

useEffect模拟类组件中componentDidMount和componentDidUpdate

import React,{useState,useEffect} from "react";
function App5(){
    const [count,setCount] = useState(0);//数组解构
    useEffect(()=>{
        console.log(`useEffect=>you clicked ${count} times`)
    })
    return(
        <div>
            <p>You cliked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>
        </div>
    )
}
export default App5;

在这里插入图片描述

useEffect实现componmentWillUnment

先写两个路由跳转页面，并配置路由

import React,{useState,useEffect} from "react";
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
function Index(){
    return <h2>Index页面</h2>
}

function List(){
    return <h2>List页面</h2>
}

function App5(){
    const [count,setCount] = useState(0);//数组解构
    return(
        <div>
            <div>
                <p>You cliked {count} times</p>
                <button onClick={()=>{setCount(count+1)}}>Click me</button>
            </div>
            <Router>
                    <div>
                        <ul>
                            <li><Link to="/">首页</Link></li>
                            <li><Link to="/list/">list</Link></li>
                        </ul>
                        <Routes>
                            <Route path="/" exact element={<Index/>}/>
                            <Route path="/list/" element={<List/>}/>
                        </Routes>

                </div>
            </Router>
        </div>
    )
}
export default App5;

在这里插入图片描述

使用useEffect表示进入页面的状态。
解绑时使用return,这时发现我们点击按钮时也会发生改变，这是因为只要组件发生改变，它就会触发解绑。解决方法使用第二个参数。

import React,{useState,useEffect} from "react";
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
function Index(){
    useEffect(()=>{
        console.log(`useEffect=>Index页面`)
        return ()=>{
            console.log('跳转页面')
        }
    })
    return <h2>Index页面</h2>
}

function List(){
    useEffect(()=>{
        console.log(`useEffect=>List页面`)
    })
    return <h2>List页面</h2>
}

function App5(){
    const [count,setCount] = useState(0);//数组解构
    return(
        <div>
            <div>
                <p>You cliked {count} times</p>
                <button onClick={()=>{setCount(count+1)}}>Click me</button>
            </div>
            <Router>

                    <div>
                        <ul>
                            <li><Link to="/">首页</Link></li>
                            <li><Link to="/list/">list</Link></li>
                        </ul>
                        <Routes>
                            <Route path="/" exact element={<Index/>}/>
                            <Route path="/list/" element={<List/>}/>
                        </Routes>

                </div>
            </Router>
        </div>
    )
}
export default App5;

在这里插入图片描述

解绑限制，第二个参数是一个数组，如果数组为空表示页面被销毁触发，如果有变量，表示只有这个变量状态变化才会触发。

import React,{useState,useEffect} from "react";
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom'
function Index(){
    useEffect(()=>{
        console.log(`useEffect=>Index页面`)
        return ()=>{
            console.log('跳转页面')
        }
    },[])
    return <h2>Index页面</h2>
}

function List(){
    useEffect(()=>{
        console.log(`useEffect=>List页面`)
    })
    return <h2>List页面</h2>
}

function App5(){
    const [count,setCount] = useState(0);//数组解构
    return(
        <div>
            <div>
                <p>You cliked {count} times</p>
                <button onClick={()=>{setCount(count+1)}}>Click me</button>
            </div>
            <Router>

                    <div>
                        <ul>
                            <li><Link to="/">首页</Link></li>
                            <li><Link to="/list/">list</Link></li>
                        </ul>
                        <Routes>
                            <Route path="/" exact element={<Index/>}/>
                            <Route path="/list/" element={<List/>}/>
                        </Routes>

                </div>
            </Router>
        </div>
    )
}
export default App5;

在这里插入图片描述

父子组件传值useContext

useContext()：共享状态钩子。作用就是可以做状态的分发，在React16.X以后支持，避免了react逐层通过Props传递数据。

使用步骤
1、先使用createContext创建上下文
2、然后使用Provider将值给提供出去
3、接收时用useContext接收就可以了

import React,{useState,createContext,useContext} from "react";
const CountContext = createContext();
function Counter(){
    let count = useContext(CountContext);
    return (<h2>{count}</h2>)
}
function App6(){
    const [count,setCount] = useState(0);//数组解构
    return(
        <div>
            <p>You cliked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>
            <CountContext.Provider value={count}>
                <Counter/>
            </CountContext.Provider>
        </div>
    )
}
export default App6;

在这里插入图片描述

useReducer

useReducer()：Action钩子。在使用React的过程中，如遇到状态管理，一般会用到Redux,而React本身是不提供状态管理的。而useReducer()提供了状态管理。首先，关于redux我们都知道，其原理是通过用户在页面中发起action,从而通过reducer方法来改变state,从而实现页面和状态的通信。而Reducer的形式是(state, action) => newstate。

import React,{useReducer} from "react";
function Reduser(){
    const [count,dispath] = useReducer((state,action)=>{
        switch (action){
            case "add":
                return state+1
            case "sub":
                return state-1
            default:
                return state
        }
    },0)
    return(
        <div>
            <h2>现在的分数是{count}</h2>
            <button onClick={()=>{dispath('add')}}>add</button>
            <button onClick={()=>{dispath('sub')}}>sub</button>
        </div>
    )

}
export default Reduser

在这里插入图片描述

努力做一只合格的前端攻城狮
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
react hooks使用_使用Hooks动态加载React组件
08-15 2880
react hooks使用Dynamic sites need flexibility. Flexibility results in more code. More code means increased maintenance time. How can we keep our sites maintainable and fast? 动态站点需要灵活性。 灵活性导致更多代码。 代码更多...
react-hooks-keydow
04-10
yarn add react-hooks-keydow npm npm i react-hooks-keydow 用法 只需导入react-hooks-keydow import useKeyDownEvent from 'react-hooks-keydow' ; const App = ( ) => { const callback = key => { console ....
react-hooks:使用React Hooks的示例
05-26
项目说明/项目说明 EN：使用useEffect和useState的示例（SIMPLE）应用程序 EN：使用useEffect和useState的示例（SIMPLE）应用程序 示范： 先决条件/先决条件（最好在chrome上进行测试/最好在chrome上进行测试） ZH：开始之前，您需要在计算机上安装以下工具：[Git]（ ），[Node.js]（ ）。 另外，最好有一个编辑器来处理像[VSCode]（ ）这样的代码。 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（ ），[Node.js]（ ）。 另外，最好有一个编辑器来处理像[VSCode]（ ）这样的代码。 克隆此存储库/克隆此存储库 $ git clone 在/ cmd /中访问项目文件夹/在cmd /终端中访问项目文件夹 $ cd react-hooks 安装依赖项/安装依赖项 $ npm安装 运行应
React之Hooks基础
一切总会归于平淡
08-26 627
经过很多年的应用，我们发现函数组件其实是更加简单的，而且是更加契合我们React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，但是我们也知道，函数组件它是不能维护我们自己的状态的，那就很难受了，这该怎么办，所以为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生。......
React Hooks（钩子函数）
weixin_52148548的博客
06-14 7026
首先：React的组件创建方式，一种是类组件，一种是纯函数组件。React团队认为组件的最佳写法应该是函数，而不是类。但是纯函数组件有着类组件不具备的特点：这就注定，纯函数组件只能做UI展示的功能，如果涉及到状态的管理与切换，我们就必须得用类组件或者redux，但是在简单的页面中使用类组件或者redux会使代码显得很重。因此，React团队设计了React hooks（钩子）。React Hooks的意思是：组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。四种常用的钩子：我们知道
React Hooks详解
热门推荐
YuLong的博客
11-02 2万+
文章目录React HooksHooks简介Hook函数（9种）自定义Hooks React Hooks Hooks简介 介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。 但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没
React类组件和函数组件对比-Hooks的介绍及初体验
m0_71485750的博客
10-19 1万+
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期)。我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面这些优势:class组件可以定义自己的state，用来保存组件自己内部的状态;PureComponent } from 'react' // 类组件 class HellWorld extends PureComponent {
@react-hookz/web 是一个通用 React 钩子库，在构建时考虑到了 SSR 兼容性。
06-08
× DOCS × DISCORD × CHANGELOG × @react-hookz/web 是一个通用 React 钩子库，其构建时考虑到了 SSR 兼容性。 安装 这个很简单，大家都知道该怎么做： npm i @react-hookz/web # 或者 yarn add @react-hookz/web 因为钩子是在 React 16.8 中引入的，@react-hookz/web 需要 -你猜对了 - react 和 react-dom 16.8+。 此外，由于 React 不支持 IE，@react-hookz/web 也不支持。 您必须转译您的节点模块才能在 IE 中运行。 用法 该包提供了三个编译级别：Main，/cjs 文件夹——CommonJS 模块，具有 ES5 lang 级别。 ESM，/esm 文件夹——它是 ES 模块（浏览器兼容），具有 ES5 语言级别。 ESNext，/esnext 文件夹——它是 ES 模块（浏览器兼容），具有 ESNext 语言级别。 所以，如果你需要 useMountEffect 钩子，根据你的需要，你可以通过三种方式导入（实际上还
React Hooks——Hooks组件简介
m0_46569480的博客
06-26 179
Hook 是 React 16.8 的新增特性！并且只能运用到函数组件中！就是基于 React 中新提供的 Hook 函数，可以。
React Hooks 组件化开发（常用）
m0_46403734的博客
06-07 1167
react hook函数;
react hooks使用_用React Hooks重新思考组件
编程故事的地方
05-19 596
react hooks使用 自从React 16.8以来，React Hooks一直存在，并且一如既往地受欢迎和需求旺盛。 他们引入了一种全新的方法来处理React中的组件，这可能会导致您重新评估您的基础编码方法。 根据Stackoverflow人气调查，React已经被确立为最受欢迎的前端框架，因此在引入Hooks之后，React超越了一切 。 乍一看，React Hooks似乎可以替代类...
react-hooks-lib:一组可重复使用的React Hooks
04-23
安装npm i react-hooks-lib --save 例子参观钩子名称争论退货生命周期 F -- F -- f，条件--状态 最初的{ContextProvider，ContextConsumer，set，useSelector，useSet} 最初的{GlobalProvider，GlobalConsumer，set...
react-hooks-axios:自定义React Hooks for Axios.js
04-28
react-hooks-axios 自定义React Hooks for Axios.js安装注意：确保已安装正确版本的react(>= v16.8.0)和react-dom(>= v16.8.0) 。npm npm install --save @use-hooks/axios纱yarn add @use-hooks/axios原料药参量/**...
tslint-react-hooks：用于检测对React Hooks的无效使用的TSLint规则
01-30
TSLint挂钩规则 一个TSLint规则，用于为React挂钩强制实施。 该规则基于的。产品特点在潜在条件分支内... "react-hooks-nesting" : "error" }} 要将违反报告规则的行为用作警告提示，请将其设置为"warning" 。选件虽
react中类组件以及常见hooks总结
最新发布
qq_44307861的博客
11-06 145
react中常见hooks总结
【React学习】认识Hooks
zx1041561837的博客
07-26 1019
Hooks的中文翻译为“钩子”。在React中，函数式组件写法简单，好理解，符合Js逻辑，类组件写起来比较复杂。但是函数式组件存在的问题，Hooks可以让函数式组件拥有状态和生命周期。常用的Hooks有useState、useEffect、useContext。...............
React教程：组件，Hooks和性能
前端先锋
03-12 1845
随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。组件有可能会变大，或者你可能最终得到一堆不是组件的组件，最终你可能会到处编写重复的代码。这时候你就应该试着开始真正的 React 之旅了 —— Think in React。
【react】react18的学习（三）--hooks组件
zhangankang的博客
04-08 603
【代码】【react】react18的学习（三）--hooks组件。
React函数组件Hooks的使用
qq_60292609的博客
11-13 4114
Hooks **Hooks:**钩子 , 钓钩 , 钩住 ,是一些可以让你在函数组件里"钩入" React state 以及生命周期等特性的函数 ,是 React 16.8 的新增特性, 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 作用: 为函数组件提供状态, 生命周期等原本在 Class组件中才提供的功能 Hooks只能在函数组件中使用 可以理解为听过Hooks 为函数组件钩入 class 组件的特性 Hooks 前后 , 组件开发模式的对比 React
react-hooks生命周期
05-25
React Hooks 是 React 16.8 新增的功能，它允许我们在函数组件中使用状态和其他 React 特性，以前只能在类组件中使用。由于函数组件没有类组件的生命周期方法，React Hooks 提供了一些新的钩子函数来处理组件的生命周期。 下面是 React Hooks 中常用的生命周期函数： 1. `useEffect`: 相当于类组件的 `componentDidMount`, `componentDidUpdate`, 和 `componentWillUnmount` 这三个生命周期函数的结合。可以用来在组件挂载、更新或卸载时执行一些副作用操作，如发送网络请求、获取 DOM 节点等。 2. `useLayoutEffect`: 与 `useEffect` 类似，但是会在 DOM 更新之前同步执行，可以用来获取 DOM 节点的尺寸和位置等信息。 3. `useMemo`: 用来缓存计算结果，避免重复计算，优化性能。 4. `useCallback`: 用来缓存函数，避免重复创建，优化性能。 5. `useContext`: 用来访问 React 上下文（Context）。 6. `useReducer`: 用来管理组件状态的复杂逻辑，类似于 Redux。 7. `useRef`: 用来获取 DOM 节点的引用或者保存变量，可以在多次渲染之间保持数据的一致性。 需要注意的是，React Hooks 并不是生命周期函数的替代品，而是一种新的方式来管理组件状态和生命周期。在使用 React Hooks 的过程中，也可以使用类组件的生命周期函数来进行补充和完善。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

努力做一只合格的前端攻城狮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值