useState使用和原理
Hooks 是 React 16 中的特性,解决函数组件想使用类组件的一些特性。
关于更多 Hooks 介绍,请参考 React 官网[1]
useState
之前是在类组件中使用状态通过 state 定义,大概代码是这样的。
import React from 'react';
class Counter extends React.Component { state = { number: 0 } handleClick = () => { this.setState({ number: this.state.number + 1 }) } render() { return ( <> <p>{this.state.number}</p> <button onClick={ this.handleClick }> 改数字 </button> </> ); }
}
function render() { ReactDOM.render(<Counter />, document.getElementById('root'));
}
render()
但是函数组件没有实例,也没有状态。函数组件使用状态需要使用 useState
钩子。
关于 useState
的用法是,需要传入一个参数作为状态的初始值,当函数执行后会返回两个值,一个是当前状态的属性,一个是修改状态的方法。
我们通过一个计数器的例子,当点击按钮表示状态加1。
import React, {useState} from 'react';
function Counter() { const [ number, setNumber ] = useState(0) return ( <> <p>{number}</p> <button onClick={ () => setNumber(number + 1) } > 改数字 </button> </> )
}
function render() { ReactDOM.render(<Counter />, document.getElementById('root'));
}
render()
现在我们已经掌握了它的用法,那么我们开始分析它的原理。
原理
我们需要写一个 useState
方法,会返回当前状态的属性和设置状态的方法,每当状态改变之后,方法中会调用刷新视图的 render
方法。
let memoizedState;
function useState (initialState) { memoizedState = memoizedState || initialState function setState (newState) { memoizedState = newState render() } return [memoizedState, setState]
}
再次尝试之前的代码,依然可以正常使用,但是当多个 useState
存在的时候就有问题了,只能变一个状态了。
function Counter() { const [ number, setNumber ] = useState(0) const [ title, setTitle ] = useState('随机标题') return ( <> <h1>{title}</h1> <p>{number}</p> <button onClick={ () => setNumber(number + 1) } > 改数字 </button> <button onClick={ () => setTitle(`随机标题${Math.random()}`) } > 改标题 </button> </> )
}
现在我们需要优化我们的 Hooks ,解决多个 useState
同时使用的问题,当多个状态存在的时候,我们需要使用数组保存状态。
let memoizedStates = []
let index = 0
function useState (initialState) { memoizedStates[index] = memoizedStates[index] || initialState let currentIndex = index function setState (newState) { memoizedStates[currentIndex] = newState render() } return [memoizedStates[index++], setState]
} function Counter() { const [ number, setNumber ] = useState(0) const [ title, setTitle ] = useState('随机标题') return ( <> <h1>{title}</h1> <p>{number}</p> <button onClick={ () => setNumber(number + 1) } > 改数字 </button> <button onClick={ () => setTitle(`随机标题${Math.random()}`) } > 改标题 </button> </> )
} function render() { index = 0 ReactDOM.render(<Counter />, document.getElementById('root'));
}
render()
现在已经完成了 useState
的基本原理,当你了解原理之后,使用 Hooks 就变得更加容易了。
References
[1]
React 官网: https://reactjs.org/docs/hooks-state.html
useState使用和原理相关推荐
- usestate中的回调函数_React Hooks 源码解析(3):useState
React 源码版本: v16.11.0 源码注释笔记: airingursb/reactgithub.com 在写本文之前,事先阅读了网上了一些文章,关于 Hooks 的源码解析要么过于浅显.要么 ...
- React Hooks 原理理解
文章目录 Hooks hooks与fiber(workInProgress) 状态派发--useState(useReducer)原理 处理副作用--useEffect(useLayoutEffect ...
- React Hooks 分享
目录 一,什么是Hooks 二,为什么要使用Hooks 三,React hooks 四, useState 使用及实现 五,useEffect 使用及实现 六,如何实现多个useState, useE ...
- 从Preact学习hooks原理--useState
什么是Preact Preact可以理解为体积更小的react,实现了react的大部分功能,源码相对于react比较简单.Preact也实现了react中的hooks的内容,所以本文从Preact中 ...
- React——浅析useState原理
在讲解之前我们先回忆下闭包,什么是闭包呢? 闭包是一个特殊的对象 它由两部分组成,执行上下文A以及在A中创建的函数B. 当B执行时,如果访问了A中的变量对象,那么闭包就会产生. 这里有一篇文档对闭包有 ...
- react 日期怎么格式化_手写React的Fiber架构,深入理解其原理
熟悉React的朋友都知道,React支持jsx语法,我们可以直接将HTML代码写到JS中间,然后渲染到页面上,我们写的HTML如果有更新的话,React还有虚拟DOM的对比,只更新变化的部分,而不重 ...
- jsbridge原理_React Hooks 原理与最佳实践
1. 前言 React Hooks 是 React 16.8 引入的新特性,允许我们在不使用 Class 的前提下使用 state 和其他特性.React Hooks 要解决的问题是状态共享,是继 r ...
- react文字滚动插件_【赠书】Preact(React)核心原理详解
豆皮粉儿们,又见面了,今天这一期,由字节跳动数据平台的"winge(宝丁)",带大家见识见识前端"轮子"之一Preact框架. 提到Preact,你肯定会先想到 ...
- react 流程图框架_【赠书】Preact(React)核心原理详解Preact(React) 核心原理解析...
豆皮粉儿们,又见面了,今天这一期,由字节跳动数据平台的"winge(宝丁)",带大家见识见识前端"轮子"之一Preact框架. 提到Preact,你肯定会先想到 ...
最新文章
- js中 let var const 的差异和使用场景
- Django----缓存
- Java设计模式之创建型:建造者模式
- laravel 分页
- 天池-街景字符编码识别5-模型训练与验证
- “神算子”来了!时序预测模型零门槛轻松上手
- MySQL优化(二)
- 多数据源切换数据源注入为空问题
- 【CF1312D】Count the Arrays(计数)
- 大数据时代的医学公共数据库与数据挖掘技术简介
- 豆瓣9.6分,Scala编程圣经第5版隆重来袭
- 以树莓派为控制中心的软硬件之开发之脑电波模块
- 数据库启动时遇到ORA-03113: 通信通道的文件结尾
- Centos 异步 IO framework io_uring,基本原理,程序示例与性能压测
- Spring相关的配置
- 微信小程序做问卷——前端部分(生成问卷)
- matlab降噪报告,基于matlab主动降噪实验.docx
- 个性签名代码(花了1个多小时从网上搜集以及整理)
- 如何杀除Trojan.win32.Thsys病毒
- 电脑必备软件(Windows)(更新中)
热门文章
- 新荣耀员工现金补偿最高可拿 N+5;天津立法禁止采集人脸识别信息;IntelliJ IDEA 新版发布|极客头条...
- 英特尔FPGA技术大会: 加快塑造边缘、网络和云端的未来
- 基于“中国架构”,为政企数字化转型而生,中国电子云自带“三大光环”
- 零基础物联网开发,踩坑无数,得到这份宝典 | 原力计划
- 为什么没人会 COBOL 编程了?
- 4 场直播,哈工大、亚马逊等大咖为你带来机器学习与知识图谱的内容盛宴
- 万人马拉松,人脸识别系统如何又快又准完成校验?
- 吊打面试官!Redis 常见面试题请收好 | 原力计划
- 微软删除最大的公开人脸识别数据集,只因员工离职?!
- 太火!这本 AI 图书微软强推,程序员靠它拿下 50K!